diff --git a/docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.js b/docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.js similarity index 96% rename from docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.js rename to docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.js index 9274284cb3d0..1b61c7766519 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.js +++ b/docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.js @@ -11,7 +11,7 @@ import FormControl from '@mui/material/FormControl'; import InputLabel from '@mui/material/InputLabel'; import Select from '@mui/material/Select'; -export default function RowGroupingSortingSingleGroupingColDef() { +export default function RowGroupingFilteringSingleGroupingColDef() { const data = useMovieData(); const [mainGroupingCriteria, setMainGroupingCriteria] = React.useState('undefined'); diff --git a/docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.tsx b/docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.tsx similarity index 96% rename from docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.tsx rename to docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.tsx index bc0cf2b01f87..ec2ffa02b495 100644 --- a/docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.tsx +++ b/docs/data/data-grid/row-grouping/RowGroupingFilteringSingleGroupingColDef.tsx @@ -11,7 +11,7 @@ import FormControl from '@mui/material/FormControl'; import InputLabel from '@mui/material/InputLabel'; import Select from '@mui/material/Select'; -export default function RowGroupingSortingSingleGroupingColDef() { +export default function RowGroupingFilteringSingleGroupingColDef() { const data = useMovieData(); const [mainGroupingCriteria, setMainGroupingCriteria] = React.useState('undefined'); diff --git a/docs/data/data-grid/row-grouping/row-grouping.md b/docs/data/data-grid/row-grouping/row-grouping.md index bb7aca8496d3..08ef4281d6cf 100644 --- a/docs/data/data-grid/row-grouping/row-grouping.md +++ b/docs/data/data-grid/row-grouping/row-grouping.md @@ -271,17 +271,20 @@ To change the default cell indent, you can use the `--DataGrid-cellOffsetMultipl ### Single grouping column -When using `rowGroupingColumnMode = "single"`, the default behavior is to apply the `sortComparator` and `filterOperators` of the top-level grouping criteria. +When using `rowGroupingColumnMode = "single"`, the default behavior is to: + +- sort each grouping criteria using the `sortComparator` of the column +- apply the `filterOperators` of the top-level grouping criteria If you are rendering leaves with the `leafField` property of `groupingColDef`, the sorting and filtering will be applied on the leaves based on the `sortComparator` and `filterOperators` of their original column. -In both cases, you can force the sorting and filtering to be applied on another grouping criteria with the `mainGroupingCriteria` property of `groupingColDef` +You can force the filtering to be applied on another grouping criteria with the `mainGroupingCriteria` property of `groupingColDef` :::warning This feature is not yet compatible with `sortingMode = "server"` and `filteringMode = "server"`. ::: -{{"demo": "RowGroupingSortingSingleGroupingColDef.js", "bg": "inline", "defaultCodeOpen": false}} +{{"demo": "RowGroupingFilteringSingleGroupingColDef.js", "bg": "inline", "defaultCodeOpen": false}} ### Multiple grouping columns diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx index fd0573c80f84..e82a47871fc5 100644 --- a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx +++ b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx @@ -88,11 +88,11 @@ const getGroupingCriteriaProperties = (groupedByColDef: GridColDef, applyHeaderN // We only want to sort the groups of the current grouping criteria if ( cellParams1.rowNode.type === 'group' && - cellParams1.rowNode.groupingField === groupedByColDef.field && cellParams2.rowNode.type === 'group' && - cellParams2.rowNode.groupingField === groupedByColDef.field + cellParams1.rowNode.groupingField === cellParams2.rowNode.groupingField ) { - return groupedByColDef.sortComparator!(v1, v2, cellParams1, cellParams2); + const colDef = cellParams1.api.getColumn(cellParams1.rowNode.groupingField); + return colDef.sortComparator(v1, v2, cellParams1, cellParams2); } return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2); diff --git a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx index 1a9740d20826..601df5408868 100644 --- a/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx @@ -1852,7 +1852,7 @@ describe(' - Row grouping', () => { clock.withFakeTimers(); describe('prop: rowGroupingColumnMode = "single"', () => { - it('should use the top level grouping criteria for sorting if mainGroupingCriteria and leafField are not defined', async () => { + it('should use each grouping criteria for sorting if leafField are not defined', async () => { render( - Row grouping', () => { 'Cat 1 (1)', '', 'Cat A (3)', - 'Cat 1 (1)', - '', 'Cat 2 (2)', '', '', + 'Cat 1 (1)', + '', ]); }); - it('should use the column grouping criteria for sorting if mainGroupingCriteria is one of the grouping criteria and leaf field is defined', () => { + it('should sort leaves if leaf field is defined', () => { render( - Row grouping', () => { />, ); expect(getColumnValues(0)).to.deep.equal([ + 'Cat B (2)', + 'Cat 2 (1)', + '3', + 'Cat 1 (1)', + '4', 'Cat A (3)', 'Cat 2 (2)', '1', '2', 'Cat 1 (1)', '0', - 'Cat B (2)', - 'Cat 2 (1)', - '3', - 'Cat 1 (1)', - '4', ]); });