[data grid] Row reorder visual updates

[DanailH]

Summary 💡

As a follow-up of the row reordering PR https://github.com/mui/mui-x/pull/4034 we can do an integration where the focus will be the visual (UX) part of the feature. Below is the summary of what we can improve.

• [ ] Update the value of what is displayed in the draggable container once the dragging start. Currently, the ID of the row that is being dragged is displayed there. To be changed to show the content of the first visible cell in that row.
• [ ] Currently while dragging the rows swap places immediately. An improvement would be to show to the user the place where the row will be moved (check the image below for more details), or to keep the current implementation, and highlight the row being moved. Some implementations use a transition as the moved row swaps places with an adjacent row.

• [ ] Update the icon that illustrates if a row is draggable. Make it smaller, maybe 18px, and use the theme.palette.action.active design token like the IconButton: https://mui.com/material-ui/react-button/#icon-button.

For more details refer to these comments: https://github.com/mui/mui-x/pull/4034#discussion_r863184696, https://github.com/mui/mui-x/pull/4034#issuecomment-1113789228

[artsiadi]

@DanailH Thank you so much for adding this feature! I was wondering, is there a way to disable the drag just for certain rows in the data grid? In my use case I have one row at the bottom of the data grid that should always remain there. the other rows can be reordered.

[DanailH]

Hey @artsiadi currently no, but I'm interested in knowing what your use case is?

[artsiadi]

Hi @DanailH, we use the grid to display rows with priorities. the user can re-order the rows and change their priority. in addition to that we have a default row that always appears at the bottom of the list and has the lowest priority. the default row cannot be edited or change priority.

[DanailH]

@artsiadi we can add the option to disable a row to be reordered but if you can reorder the rows around it that will still change the location of your fixed row, no?

[artsiadi]

@DanailH I added a check in the onRowOrderChange callback to make sure that the new index of the row is not the index of the pinned one. BTW when do you plan to close this issue? we're currently looking in to overriding the draggable container to display different content/change cursor icon :)

[twhiteheadzm]

@DanailH I would also love the feature to disable dragging for particular rows. I have a list with some blank rows that should not be dragged. I can probably just 'reverse' the move if a user drags it by monitoring onRowOrderChange but the ideal is to disable or hide the drag icon for the row. I know the icon can be customized but not clear in the docs if the icon can be custom per row based on data.

[DanailH]

This seems to be getting some traction in terms of desirability. I think we can add a callback to check if a row is draggable. I'm thinking something like isRowDraggable. It will be called once when a row is rendered so that we know whether to bind the events and to visually indicate that the dragging is disabled.

This ticket tracks other improvements tho so we can add the isRowDraggable callback but keep the ticket open to tracking the other improvements.

[artsiadi]

+1 for the custom drag icon (both for handle and while dragging) :)

[tetchel]

The icon can be customized now (doc)

You can also adjust it with the .MuiDataGrid-rowReorderCell--draggable selector, for example I apply a lower opacity so the icon isn't as heavy.

---

I wanted to drop by here to +1 the idea of showing a line as an indicator of where the row will be dropped, rather than an immediate swap. Thanks.