[data grid] Grouping using drag and drop

[marpro200]

Summary 💡

I have been using the devexpress reactive grid for a while and have now migrated to mui x data grid.

The devexpress reactive data grid has the feature to group rows by dragging the column header to the toolbar.
(example: https://codesandbox.io/s/charming-almeida-jsvlc7?file=/index.js)

Examples 🌈

https://codesandbox.io/s/charming-almeida-jsvlc7?file=/index.js

Motivation 🔦

This feature would make grouping much simpler and much more intuitive. Furthermore it is more accessible than having to access the column's menu.

Order ID 💳 (optional)

No response

[flaviendelangle]

I would be in favor of adding a waiting for upvote and a link in the doc
It's a good improvement that we intend to do at some point, but when will depend a lot on the traction of the community compared to other features.

[DanielLanger]

Any update on this? Would love to see this prioritized :)

[flaviendelangle]

Not yet
It's something you should be able to build on your side.
Of course, having a built-in solution is still very interesting, but we tend to prioritize things that users can build at all (for instance column spanning, column grouping or lazy loading with row grouping).

This feature will be added at some point 👍

[mormir2]

Are there any news regarding this feature? Or is there some example or workaround on how this feature could be implemented in the meantime?

[movisis]

This is a must have!

[gffhammes]

Are there any news regarding this feature? Or is there some example or workaround on how this feature could be implemented in the meantime?

I'm working on it on my company. My leader already allowed me to share the feature. When I finish it i'll link a sandbox here

[sterlingdcs-damian]

I'm also trying to migrate off devexpress as MUI is much more performant, but for parity we need this

[marpro200]

Are there any news regarding this feature? Or is there some example or workaround on how this feature could be implemented in the meantime?

I'm working on it on my company. My leader already allowed me to share the feature. When I finish it i'll link a sandbox here

Hey did you manage to implement this?

[Preefix]

Are there any news regarding this feature? Or is there some example or workaround on how this feature could be implemented in the meantime?

I'm working on it on my company. My leader already allowed me to share the feature. When I finish it i'll link a sandbox here

Any udpates on this?

[gffhammes]

Are there any news regarding this feature? Or is there some example or workaround on how this feature could be implemented in the meantime?

I'm working on it on my company. My leader already allowed me to share the feature. When I finish it i'll link a sandbox here

Any udpates on this?

I have successfully implement this feature, but I'm not working on that company anymore. So unfortunately I no longer have access to the code.

But I'll describe what I've done:

First I've created a Context around the datagrid and then I've created a drop component above the grid, inside the context.

In the context, I've created a useRef variable called draggedColumn. And on the column header onDrag event I've passed a callback that updates the draggedColumn ref.

At the drop component, I've passed a callback on the onDrop event that verifies if the draggedColumn ref has any value. If true, the function call the DataGridRef grouping method with the column to group.

[moritz-griesser]

Any udpates on this?

[Drago92]

Our Company is waiting for this feature too