From 4b8cd5c69fcddb2594357ae46e2fd6cb49ab1bc5 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Fri, 7 Jul 2023 15:42:41 +0200 Subject: [PATCH 1/3] update docs --- ...ef.js => RowGroupingFilteringSingleGroupingColDef.js} | 2 +- ....tsx => RowGroupingFilteringSingleGroupingColDef.tsx} | 2 +- docs/data/data-grid/row-grouping/row-grouping.md | 9 ++++++--- 3 files changed, 8 insertions(+), 5 deletions(-) rename docs/data/data-grid/row-grouping/{RowGroupingSortingSingleGroupingColDef.js => RowGroupingFilteringSingleGroupingColDef.js} (96%) rename docs/data/data-grid/row-grouping/{RowGroupingSortingSingleGroupingColDef.tsx => RowGroupingFilteringSingleGroupingColDef.tsx} (96%) 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 9274284cb3d09..1b61c77665195 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 bc0cf2b01f876..ec2ffa02b495a 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 011e89d1ee31b..205667c851a45 100644 --- a/docs/data/data-grid/row-grouping/row-grouping.md +++ b/docs/data/data-grid/row-grouping/row-grouping.md @@ -258,17 +258,20 @@ const groupingColDef = { ### 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 `groupColDef`, 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 `groupColDef` +You can force the filtering to be applied on another grouping criteria with the `mainGroupingCriteria` property of `groupColDef` :::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 From 35fd3f6c7b9af51e9c4e9f22f817f1645346f6a4 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Fri, 14 Jul 2023 13:59:31 +0200 Subject: [PATCH 2/3] fix sorting in single grouping column --- .../rowGrouping/createGroupingColDef.tsx | 6 +++--- .../tests/rowGrouping.DataGridPremium.test.tsx | 18 +++++++++--------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx index 68ba6eb242f1b..87209f002f591 100644 --- a/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx +++ b/packages/grid/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx @@ -87,11 +87,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/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx b/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx index 2a03b49efffe2..b0345a8bdd932 100644 --- a/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx +++ b/packages/grid/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx @@ -1803,7 +1803,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', ]); }); From 21a52f489ca39106b5841bcb3c62a426e1a3060d Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskyi Date: Sun, 17 Mar 2024 19:26:29 +0100 Subject: [PATCH 3/3] update docs --- docs/data/data-grid/row-grouping/row-grouping.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/data-grid/row-grouping/row-grouping.md b/docs/data/data-grid/row-grouping/row-grouping.md index b252785947246..08ef4281d6cfd 100644 --- a/docs/data/data-grid/row-grouping/row-grouping.md +++ b/docs/data/data-grid/row-grouping/row-grouping.md @@ -278,7 +278,7 @@ When using `rowGroupingColumnMode = "single"`, the default behavior is to: 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. -You can force the filtering to be applied on another grouping criteria with the `mainGroupingCriteria` property of `groupColDef` +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"`.