[data grid] Cannot reorder pinned columns by drag and drop

[rhyswatsonto]

Summary

Hi, I noticed that drag and dropping to reorder pinned columns is not possible. Note I am just talking about reordering between multiple pinned columns.

To recreate:
Using Data Grid: pin more than 1 columns, then try to drag and drop to reorder the columns.

The only workaround right now is to unpin the columns, then re-pin them in the desired order.

Examples

https://mui.com/x/react-data-grid/column-pinning/#initializing-the-pinned-columns, using this example if we pin multiple columns and try to drag and drop it will not work.

In the documentation it specifically calls out that pinned columns cannot be reordered: https://github.com/mui/mui-x/blob/master/docs/data/data-grid/column-pinning/column-pinning.md
"Data Grid - Column pinning
Pin columns to keep them visible at all time.

Pinned (or frozen, locked, or sticky) columns are columns that are visible at all time while the user scrolls the Data Grid horizontally. They can be pinned either to the left or right side and cannot be reordered."

Motivation

Our users noticed that it was strange that they could not reorder the pinned columns.

Search keywords: Pinned Data Grid Drag and Drop Reorder

[michelengelen]

This seems like a valid addition to the pinned columns feature. I'll add this to the board for the team to look at it.

In the meantime you could build a workaround by using the controlled model and a custom drag'n'drop implementation. It's a quite a heavy customization though

[rhyswatsonto]

Thank you, this would be a very welcome addition.
I will look into a custom implementation, but like you said it did seem like a bigger overhaul then we are looking to do at this moment.