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.53k stars 1.32k forks source link

[data grid] Row ordering, show full row + live update of the DOM vs. delayed with an indicator #11404

Open niralivasoya opened 11 months ago

niralivasoya commented 11 months ago

Steps to reproduce

I used DataGrid PRO for row-ordering. I want to see the full row when I change or update the row. Currently, when I start dragging the row, I can only see the ID, but I want to see the full rows. I want to see the Visual effect.

Current behavior

https://mui.com/x/react-data-grid/row-ordering/

https://github.com/user-attachments/assets/b5d389f2-26d7-4a49-bf02-d4569eb325b1

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: data-grid, row-ordering, data-grid-pro

niralivasoya commented 11 months ago

I want something like this.

https://github.com/mui/mui-x/assets/32123446/0e6531e3-fa60-40a0-86f6-7253e9a15f70

niralivasoya commented 11 months ago

Currently while dragging the rows swap places immediately. An improvement would be to show 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 place with an adjacent row.

michelengelen commented 11 months ago

Hey @niralivasoya that's a very nice example you have there.

Unfortunately the requested features are not possible at the moment. The data grid currently does not render a separate component for the dragged row, but applies a class to the actually dragged element, which is the reorder cell. This class then allows for a previously hidden div to show (content is the row id).

I will pass this to our board, as it would be a nice improvement to the visual appearance.

The same goes for the second request: I can understand that a dropping indicator would be enough for most use cases, but this is a design decision we made intentionally. We can still have a look if we can somehow support that.

Did I miss something @MBilalShafi ?

niralivasoya commented 11 months ago

@michelengelen, thank you so much for your response. Looking forward to using this great feature.

oliviertassinari commented 2 months ago

This issue reminds me of the tradeoff of pragmatic-drag-and-drop vs. react-beautiful-dnd. https://youtu.be/5SQkOyzZLHM?si=7bqxbbRagGD1sJRS&t=1684. It's not clear which one is best but I suspect pragmatic-drag-and-drop is faster and introduces less layout shift so is a better UX.