[docs] Add a recipe for drag and drop row grouping #17638
Conversation
KenanYusuf
added
docs
|
Thanks for adding a type label to the PR! 👍 |
|
Please add one type label to categorize the purpose of this PR appropriately:
|
Not sure a recipe fits into any of these categories 🤷 |
|
Deploy preview: https://deploy-preview-17638--material-ui-x.netlify.app/ Updated pages: |
| }; | ||
|
|
||
| return ( | ||
| <Chip |
There was a problem hiding this comment.
Should we disable these chips when pivot mode is active? They won't work anyway.
| event.preventDefault(); | ||
|
|
||
| const draggedField = draggedChip || draggedColumn; | ||
| if (draggedField && !rowGroupingModel.includes(draggedField)) { |
There was a problem hiding this comment.
It would be great not to allow dropping non-groupable columns into the toolbar.
And disable chips for non-groupable columns that have been included in the grouping model programatically.
There was a problem hiding this comment.
It would be great not to allow dropping non-groupable columns into the toolbar.
Makes sense 👍
And disable chips for non-groupable columns that have been included in the grouping model programatically.
Is there a use case for this? 🤔
There was a problem hiding this comment.
Yes, something like this: https://stackblitz.com/edit/1yktkhhd?file=src%2FDemo.tsx
In this demo, the rows are grouped by company, and you cannot ungroup them. You can add more grouping criteria, though.
| @@ -18,6 +18,14 @@ Use `GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD` to pin a grouped column. In the de | |||
|
|
|||
| {{"demo": "RowGroupingPinning.js", "bg": "inline", "defaultCodeOpen": false}} | |||
|
|
|||
| ## Creating and reordering groups with drag and drop | |||
There was a problem hiding this comment.
Could you also link to this recipe from the toolbar doc page?
|
|
||
| return ( | ||
| <div style={{ height: 400, width: '100%' }}> | ||
| <DataGridPremium |
There was a problem hiding this comment.
It would be a much better UX if you could use it with useKeepGroupedColumnsHidden so that when a column gets added to the toolbar, it gets removed from the list of columns and you don't end up with duplicates.
The issue is when a column header gets added to the toolbar on drag over, it is no longer in the DOM, and so the onDragEnd event does not fire. In the demo below you can see how the dragged column state does not get reset.
Screen.Recording.2025-05-02.at.16.40.58.mov
There was a problem hiding this comment.
The issue is when a column header gets added to the toolbar on drag over, it is no longer in the DOM, and so the onDragEnd event does not fire.
Is this because we add grouping criteria on dragOver?
I was actually wondering if adding grouping criteria on dragEnd would be a better UX 🤔
Adds a recipe for #5235.
drag.and.drop.row.groups.mov
Todo: