[DataGridPremium] Fix group column ignoring valueOptions for `singl…

…eSelect` column type (@arminmeh) (#15754) Co-authored-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>
mui · Dec 5, 2024 · dcd0330 · dcd0330
1 parent 6a5303a
commit dcd0330
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
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
@@ -7,6 +7,7 @@ import {
   GridGroupingColDefOverride,
   GridGroupNode,
   GridTreeNodeWithRender,
+  GridValueFormatter,
 } from '@mui/x-data-grid-pro';
 import { GridColumnRawLookup, isSingleSelectColDef } from '@mui/x-data-grid-pro/internals';
 import { GridApiPremium } from '../../../models/gridApiPremium';
@@ -94,10 +95,19 @@ const getLeafProperties = (leafColDef: GridColDef): Partial<GridColDef> => ({
   },
 });
 
+const groupedByColValueFormatter: (
+  groupedByColDef: GridColDef,
+) => GridValueFormatter<any, any, any, never> =
+  (groupedByColDef: GridColDef) => (value, row, _, apiRef) =>
+    groupedByColDef.valueFormatter!(value, row, groupedByColDef, apiRef);
+
 const getGroupingCriteriaProperties = (groupedByColDef: GridColDef, applyHeaderName: boolean) => {
   const properties: Partial<GridColDef> = {
     sortable: groupedByColDef.sortable,
     filterable: groupedByColDef.filterable,
+    valueFormatter: groupedByColDef.valueFormatter
+      ? groupedByColValueFormatter(groupedByColDef)
+      : undefined,
     valueOptions: isSingleSelectColDef(groupedByColDef) ? groupedByColDef.valueOptions : undefined,
     sortComparator: (v1, v2, cellParams1, cellParams2) => {
       // We only want to sort the groups of the current grouping criteria

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
@@ -169,6 +169,32 @@ describe('<DataGridPremium /> - Row grouping', () => {
       expect(getColumnValues(0)).to.deep.equal(['Cat A (3)', '', '', '', 'Cat B (2)', '', '']);
     });
 
+    it('should display the value from the `valueOptions` for `singleSelect` column type', () => {
+      render(
+        <Test
+          columns={[
+            {
+              field: 'category',
+              type: 'singleSelect',
+              valueOptions: [
+                { value: 'category1', label: 'categoryLabel1' },
+                { value: 'category2', label: 'categoryLabel2' },
+              ],
+            },
+          ]}
+          rows={[
+            { id: 1, category: 'category1' },
+            { id: 2, category: 'category1' },
+            { id: 3, category: 'category1' },
+            { id: 4, category: 'category2' },
+            { id: 5, category: 'category2' },
+          ]}
+          initialState={{ rowGrouping: { model: ['category'] } }}
+        />,
+      );
+      expect(getColumnValues(0)).to.deep.equal(['categoryLabel1 (3)', 'categoryLabel2 (2)']);
+    });
+
     it('should display icon on auto-generated row', () => {
       render(
         <Test