[DataGridPremium] Fix single grouping column sorting

docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.js → 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');

docs/data/data-grid/row-grouping/RowGroupingSortingSingleGroupingColDef.tsx → 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<string>('undefined');

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
 

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);

packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx

@@ -1852,7 +1852,7 @@ describe('<DataGridPremium /> - 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(
           <Test
             initialState={{ rowGrouping: { model: ['category1', 'category2'] } }}
@@ -1869,15 +1869,15 @@ describe('<DataGridPremium /> - 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(
           <Test
             initialState={{ rowGrouping: { model: ['category1', 'category2'] } }}
@@ -1890,17 +1890,17 @@ describe('<DataGridPremium /> - 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',
         ]);
       });