-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
[DataGridPremium] Reordering support for row grouping #18251
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
MBilalShafi
merged 95 commits into
mui:master
from
MBilalShafi:feature/row-grouping-dnd
Aug 27, 2025
Merged
Changes from 86 commits
Commits
Show all changes
95 commits
Select commit
Hold shift + click to select a range
93bc77a
Init commit
MBilalShafi 9ee3222
Add more cases
MBilalShafi f731de5
Add to a demo
MBilalShafi 578d189
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi 870ed69
Improve the comment
MBilalShafi 1bc38ef
Remove unnecessary export
MBilalShafi 511e47f
Add more use-cases
MBilalShafi e91ecab
Improve computation of disableDragEvents
MBilalShafi 4f0f835
Update logic to move children instead of swapping
MBilalShafi f67dd82
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi 78b546f
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi 048462e
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi fef3ef0
Add a few cases + autoexpand group nodes on hover
MBilalShafi f9c1652
Fix reorder issues
MBilalShafi 1577fd3
Allow move effect only
MBilalShafi d2b49f9
Allow to drop over drop indicator
MBilalShafi 8eeb048
Show copy cursor for feedback
MBilalShafi d084c86
Reorder
MBilalShafi 935dd13
Reorganize
MBilalShafi 56b7dc8
Fix a couple multi-level row grouping use-cases
MBilalShafi b4b8343
Add first batch of test cases
MBilalShafi a9dec8c
Add and fix tests
MBilalShafi 14f5f0b
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi e4b548a
Customize default reorder value for auto-generated (group) rows
MBilalShafi 06719d5
Add to .gitignore
MBilalShafi 609c128
Add another case
MBilalShafi 54caf27
Update .gitignore
MBilalShafi a723172
Add more tests
MBilalShafi e538c2b
Add groupingValueSetter
MBilalShafi 416cc3b
prettier
MBilalShafi 21f65ff
Add processRowUpdate
MBilalShafi 9a22d20
Add dataSource.editRow
MBilalShafi 1afe0a6
Call processRowUpdate or dataSource.editRow
MBilalShafi 1b26322
Set loading during load
MBilalShafi d133cda
Accommodate dataSource in auto row expand
MBilalShafi e88810d
docs:api
MBilalShafi 7c32d4e
prettier
MBilalShafi 9cb0673
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi e59106f
Add dataSource.setGroupKey(), a test, and a couple JSDocs
MBilalShafi 9217f70
Add/update a few docs
MBilalShafi 225b65a
Revert dataSource specific code
MBilalShafi 21746db
Update test case
MBilalShafi 1146783
docs:typescript:formatted
MBilalShafi 5866e32
Improve the drag image styling
MBilalShafi 9ecd8a5
Show drop indicator at adjacent positions
MBilalShafi 1f7be68
Adjust a few styles
MBilalShafi 06f3a49
Docs updates
MBilalShafi 93c203b
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi a863742
Lint
MBilalShafi fcf5d17
Use updateRows to update edited row
MBilalShafi 12db498
Update the docs
MBilalShafi 8c847ed
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi 453f143
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi fd5c78f
Update .gitignore
MBilalShafi ab10a29
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi 4a32394
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi 8adf89f
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi eb666bc
Andrew's review
MBilalShafi e9f192d
Adjust styles
MBilalShafi 346749f
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi 7ed2268
Fix failing test
MBilalShafi a97e02b
Update title
MBilalShafi 0a24f22
Docs review addressed
MBilalShafi 3637d97
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi 790db7f
Add seperators for cross-parent reorders
MBilalShafi 2e1255a
Initial (and buggy) cross parent re-order impl.
MBilalShafi 34a8b60
Introduce validation machanism to reduce speghetti code
MBilalShafi 7ea989e
Minor update
MBilalShafi 142503e
setRowIndex() updated implementation
MBilalShafi 28de358
Minor fix
MBilalShafi 30ce5ee
Add some tests
MBilalShafi 4dfd83a
Add more tests
MBilalShafi 7bf8c2a
Some files reorganize and simple improvements
MBilalShafi 71abb0d
Update docs
MBilalShafi 1d0658d
Add warnings on onProcessRowUpdateError not defined
MBilalShafi 0878ea1
Add paranthesis' nitpicks
MBilalShafi cf5e47b
🤦 - oops
MBilalShafi 03d218e
Parenthesis
MBilalShafi 901cb86
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi fe93004
Propagate totalTopLevelRowCount update for deeply nested removed nodes
MBilalShafi 743685d
prettier
MBilalShafi 6c16ad9
Handle group merging into existing group at a nested level
MBilalShafi dfba357
Reorganize the executor's logic for better readability
MBilalShafi 8e11472
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi 7656ec4
Improvements suggested by Andrew
MBilalShafi 1da5aef
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi 3ab02c0
Add destructuring
MBilalShafi 0eaaa25
Make the reordering demo 2-level
MBilalShafi fccaf20
Add a few 'before' checks
MBilalShafi e010145
Fix auto-expand test
MBilalShafi 07af9c8
fix decade formatting in the grouping column
cherniavskii 9ec8bdb
docs:typescript:formatted
MBilalShafi 2cdb036
Fix incorrect index being passed to rowOrderChange event
MBilalShafi 7bd8a9d
Merge branch 'master' into feature/row-grouping-dnd
MBilalShafi 218558e
Adapt the new eslint rule
MBilalShafi File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
63 changes: 63 additions & 0 deletions
63
docs/data/data-grid/row-grouping/RowGroupingGroupingValueSetter.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
import * as React from 'react'; | ||
import { | ||
DataGridPremium, | ||
useGridApiRef, | ||
useKeepGroupedColumnsHidden, | ||
} from '@mui/x-data-grid-premium'; | ||
import { useMovieData } from '@mui/x-data-grid-generator'; | ||
|
||
export default function RowGroupingGroupingValueSetter() { | ||
const data = useMovieData(); | ||
const apiRef = useGridApiRef(); | ||
|
||
const columnsWithComposer = React.useMemo( | ||
() => [ | ||
...data.columns, | ||
{ | ||
field: 'composer', | ||
headerName: 'Composer', | ||
valueGetter: (value) => value?.name, | ||
groupingValueSetter: (value, row) => { | ||
return { | ||
...row, | ||
composer: { name: value }, | ||
}; | ||
}, | ||
width: 200, | ||
}, | ||
{ | ||
field: 'decade', | ||
headerName: 'Decade', | ||
valueGetter: (_, row) => (row.year ? Math.floor(row.year / 10) * 10 : null), | ||
groupingValueSetter: (value, row) => ({ | ||
...row, | ||
// Since converting to decade is a lossy operation, directly using the decade value should be sufficient here | ||
year: value, | ||
}), | ||
valueFormatter: (value) => (value ? `${value.toString().slice(-2)}'s` : ''), | ||
}, | ||
], | ||
[data.columns], | ||
); | ||
|
||
const initialState = useKeepGroupedColumnsHidden({ | ||
apiRef, | ||
initialState: { | ||
rowGrouping: { | ||
model: ['composer', 'decade'], | ||
}, | ||
}, | ||
}); | ||
|
||
return ( | ||
<div style={{ height: 400, width: '100%' }}> | ||
<DataGridPremium | ||
{...data} | ||
columns={columnsWithComposer} | ||
apiRef={apiRef} | ||
initialState={initialState} | ||
rowReordering | ||
/> | ||
</div> | ||
); | ||
} |
65 changes: 65 additions & 0 deletions
65
docs/data/data-grid/row-grouping/RowGroupingGroupingValueSetter.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
import * as React from 'react'; | ||
import { | ||
DataGridPremium, | ||
useGridApiRef, | ||
GridColDef, | ||
useKeepGroupedColumnsHidden, | ||
} from '@mui/x-data-grid-premium'; | ||
import { useMovieData, Movie } from '@mui/x-data-grid-generator'; | ||
|
||
export default function RowGroupingGroupingValueSetter() { | ||
const data = useMovieData(); | ||
const apiRef = useGridApiRef(); | ||
|
||
const columnsWithComposer = React.useMemo( | ||
() => [ | ||
...data.columns, | ||
{ | ||
field: 'composer', | ||
headerName: 'Composer', | ||
valueGetter: (value: { name: string }) => value?.name, | ||
groupingValueSetter: (value, row) => { | ||
return { | ||
...row, | ||
composer: { name: value }, | ||
}; | ||
}, | ||
width: 200, | ||
} as GridColDef<Movie, string>, | ||
{ | ||
field: 'decade', | ||
headerName: 'Decade', | ||
valueGetter: (_, row) => (row.year ? Math.floor(row.year / 10) * 10 : null), | ||
groupingValueSetter: (value, row) => ({ | ||
...row, | ||
// Since converting to decade is a lossy operation, directly using the decade value should be sufficient here | ||
year: value, | ||
}), | ||
valueFormatter: (value: number | null) => | ||
value ? `${value.toString().slice(-2)}'s` : '', | ||
} as GridColDef<Movie, number, string>, | ||
], | ||
[data.columns], | ||
); | ||
|
||
const initialState = useKeepGroupedColumnsHidden({ | ||
apiRef, | ||
initialState: { | ||
rowGrouping: { | ||
model: ['composer', 'decade'], | ||
}, | ||
}, | ||
}); | ||
|
||
return ( | ||
<div style={{ height: 400, width: '100%' }}> | ||
<DataGridPremium | ||
{...data} | ||
columns={columnsWithComposer} | ||
apiRef={apiRef} | ||
initialState={initialState} | ||
rowReordering | ||
/> | ||
</div> | ||
); | ||
} |
7 changes: 7 additions & 0 deletions
7
docs/data/data-grid/row-grouping/RowGroupingGroupingValueSetter.tsx.preview
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
<DataGridPremium | ||
{...data} | ||
columns={columnsWithComposer} | ||
apiRef={apiRef} | ||
initialState={initialState} | ||
rowReordering | ||
/> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import * as React from 'react'; | ||
import { | ||
DataGridPremium, | ||
useGridApiRef, | ||
useKeepGroupedColumnsHidden, | ||
} from '@mui/x-data-grid-premium'; | ||
import { useMovieData } from '@mui/x-data-grid-generator'; | ||
|
||
export default function RowGroupingReordering() { | ||
const data = useMovieData(); | ||
const apiRef = useGridApiRef(); | ||
|
||
const initialState = useKeepGroupedColumnsHidden({ | ||
apiRef, | ||
initialState: { | ||
rowGrouping: { | ||
model: ['company'], | ||
}, | ||
}, | ||
}); | ||
|
||
return ( | ||
<div style={{ height: 400, width: '100%' }}> | ||
<DataGridPremium | ||
{...data} | ||
apiRef={apiRef} | ||
initialState={initialState} | ||
rowReordering | ||
/> | ||
</div> | ||
); | ||
} |
32 changes: 32 additions & 0 deletions
32
docs/data/data-grid/row-grouping/RowGroupingReordering.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import * as React from 'react'; | ||
import { | ||
DataGridPremium, | ||
useGridApiRef, | ||
useKeepGroupedColumnsHidden, | ||
} from '@mui/x-data-grid-premium'; | ||
import { useMovieData } from '@mui/x-data-grid-generator'; | ||
|
||
export default function RowGroupingReordering() { | ||
const data = useMovieData(); | ||
const apiRef = useGridApiRef(); | ||
|
||
const initialState = useKeepGroupedColumnsHidden({ | ||
apiRef, | ||
initialState: { | ||
rowGrouping: { | ||
model: ['company'], | ||
}, | ||
}, | ||
}); | ||
|
||
return ( | ||
<div style={{ height: 400, width: '100%' }}> | ||
<DataGridPremium | ||
{...data} | ||
apiRef={apiRef} | ||
initialState={initialState} | ||
rowReordering | ||
/> | ||
</div> | ||
); | ||
} |
6 changes: 6 additions & 0 deletions
6
docs/data/data-grid/row-grouping/RowGroupingReordering.tsx.preview
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
<DataGridPremium | ||
{...data} | ||
apiRef={apiRef} | ||
initialState={initialState} | ||
rowReordering | ||
/> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.