Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
+36 −14
Draft

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a63885d
update test
cherniavskii Dec 27, 2024
799faa8
extract getValue function
cherniavskii Dec 27, 2024
f7bee11
use valueGetter for grouping keys
cherniavskii Dec 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
getRowGroupingCriteriaFromGroupingField,
isGroupingColumn,
GridStrategyGroup,
getRowValue,
} from '@mui/x-data-grid-pro/internals';
import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
import {
Expand Down Expand Up @@ -230,7 +231,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;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When the row grouping is initially enabled, the public methods aren't yet assigned to apiRef.
I extracted the getRowValue method to a function so I can still call it here.
This doesn't change the fact that the apiRef passed to valueGetter won't have public methods assigned yet.

This makes me think that we should assign the methods (at least some of them) before initialization 🤔

mui-x/packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx

Line 165 in 2799763

useGridParamsApi(apiRef, props);

WDYT?

}

return {
Expand Down
12 changes: 10 additions & 2 deletions packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1605,7 +1605,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', () => {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It turned out that the current behavior was intentional.
I disagree with this, but maybe I don't see the full picture.
I know it's been 3 years 😅, but still – @flaviendelangle if you remember any additional details about this decision – please let me know 🙂

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We discussed it some time ago with @michelengelen and the problem is that I don't remember the reason why we did that 😆
But I remember we did it on purpose (maybe a bad one though).

render(
<Test
columns={[
Expand All @@ -1621,7 +1621,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']);
});

Expand Down
17 changes: 17 additions & 0 deletions packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from 'react';
import {
GridAutoGeneratedGroupNode,
GridAutoGeneratedPinnedRowNode,
GridColDef,
GridFooterNode,
GridGroupNode,
GridRowId,
Expand All @@ -11,6 +12,7 @@ import {
GridRowTreeConfig,
GridSkeletonRowNode,
GridTreeNode,
GridValidRowModel,
} from '../../../models';
import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
import { GridApiCommunity, GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
Expand Down Expand Up @@ -74,6 +76,21 @@ export const getRowIdFromRowModel = (
return id;
};

export const getRowValue = (
row: GridValidRowModel,
colDef: GridColDef,
apiRef: React.MutableRefObject<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,
Expand Down
12 changes: 2 additions & 10 deletions packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
import { gridListColumnSelector } from '../listView/gridListViewSelectors';
import { getRowValue as getRowValueFn } from './gridRowsUtils';

export class MissingRowIdError extends Error {}

Expand Down Expand Up @@ -118,16 +119,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],
);

Expand Down
6 changes: 5 additions & 1 deletion packages/x-data-grid/src/internals/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,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,
Expand Down
Loading