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 index 846aba5dcfa53..b3f547b404f6b 100644 --- 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 index e3249649030a6..bceb608d7ee73 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 @@ -1616,7 +1616,7 @@ describe(' - 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( - 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 index e3e3e969ac0f6..a180b5a6d6e6f 100644 --- 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, +) => { + 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 index 6332658a0f97b..301ec615e32ce 100644 --- 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( - (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 index f31cdad2f9b54..b5737afbb5f93 100644 --- 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,