[DataGridPremium] Use valueGetter to get row group keys (#16016)

mui · Feb 20, 2025 · 4acc7e2 · 4acc7e2
1 parent 346e024
commit 4acc7e2
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 14 deletions.
diff --git a/packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts b/packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts
@@ -19,6 +19,7 @@ import {
   getRowGroupingCriteriaFromGroupingField,
   isGroupingColumn,
   GridStrategyGroup,
+  getRowValue,
 } from '@mui/x-data-grid-pro/internals';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import {
@@ -231,7 +232,7 @@ export const getCellGroupingCriteria = ({
   if (groupingRule.groupingValueGetter) {
     key = groupingRule.groupingValueGetter(row[groupingRule.field] as never, row, colDef, apiRef);
   } else {
-    key = row[groupingRule.field] as GridKeyValue | null | undefined;
+    key = getRowValue(row, colDef, apiRef) as GridKeyValue | null | undefined;
   }
 
   return {

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
@@ -1616,7 +1616,7 @@ describe('<DataGridPremium /> - Row grouping', () => {
       expect(getColumnValues(1)).to.deep.equal(['', '0', '3', '', '1', '4', '', '2']);
     });
 
-    it('should not use valueGetter to group the rows when defined', () => {
+    it('should use valueGetter to group the rows when defined', () => {
       render(
         <Test
           columns={[
@@ -1632,7 +1632,15 @@ describe('<DataGridPremium /> - Row grouping', () => {
           defaultGroupingExpansionDepth={-1}
         />,
       );
-      expect(getColumnValues(0)).to.deep.equal(['Cat A (3)', '', '', '', 'Cat B (2)', '', '']);
+      expect(getColumnValues(0)).to.deep.equal([
+        'value Cat A (3)',
+        '',
+        '',
+        '',
+        'value Cat B (2)',
+        '',
+        '',
+      ]);
       expect(getColumnValues(1)).to.deep.equal(['', '0', '1', '2', '', '3', '4']);
     });
 

diff --git a/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts b/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts
@@ -2,6 +2,7 @@ import { RefObject } from '@mui/x-internals/types';
 import {
   GridAutoGeneratedGroupNode,
   GridAutoGeneratedPinnedRowNode,
+  GridColDef,
   GridFooterNode,
   GridGroupNode,
   GridRowId,
@@ -11,6 +12,7 @@ import {
   GridRowTreeConfig,
   GridSkeletonRowNode,
   GridTreeNode,
+  GridValidRowModel,
 } from '../../../models';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridApiCommunity, GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
@@ -74,6 +76,21 @@ export const getRowIdFromRowModel = (
   return id;
 };
 
+export const getRowValue = (
+  row: GridValidRowModel,
+  colDef: GridColDef,
+  apiRef: RefObject<GridApiCommunity>,
+) => {
+  const field = colDef.field;
+
+  if (!colDef || !colDef.valueGetter) {
+    return row[field];
+  }
+
+  const value = row[colDef.field];
+  return colDef.valueGetter(value as never, row, colDef, apiRef);
+};
+
 export const createRowsInternalCache = ({
   rows,
   getRowId,

diff --git a/packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts b/packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts
@@ -14,6 +14,7 @@ import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFo
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { gridListColumnSelector } from '../listView/gridListViewSelectors';
 import { gridRowNodeSelector } from './gridRowsSelector';
+import { getRowValue as getRowValueFn } from './gridRowsUtils';
 
 export class MissingRowIdError extends Error {}
 
@@ -132,16 +133,7 @@ export function useGridParamsApi(
   );
 
   const getRowValue = React.useCallback<GridParamsApi['getRowValue']>(
-    (row, colDef) => {
-      const field = colDef.field;
-
-      if (!colDef || !colDef.valueGetter) {
-        return row[field];
-      }
-
-      const value = row[colDef.field];
-      return colDef.valueGetter(value as never, row, colDef, apiRef);
-    },
+    (row, colDef) => getRowValueFn(row, colDef, apiRef),
     [apiRef],
   );
 

diff --git a/packages/x-data-grid/src/internals/index.ts b/packages/x-data-grid/src/internals/index.ts
@@ -109,7 +109,11 @@ export type {
 export { getTreeNodeDescendants, buildRootGroup } from '../hooks/features/rows/gridRowsUtils';
 export { useGridRowsMeta, rowsMetaStateInitializer } from '../hooks/features/rows/useGridRowsMeta';
 export { useGridParamsApi } from '../hooks/features/rows/useGridParamsApi';
-export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED } from '../hooks/features/rows/gridRowsUtils';
+export {
+  getRowIdFromRowModel,
+  GRID_ID_AUTOGENERATED,
+  getRowValue,
+} from '../hooks/features/rows/gridRowsUtils';
 export {
   gridAdditionalRowGroupsSelector,
   gridPinnedRowsSelector,