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

Jump to bottom

[DataGrid] Make column grouping feature stable #11698

Merged
merged 7 commits into from
Jan 17, 2024
Merged

[DataGrid] Make column grouping feature stable #11698

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bf1c5e0
[DataGrid] Make column grouping feature stable
MBilalShafi Jan 16, 2024
a909057
Merge branch 'next' into breaking-changes/column-grouping
MBilalShafi Jan 17, 2024
61d0fa6
docs:api
MBilalShafi Jan 17, 2024
73895bf
Try to pass test
MBilalShafi Jan 17, 2024
aeb501f
Merge branch 'next' into breaking-changes/column-grouping
MBilalShafi Jan 17, 2024
ab44c9f
Remove unnecessary skipping state update condition
MBilalShafi Jan 17, 2024
1d305f9
Update migration guide
MBilalShafi Jan 17, 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
1 change: 0 additions & 1 deletion docs/data/data-grid/column-groups/BasicGroupingDemo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ export default function BasicGroupingDemo() {
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
experimentalFeatures={{ columnGrouping: true }}
rows={rows}
columns={columns}
checkboxSelection
Expand Down
1 change: 0 additions & 1 deletion docs/data/data-grid/column-groups/BasicGroupingDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ export default function BasicGroupingDemo() {
return (
<div style={{ height: 400, width: '100%' }}>
<DataGrid
experimentalFeatures={{ columnGrouping: true }}
rows={rows}
columns={columns}
checkboxSelection
Expand Down
1 change: 0 additions & 1 deletion docs/data/data-grid/column-groups/BasicGroupingDemo.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<DataGrid
experimentalFeatures={{ columnGrouping: true }}
rows={rows}
columns={columns}
checkboxSelection
Expand Down
1 change: 0 additions & 1 deletion docs/data/data-grid/column-groups/BreakingGroupDemo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ export default function BreakingGroupDemo() {
<DataGridPro
rows={rows}
columns={columns}
experimentalFeatures={{ columnGrouping: true }}
checkboxSelection
disableRowSelectionOnClick
columnGroupingModel={columnGroupingModel}
Expand Down
1 change: 0 additions & 1 deletion docs/data/data-grid/column-groups/BreakingGroupDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ export default function BreakingGroupDemo() {
<DataGridPro
rows={rows}
columns={columns}
experimentalFeatures={{ columnGrouping: true }}
checkboxSelection
disableRowSelectionOnClick
columnGroupingModel={columnGroupingModel}
Expand Down
1 change: 0 additions & 1 deletion docs/data/data-grid/column-groups/BreakingGroupDemo.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<DataGridPro
rows={rows}
columns={columns}
experimentalFeatures={{ columnGrouping: true }}
checkboxSelection
disableRowSelectionOnClick
columnGroupingModel={columnGroupingModel}
Expand Down
1 change: 0 additions & 1 deletion docs/data/data-grid/column-groups/CustomizationDemo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,6 @@ export default function CustomizationDemo() {
<DataGrid
rows={rows}
columns={columns}
experimentalFeatures={{ columnGrouping: true }}
checkboxSelection
disableRowSelectionOnClick
columnGroupingModel={columnGroupingModel}
Expand Down
1 change: 0 additions & 1 deletion docs/data/data-grid/column-groups/CustomizationDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,6 @@ export default function CustomizationDemo() {
<DataGrid
rows={rows}
columns={columns}
experimentalFeatures={{ columnGrouping: true }}
checkboxSelection
disableRowSelectionOnClick
columnGroupingModel={columnGroupingModel}
Expand Down
1 change: 0 additions & 1 deletion docs/data/data-grid/column-groups/CustomizationDemo.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<DataGrid
rows={rows}
columns={columns}
experimentalFeatures={{ columnGrouping: true }}
checkboxSelection
disableRowSelectionOnClick
columnGroupingModel={columnGroupingModel}
Expand Down
9 changes: 0 additions & 9 deletions docs/data/data-grid/column-groups/column-groups.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,6 @@

Grouping columns allows you to have a multi-level hierarchy of columns in your header.

:::warning
This feature is experimental and must be explicitly activated using the `columnGrouping` experimental feature flag:

```tsx
<DataGrid experimentalFeatures={{ columnGrouping: true }} {...otherProps} />
```

:::

## Define column groups

You can define column groups with the `columnGroupingModel` prop.
Expand Down
7 changes: 7 additions & 0 deletions docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,8 +157,15 @@ Here's the list of affected features, colDef flags and props to disable them and
```

- The type `GridPinnedColumns` has been renamed to `GridPinnedColumnFields`.

- The type `GridPinnedPosition` has been renamed to `GridPinnedColumnPosition`.

- Column grouping is now enabled by default. The flag `columnGrouping` is no longer needed to be passed to the `experimentalFeatures` prop to enable it.

- The column grouping API methods `getColumnGroupPath` and `getAllGroupDetails` are not anymore prefixed with `unstable_`.

- The column grouping selectors `gridFocusColumnGroupHeaderSelector` and `gridTabIndexColumnGroupHeaderSelector` are not anymore prefixed with `unstable_`.

<!-- ### Rows

- -->
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/x/api/data-grid/data-grid-premium.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
"experimentalFeatures": {
"type": {
"name": "shape",
"description": "{ ariaV7?: bool, columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }"
"description": "{ ariaV7?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }"
}
},
"filterDebounceMs": { "type": { "name": "number" }, "default": "150" },
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/x/api/data-grid/data-grid-pro.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
"experimentalFeatures": {
"type": {
"name": "shape",
"description": "{ ariaV7?: bool, columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }"
"description": "{ ariaV7?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }"
}
},
"filterDebounceMs": { "type": { "name": "number" }, "default": "150" },
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/x/api/data-grid/data-grid.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
"experimentalFeatures": {
"type": {
"name": "shape",
"description": "{ ariaV7?: bool, columnGrouping?: bool, warnIfFocusStateIsNotSynced?: bool }"
"description": "{ ariaV7?: bool, warnIfFocusStateIsNotSynced?: bool }"
}
},
"filterDebounceMs": { "type": { "name": "number" }, "default": "150" },
Expand Down
4 changes: 2 additions & 2 deletions docs/pages/x/api/data-grid/grid-api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,15 @@ import { GridApi } from '@mui/x-data-grid';
| <span class="prop-name">exportState</span> | <span class="prop-type">(params?: GridExportStateParams) =&gt; InitialState</span> | Generates a serializable object containing the exportable parts of the DataGrid state.<br />These values can then be passed to the `initialState` prop or injected using the `restoreState` method. |
| <span class="prop-name">forceUpdate</span> | <span class="prop-type">() =&gt; void</span> | Forces the grid to rerender. It's often used after a state update. |
| <span class="prop-name">getAllColumns</span> | <span class="prop-type">() =&gt; GridStateColDef[]</span> | Returns an array of [GridColDef](/x/api/data-grid/grid-col-def/) containing all the column definitions. |
| <span class="prop-name">getAllGroupDetails</span> | <span class="prop-type">() =&gt; GridColumnGroupLookup</span> | Returns the column group lookup. |
| <span class="prop-name">getAllRowIds</span> | <span class="prop-type">() =&gt; GridRowId[]</span> | Gets the list of row ids. |
| <span class="prop-name">getCellElement</span> | <span class="prop-type">(id: GridRowId, field: string) =&gt; HTMLDivElement \| null</span> | Gets the underlying DOM element for a cell at the given `id` and `field`. |
| <span class="prop-name">getCellMode</span> | <span class="prop-type">(id: GridRowId, field: string) =&gt; GridCellMode</span> | Gets the mode of a cell. |
| <span class="prop-name">getCellParams</span> | <span class="prop-type">&lt;R extends GridValidRowModel = any, V = unknown, F = V, N extends GridTreeNode = GridTreeNode&gt;(id: GridRowId, field: string) =&gt; GridCellParams&lt;R, V, F, N&gt;</span> | Gets the [GridCellParams](/x/api/data-grid/grid-cell-params/) object that is passed as argument in events. |
| <span class="prop-name">getCellSelectionModel [<span class="plan-premium" title="Premium plan"></span>](/x/introduction/licensing/#premium-plan)</span> | <span class="prop-type">() =&gt; GridCellSelectionModel</span> | Returns an object containing the selection state of the cells.<br />The keys of the object correpond to the row IDs.<br />The value of each key is another object whose keys are the fields and values are the selection state. |
| <span class="prop-name">getCellValue</span> | <span class="prop-type">&lt;V extends any = any&gt;(id: GridRowId, field: string) =&gt; V</span> | Gets the value of a cell at the given `id` and `field`. |
| <span class="prop-name">getColumn</span> | <span class="prop-type">(field: string) =&gt; GridStateColDef</span> | Returns the [GridColDef](/x/api/data-grid/grid-col-def/) for the given `field`. |
| <span class="prop-name">getColumnGroupPath</span> | <span class="prop-type">(field: string) =&gt; GridColumnGroup['groupId'][]</span> | Returns the id of the groups leading to the requested column.<br />The array is ordered by increasing depth (the last element is the direct parent of the column). |
| <span class="prop-name">getColumnHeaderElement</span> | <span class="prop-type">(field: string) =&gt; HTMLDivElement \| null</span> | Gets the underlying DOM element for the column header with the given `field`. |
| <span class="prop-name">getColumnHeaderParams</span> | <span class="prop-type">(field: string) =&gt; GridColumnHeaderParams</span> | Gets the GridColumnHeaderParams object that is passed as argument in events. |
| <span class="prop-name">getColumnIndex</span> | <span class="prop-type">(field: string, useVisibleColumns?: boolean) =&gt; number</span> | Returns the index position of a column. By default, only the visible columns are considered.<br />Pass `false` to `useVisibleColumns` to consider all columns. |
Expand Down Expand Up @@ -136,8 +138,6 @@ import { GridApi } from '@mui/x-data-grid';
| <span class="prop-name">toggleColumnMenu</span> | <span class="prop-type">(field: string) =&gt; void</span> | Toggles the column menu under the `field` column. |
| <span class="prop-name">toggleDetailPanel [<span class="plan-pro" title="Pro plan"></span>](/x/introduction/licensing/#pro-plan)</span> | <span class="prop-type">(id: GridRowId) =&gt; void</span> | Expands or collapses the detail panel of a row. |
| <span class="prop-name">unpinColumn [<span class="plan-pro" title="Pro plan"></span>](/x/introduction/licensing/#pro-plan)</span> | <span class="prop-type">(field: string) =&gt; void</span> | Unpins a column. |
| <span class="prop-name">unstable_getAllGroupDetails</span> | <span class="prop-type">() =&gt; GridColumnGroupLookup</span> | Returns the column group lookup. |
| <span class="prop-name">unstable_getColumnGroupPath</span> | <span class="prop-type">(field: string) =&gt; GridColumnGroup['groupId'][]</span> | Returns the id of the groups leading to the requested column.<br />The array is ordered by increasing depth (the last element is the direct parent of the column). |
| <span class="prop-name">unstable_replaceRows</span> | <span class="prop-type">(firstRowToReplace: number, newRows: GridRowModel[]) =&gt; void</span> | Replace a set of rows with new rows. |
| <span class="prop-name">unstable_setColumnVirtualization</span> | <span class="prop-type">(enabled: boolean) =&gt; void</span> | Enable/disable column virtualization. |
| <span class="prop-name">unstable_setPinnedRows [<span class="plan-pro" title="Pro plan"></span>](/x/introduction/licensing/#pro-plan)</span> | <span class="prop-type">(pinnedRows?: GridPinnedRowsProp) =&gt; void</span> | Changes the pinned rows. |
Expand Down
24 changes: 12 additions & 12 deletions docs/pages/x/api/data-grid/selectors.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,12 @@
"description": "",
"supportsApiRef": true
},
{
"name": "gridFocusColumnGroupHeaderSelector",
"returnType": "GridColumnGroupIdentifier | null",
"description": "",
"supportsApiRef": true
},
{
"name": "gridFocusColumnHeaderFilterSelector",
"returnType": "GridColumnIdentifier | null",
Expand Down Expand Up @@ -444,6 +450,12 @@
"description": "",
"supportsApiRef": true
},
{
"name": "gridTabIndexColumnGroupHeaderSelector",
"returnType": "GridColumnGroupIdentifier | null",
"description": "",
"supportsApiRef": true
},
{
"name": "gridTabIndexColumnHeaderFilterSelector",
"returnType": "GridColumnIdentifier | null",
Expand Down Expand Up @@ -527,17 +539,5 @@
"returnType": "Record<GridRowId, GridRowId>",
"description": "",
"supportsApiRef": true
},
{
"name": "unstable_gridFocusColumnGroupHeaderSelector",
"returnType": "GridColumnGroupIdentifier | null",
"description": "",
"supportsApiRef": true
},
{
"name": "unstable_gridTabIndexColumnGroupHeaderSelector",
"returnType": "GridColumnGroupIdentifier | null",
"description": "",
"supportsApiRef": true
}
]
1 change: 0 additions & 1 deletion packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,7 +321,6 @@ DataGridPremiumRaw.propTypes = {
*/
experimentalFeatures: PropTypes.shape({
ariaV7: PropTypes.bool,
columnGrouping: PropTypes.bool,
lazyLoading: PropTypes.bool,
warnIfFocusStateIsNotSynced: PropTypes.bool,
}),
Expand Down
4 changes: 2 additions & 2 deletions packages/grid/x-data-grid-premium/src/hooks/features/export/serializer/excelSerializer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -403,15 +403,15 @@ export async function buildExcel(

if (includeColumnGroupsHeaders) {
const columnGroupPaths = columns.reduce<Record<string, string[]>>((acc, column) => {
acc[column.field] = api.unstable_getColumnGroupPath(column.field);
acc[column.field] = api.getColumnGroupPath(column.field);
return acc;
}, {});

addColumnGroupingHeaders(
worksheet,
serializedColumns,
columnGroupPaths,
api.unstable_getAllGroupDetails(),
api.getAllGroupDetails(),
);
}

Expand Down
Loading
Loading