search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.14k stars 1.29k forks source link

[data grid] Column reorder fails when dragged to the very edge of target column #14921

Open JimbadMoreplovac opened 4 days ago

JimbadMoreplovac commented 4 days ago

Steps to reproduce

https://codesandbox.io/embed/46kg97?module=/src/Demo.js&fontsize=12

Steps:

  1. Pick a column you want to move to the left/right
  2. Try to drop the column on the very edge of the targeted column

Here's an uploaded video of the behaviour.

https://github.com/user-attachments/assets/ef1f80b3-6f84-4832-8740-82cec399e213

Current behavior

The dragged column return to it's original place.

Expected behavior

The dragged column takes the place of the targeted column.

Context

I want to be able to change the order of the columns even if I drop the column of the edge of the targeted column.

Your environment

npx @mui/envinfo ``` System: OS: macOS 14.5 Binaries: Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm pnpm: Not Found Browsers: Chrome: 129.0.6668.100 Edge: Not Found Safari: 17.5 ```

Search keywords: drag, dragging, column reorder, edge Order ID: 95678

michelengelen commented 4 days ago

Thanks for opening this issue @JimbadMoreplovac ... I can confirm this behavior.

We should look into this, but as a quick workaround you can use the keepColumnPositionIfDraggedOutside prop on the DataGrid component to prevent that. This was designed for when the column gets dragged outside to still perform the reorder, but this also works for this case.

Given that I think the grid just thinks that the target this column is dropped on is not part of the grid.

I'll add it to the board.

JimbadMoreplovac commented 4 days ago

@michelengelen Really appreciate the fast response, and the fix worked like a charm!