Skip to content

Commit 34419c2

Browse files
arminmeharminmeh
authored
[docs] Keep groupingColDef reference stable in the grid demos (#17549)
1 parent 24f630c commit 34419c2

33 files changed

+214
-133
lines changed

‎docs/data/data-grid/aggregation/AggregationTreeData.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,11 @@ const getTreeDataPath = (row) => row.hierarchy;
127127

128128
const getRowId = (row) => row.hierarchy.join('/');
129129

130+
const groupingColDef = {
131+
headerName: 'Files',
132+
width: 350,
133+
};
134+
130135
export default function AggregationTreeData() {
131136
return (
132137
<div style={{ height: 400, width: '100%' }}>
@@ -136,7 +141,7 @@ export default function AggregationTreeData() {
136141
columns={columns}
137142
getTreeDataPath={getTreeDataPath}
138143
getRowId={getRowId}
139-
groupingColDef={{ headerName: 'Files', width: 350 }}
144+
groupingColDef={groupingColDef}
140145
initialState={{
141146
aggregation: {
142147
model: {

‎docs/data/data-grid/aggregation/AggregationTreeData.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
GridColDef,
55
GridRowsProp,
66
DataGridPremiumProps,
7+
GridGroupingColDefOverride,
78
} from '@mui/x-data-grid-premium';
89

910
interface File {
@@ -140,6 +141,11 @@ const getTreeDataPath: DataGridPremiumProps<File>['getTreeDataPath'] = (row) =>
140141
const getRowId: DataGridPremiumProps<File>['getRowId'] = (row) =>
141142
row.hierarchy.join('/');
142143

144+
const groupingColDef: GridGroupingColDefOverride<File> = {
145+
headerName: 'Files',
146+
width: 350,
147+
};
148+
143149
export default function AggregationTreeData() {
144150
return (
145151
<div style={{ height: 400, width: '100%' }}>
@@ -149,7 +155,7 @@ export default function AggregationTreeData() {
149155
columns={columns}
150156
getTreeDataPath={getTreeDataPath}
151157
getRowId={getRowId}
152-
groupingColDef={{ headerName: 'Files', width: 350 }}
158+
groupingColDef={groupingColDef}
153159
initialState={{
154160
aggregation: {
155161
model: {

‎docs/data/data-grid/aggregation/AggregationTreeData.tsx.preview

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
columns={columns}
55
getTreeDataPath={getTreeDataPath}
66
getRowId={getRowId}
7-
groupingColDef={{ headerName: 'Files', width: 350 }}
7+
groupingColDef={groupingColDef}
88
initialState={{
99
aggregation: {
1010
model: {

‎docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import {
66
} from '@mui/x-data-grid-premium';
77
import { useMovieData } from '@mui/x-data-grid-generator';
88

9+
const groupingColDef = {
10+
width: 250,
11+
};
12+
913
export default function ColumnAutosizingGroupedRows() {
1014
const data = useMovieData();
1115
const apiRef = useGridApiRef();
@@ -34,7 +38,7 @@ export default function ColumnAutosizingGroupedRows() {
3438
columns={columns}
3539
apiRef={apiRef}
3640
initialState={initialState}
37-
groupingColDef={{ width: 250 }}
41+
groupingColDef={groupingColDef}
3842
/>
3943
</div>
4044
);

‎docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,15 @@ import {
33
DataGridPremium,
44
useGridApiRef,
55
useKeepGroupedColumnsHidden,
6+
GridGroupingColDefOverride,
7+
GridValidRowModel,
68
} from '@mui/x-data-grid-premium';
79
import { useMovieData } from '@mui/x-data-grid-generator';
810

11+
const groupingColDef: GridGroupingColDefOverride<GridValidRowModel> = {
12+
width: 250,
13+
};
14+
915
export default function ColumnAutosizingGroupedRows() {
1016
const data = useMovieData();
1117
const apiRef = useGridApiRef();
@@ -34,7 +40,7 @@ export default function ColumnAutosizingGroupedRows() {
3440
columns={columns}
3541
apiRef={apiRef}
3642
initialState={initialState}
37-
groupingColDef={{ width: 250 }}
43+
groupingColDef={groupingColDef}
3844
/>
3945
</div>
4046
);

‎docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx.preview

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
columns={columns}
44
apiRef={apiRef}
55
initialState={initialState}
6-
groupingColDef={{ width: 250 }}
6+
groupingColDef={groupingColDef}
77
/>

‎docs/data/data-grid/column-menu/ColumnMenuGridPremium.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import {
66
} from '@mui/x-data-grid-premium';
77
import { useMovieData } from '@mui/x-data-grid-generator';
88

9+
const groupingColDef = {
10+
leafField: 'title',
11+
};
12+
913
export default function ColumnMenuGridPremium() {
1014
const apiRef = useGridApiRef();
1115
const data = useMovieData();
@@ -35,9 +39,7 @@ export default function ColumnMenuGridPremium() {
3539
<DataGridPremium
3640
{...data}
3741
apiRef={apiRef}
38-
groupingColDef={{
39-
leafField: 'title',
40-
}}
42+
groupingColDef={groupingColDef}
4143
initialState={initialState}
4244
/>
4345
</div>

‎docs/data/data-grid/column-menu/ColumnMenuGridPremium.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import * as React from 'react';
22
import {
33
DataGridPremium,
4+
GridGroupingColDefOverride,
5+
GridValidRowModel,
46
useGridApiRef,
57
useKeepGroupedColumnsHidden,
68
} from '@mui/x-data-grid-premium';
79
import { useMovieData } from '@mui/x-data-grid-generator';
810

11+
const groupingColDef: GridGroupingColDefOverride<GridValidRowModel> = {
12+
leafField: 'title',
13+
};
14+
915
export default function ColumnMenuGridPremium() {
1016
const apiRef = useGridApiRef();
1117
const data = useMovieData();
@@ -35,9 +41,7 @@ export default function ColumnMenuGridPremium() {
3541
<DataGridPremium
3642
{...data}
3743
apiRef={apiRef}
38-
groupingColDef={{
39-
leafField: 'title',
40-
}}
44+
groupingColDef={groupingColDef}
4145
initialState={initialState}
4246
/>
4347
</div>

‎docs/data/data-grid/column-menu/ColumnMenuGridPremium.tsx.preview

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
<DataGridPremium
22
{...data}
33
apiRef={apiRef}
4-
groupingColDef={{
5-
leafField: 'title',
6-
}}
4+
groupingColDef={groupingColDef}
75
initialState={initialState}
86
/>

‎docs/data/data-grid/column-menu/ColumnMenuGridPremiumSnap.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import {
66
} from '@mui/x-data-grid-premium';
77
import { useMovieData } from '@mui/x-data-grid-generator';
88

9+
const groupingColDef = {
10+
leafField: 'title',
11+
};
12+
913
// This demo is used in visual regression tests to spot regressions in the column menu
1014
export default function ColumnMenuGridPremiumSnap() {
1115
const apiRef = useGridApiRef();
@@ -44,7 +48,7 @@ export default function ColumnMenuGridPremiumSnap() {
4448
<DataGridPremium
4549
{...data}
4650
apiRef={apiRef}
47-
groupingColDef={{ leafField: 'title' }}
51+
groupingColDef={groupingColDef}
4852
initialState={initialState}
4953
/>
5054
</div>

‎docs/data/data-grid/column-menu/ColumnMenuGridPremiumSnap.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import * as React from 'react';
22
import {
33
DataGridPremium,
4+
GridGroupingColDefOverride,
5+
GridValidRowModel,
46
useGridApiRef,
57
useKeepGroupedColumnsHidden,
68
} from '@mui/x-data-grid-premium';
79
import { useMovieData } from '@mui/x-data-grid-generator';
810

11+
const groupingColDef: GridGroupingColDefOverride<GridValidRowModel> = {
12+
leafField: 'title',
13+
};
14+
915
// This demo is used in visual regression tests to spot regressions in the column menu
1016
export default function ColumnMenuGridPremiumSnap() {
1117
const apiRef = useGridApiRef();
@@ -44,7 +50,7 @@ export default function ColumnMenuGridPremiumSnap() {
4450
<DataGridPremium
4551
{...data}
4652
apiRef={apiRef}
47-
groupingColDef={{ leafField: 'title' }}
53+
groupingColDef={groupingColDef}
4854
initialState={initialState}
4955
/>
5056
</div>

‎docs/data/data-grid/column-menu/ColumnMenuGridPremiumSnap.tsx.preview

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<DataGridPremium
22
{...data}
33
apiRef={apiRef}
4-
groupingColDef={{ leafField: 'title' }}
4+
groupingColDef={groupingColDef}
55
initialState={initialState}
66
/>

‎docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.js

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,32 @@ export default function RowGroupingCustomGroupingColDefCallback() {
2525

2626
const rowGroupingModelStr = rowGroupingModel.join('-');
2727

28+
const groupingColDef = React.useCallback(
29+
(params) => {
30+
const override = {};
31+
if (params.fields.includes('director')) {
32+
return {
33+
headerName: 'Director',
34+
valueFormatter: (_, row) => {
35+
const rowId = apiRef.current?.getRowId(row);
36+
if (!rowId) {
37+
return undefined;
38+
}
39+
40+
const rowNode = apiRef.current?.getRowNode(rowId);
41+
if (rowNode?.type === 'group' && rowNode?.groupingField === 'director') {
42+
return `by ${rowNode.groupingKey ?? ''}`;
43+
}
44+
return undefined;
45+
},
46+
};
47+
}
48+
49+
return override;
50+
},
51+
[apiRef],
52+
);
53+
2854
return (
2955
<div style={{ width: '100%' }}>
3056
<Stack
@@ -53,27 +79,7 @@ export default function RowGroupingCustomGroupingColDefCallback() {
5379
disableRowSelectionOnClick
5480
rowGroupingModel={rowGroupingModel}
5581
initialState={initialState}
56-
groupingColDef={(params) => {
57-
const override = {};
58-
if (params.fields.includes('director')) {
59-
return {
60-
headerName: 'Director',
61-
valueFormatter: (value, row) => {
62-
const rowId = apiRef.current.getRowId(row);
63-
const rowNode = apiRef.current.getRowNode(rowId);
64-
if (
65-
rowNode?.type === 'group' &&
66-
rowNode?.groupingField === 'director'
67-
) {
68-
return `by ${rowNode.groupingKey ?? ''}`;
69-
}
70-
return undefined;
71-
},
72-
};
73-
}
74-
75-
return override;
76-
}}
82+
groupingColDef={groupingColDef}
7783
/>
7884
</Box>
7985
</div>

‎docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefCallback.tsx

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import * as React from 'react';
22
import {
33
DataGridPremium,
4-
GridGroupingColDefOverride,
4+
GridGroupingColDefOverrideParams,
5+
GridRowModel,
56
useGridApiRef,
67
useKeepGroupedColumnsHidden,
78
} from '@mui/x-data-grid-premium';
@@ -26,6 +27,32 @@ export default function RowGroupingCustomGroupingColDefCallback() {
2627

2728
const rowGroupingModelStr = rowGroupingModel.join('-');
2829

30+
const groupingColDef = React.useCallback(
31+
(params: GridGroupingColDefOverrideParams) => {
32+
const override = {};
33+
if (params.fields.includes('director')) {
34+
return {
35+
headerName: 'Director',
36+
valueFormatter: (_: unknown, row: GridRowModel) => {
37+
const rowId = apiRef.current?.getRowId(row);
38+
if (!rowId) {
39+
return undefined;
40+
}
41+
42+
const rowNode = apiRef.current?.getRowNode(rowId);
43+
if (rowNode?.type === 'group' && rowNode?.groupingField === 'director') {
44+
return `by ${rowNode.groupingKey ?? ''}`;
45+
}
46+
return undefined;
47+
},
48+
};
49+
}
50+
51+
return override;
52+
},
53+
[apiRef],
54+
);
55+
2956
return (
3057
<div style={{ width: '100%' }}>
3158
<Stack
@@ -54,27 +81,7 @@ export default function RowGroupingCustomGroupingColDefCallback() {
5481
disableRowSelectionOnClick
5582
rowGroupingModel={rowGroupingModel}
5683
initialState={initialState}
57-
groupingColDef={(params) => {
58-
const override: GridGroupingColDefOverride = {};
59-
if (params.fields.includes('director')) {
60-
return {
61-
headerName: 'Director',
62-
valueFormatter: (value, row) => {
63-
const rowId = apiRef.current.getRowId(row);
64-
const rowNode = apiRef.current.getRowNode(rowId);
65-
if (
66-
rowNode?.type === 'group' &&
67-
rowNode?.groupingField === 'director'
68-
) {
69-
return `by ${rowNode.groupingKey ?? ''}`;
70-
}
71-
return undefined;
72-
},
73-
};
74-
}
75-
76-
return override;
77-
}}
84+
groupingColDef={groupingColDef}
7885
/>
7986
</Box>
8087
</div>

‎docs/data/data-grid/row-grouping/RowGroupingCustomGroupingColDefObject.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import {
66
} from '@mui/x-data-grid-premium';
77
import { useMovieData } from '@mui/x-data-grid-generator';
88

9+
const groupingColDef = {
10+
headerName: 'Group',
11+
};
12+
913
export default function RowGroupingCustomGroupingColDefObject() {
1014
const data = useMovieData();
1115
const apiRef = useGridApiRef();
@@ -26,9 +30,7 @@ export default function RowGroupingCustomGroupingColDefObject() {
2630
apiRef={apiRef}
2731
disableRowSelectionOnClick
2832
initialState={initialState}
29-
groupingColDef={{
30-
headerName: 'Group',
31-
}}
33+
groupingColDef={groupingColDef}
3234
/>
3335
</div>
3436
);

0 commit comments

Comments
 (0)