Should columns reordering work using drag and drop when a custom colum header combining both sorting and filter inputs is used

[liamkar]

I have a custom renderHeaderCell implementation in the vein of https://github.com/adazzle/react-data-grid/blob/main/website/routes/HeaderFilters.lazy.tsx

As a final touch I would have liked to add possibility to re-order the columns using the re-ordering support in the vein of this: https://github.com/adazzle/react-data-grid/blob/main/website/routes/ColumnsReordering.lazy.tsx

So basically i just set my columns to have draggable:true property and added reordering handler to the datagrid: <DataGrid
....
onColumnsReorder={onColumnsReorder}
/>

Unfortunately, when I try to do similar drag and drop manouver like i can do with the ColumnsReordering demo right here: https://adazzle.github.io/react-data-grid/#/ColumnsReordering

nothing happens. The code never even reaches the onColumnsReorder function. The UI does not look too response either, when I have dragged one column on top of another, which in the demo, causes the below column to change a color slightly. In my case, nothing happens.

Could the reason be that this reordering just does not work when a big custom rendering is done for the renderHeaderCell like I have done.

Or could it be there are some other required parameters and tweaks in addition to setting drabble:true and adding onColumnsReorder function to grid? as the ColumnsReordering -demo contains lots of code, it is not entirely clear what parts of the code are crucial on getting the reordering really work as I havent seen a separate documentation on that topic either.