diff --git a/docs/data/data-grid/row-spanning/RowSpanning.js b/docs/data/data-grid/row-spanning/RowSpanning.js index 109566ed7227..58cd4d1223b0 100644 --- a/docs/data/data-grid/row-spanning/RowSpanning.js +++ b/docs/data/data-grid/row-spanning/RowSpanning.js @@ -23,7 +23,7 @@ export default function RowSpanning() { showCellVerticalBorder showColumnVerticalBorder disableRowSelectionOnClick - unstable_rowSpanning={enabled} + rowSpanning={enabled} hideFooter sx={{ '& .MuiDataGrid-row:hover': { diff --git a/docs/data/data-grid/row-spanning/RowSpanning.tsx b/docs/data/data-grid/row-spanning/RowSpanning.tsx index f9ac1d620446..d871d83e2122 100644 --- a/docs/data/data-grid/row-spanning/RowSpanning.tsx +++ b/docs/data/data-grid/row-spanning/RowSpanning.tsx @@ -23,7 +23,7 @@ export default function RowSpanning() { showCellVerticalBorder showColumnVerticalBorder disableRowSelectionOnClick - unstable_rowSpanning={enabled} + rowSpanning={enabled} hideFooter sx={{ '& .MuiDataGrid-row:hover': { diff --git a/docs/data/data-grid/row-spanning/RowSpanningCalendar.js b/docs/data/data-grid/row-spanning/RowSpanningCalendar.js index fa234baca5fe..dc7bd1b0a3ab 100644 --- a/docs/data/data-grid/row-spanning/RowSpanningCalendar.js +++ b/docs/data/data-grid/row-spanning/RowSpanningCalendar.js @@ -137,7 +137,7 @@ export default function RowSpanningCalendar() { Span cells across several rows.

-:::warning -This feature is marked as **unstable**. While you can use this feature in production, the API could change in the future. -::: - By default, each cell in a Data Grid takes up the height of one row. The row spanning feature makes it possible for a cell to fill multiple rows in a single column. -To enable, pass the `unstable_rowSpanning` prop to the Data Grid. +To enable, pass the `rowSpanning` prop to the Data Grid. The Data Grid will automatically merge consecutive cells with repeating values in the same column, as shown in the demo below—switch off the toggle button to see the actual rows: {{"demo": "RowSpanning.js", "bg": "inline", "defaultCodeOpen": false}} diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md index 797aa52a09dc..55cf6c15cc35 100644 --- a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md +++ b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md @@ -1,4 +1,5 @@ --- +title: React Data Grid - Migration from v7 to v8 productId: x-data-grid --- @@ -54,6 +55,15 @@ Below are described the steps you need to make to migrate from v7 to v8. +const rowId = apiRef.current.getRowId(rowsLookup[id]); ``` +- The feature row spanning is now stable. + + ```diff + + ``` + ### Localization - If `estimatedRowCount` is used, the text provided to the [Table Pagination](/material-ui/api/table-pagination/) component from the Material UI library is updated and requires additional translations. Check the example at the end of [Index-based pagination section](/x/react-data-grid/pagination/#index-based-pagination). diff --git a/docs/data/pages.ts b/docs/data/pages.ts index ffd848c5fa46..1e7a23dee23c 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -62,7 +62,7 @@ const pages: MuiPage[] = [ { pathname: '/x/react-data-grid/row-definition' }, { pathname: '/x/react-data-grid/row-updates' }, { pathname: '/x/react-data-grid/row-height' }, - { pathname: '/x/react-data-grid/row-spanning', unstable: true }, + { pathname: '/x/react-data-grid/row-spanning', newFeature: true }, { pathname: '/x/react-data-grid/master-detail', plan: 'pro' }, { pathname: '/x/react-data-grid/row-ordering', plan: 'pro' }, { pathname: '/x/react-data-grid/row-pinning', plan: 'pro' }, diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index 28340d8b821b..633838afd551 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -605,6 +605,7 @@ "type": { "name": "enum", "description": "'border'
| 'margin'" }, "default": "\"margin\"" }, + "rowSpanning": { "type": { "name": "bool" }, "default": "false" }, "scrollbarSize": { "type": { "name": "number" } }, "scrollEndThreshold": { "type": { "name": "number" }, "default": "80" }, "showCellVerticalBorder": { "type": { "name": "bool" }, "default": "false" }, @@ -647,7 +648,6 @@ } }, "unstable_listView": { "type": { "name": "bool" } }, - "unstable_rowSpanning": { "type": { "name": "bool" }, "default": "false" }, "virtualizeColumnsWithAutoRowHeight": { "type": { "name": "bool" }, "default": "false" } }, "name": "DataGridPremium", diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index 493cf5bb77b8..1dd61eee2593 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -543,6 +543,7 @@ "type": { "name": "enum", "description": "'border'
| 'margin'" }, "default": "\"margin\"" }, + "rowSpanning": { "type": { "name": "bool" }, "default": "false" }, "scrollbarSize": { "type": { "name": "number" } }, "scrollEndThreshold": { "type": { "name": "number" }, "default": "80" }, "showCellVerticalBorder": { "type": { "name": "bool" }, "default": "false" }, @@ -581,7 +582,6 @@ } }, "unstable_listView": { "type": { "name": "bool" } }, - "unstable_rowSpanning": { "type": { "name": "bool" }, "default": "false" }, "virtualizeColumnsWithAutoRowHeight": { "type": { "name": "bool" }, "default": "false" } }, "name": "DataGridPro", diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index b49e98c418d5..d0cd9370ee9b 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -450,6 +450,7 @@ "type": { "name": "enum", "description": "'border'
| 'margin'" }, "default": "\"margin\"" }, + "rowSpanning": { "type": { "name": "bool" }, "default": "false" }, "scrollbarSize": { "type": { "name": "number" } }, "showCellVerticalBorder": { "type": { "name": "bool" }, "default": "false" }, "showColumnVerticalBorder": { "type": { "name": "bool" }, "default": "false" }, @@ -476,7 +477,6 @@ }, "additionalInfo": { "sx": true } }, - "unstable_rowSpanning": { "type": { "name": "bool" }, "default": "false" }, "virtualizeColumnsWithAutoRowHeight": { "type": { "name": "bool" }, "default": "false" } }, "name": "DataGrid", diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json index 6b60cf223831..c9295072500c 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json @@ -621,6 +621,9 @@ "rowSpacingType": { "description": "Sets the type of space between rows added by getRowSpacing." }, + "rowSpanning": { + "description": "If true, the Data Grid will auto span the cells over the rows having the same value." + }, "scrollbarSize": { "description": "Override the height/width of the Data Grid inner scrollbar." }, @@ -667,9 +670,6 @@ "unstable_listView": { "description": "If true, displays the data in a list view. Use in combination with unstable_listColumn." }, - "unstable_rowSpanning": { - "description": "If true, the Data Grid will auto span the cells over the rows having the same value." - }, "virtualizeColumnsWithAutoRowHeight": { "description": "If true, the Data Grid enables column virtualization when getRowHeight is set to () => 'auto'. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally." } diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json index 919e5af16274..23d8ffe2fce3 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json @@ -563,6 +563,9 @@ "rowSpacingType": { "description": "Sets the type of space between rows added by getRowSpacing." }, + "rowSpanning": { + "description": "If true, the Data Grid will auto span the cells over the rows having the same value." + }, "scrollbarSize": { "description": "Override the height/width of the Data Grid inner scrollbar." }, @@ -605,9 +608,6 @@ "unstable_listView": { "description": "If true, displays the data in a list view. Use in combination with unstable_listColumn." }, - "unstable_rowSpanning": { - "description": "If true, the Data Grid will auto span the cells over the rows having the same value." - }, "virtualizeColumnsWithAutoRowHeight": { "description": "If true, the Data Grid enables column virtualization when getRowHeight is set to () => 'auto'. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally." } diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json index 75a799c6fed5..75fbd4a454b9 100644 --- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json @@ -458,6 +458,9 @@ "rowSpacingType": { "description": "Sets the type of space between rows added by getRowSpacing." }, + "rowSpanning": { + "description": "If true, the Data Grid will auto span the cells over the rows having the same value." + }, "scrollbarSize": { "description": "Override the height/width of the Data Grid inner scrollbar." }, @@ -479,9 +482,6 @@ "sx": { "description": "The system prop that allows defining system overrides as well as additional CSS styles." }, - "unstable_rowSpanning": { - "description": "If true, the Data Grid will auto span the cells over the rows having the same value." - }, "virtualizeColumnsWithAutoRowHeight": { "description": "If true, the Data Grid enables column virtualization when getRowHeight is set to () => 'auto'. By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. For datasets with a large number of columns, this can cause performance issues. The downside of enabling this prop is that the row height will be estimated based the cells that are currently rendered, which can cause row height change when scrolling horizontally." } diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index 99f896078842..aa6044260b24 100644 --- a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -1004,6 +1004,11 @@ DataGridPremiumRaw.propTypes = { * @default "margin" */ rowSpacingType: PropTypes.oneOf(['border', 'margin']), + /** + * If `true`, the Data Grid will auto span the cells over the rows having the same value. + * @default false + */ + rowSpanning: PropTypes.bool, /** * Override the height/width of the Data Grid inner scrollbar. */ @@ -1118,11 +1123,6 @@ DataGridPremiumRaw.propTypes = { */ unstable_listView: PropTypes.bool, unstable_onDataSourceError: PropTypes.func, - /** - * If `true`, the Data Grid will auto span the cells over the rows having the same value. - * @default false - */ - unstable_rowSpanning: PropTypes.bool, /** * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`. * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. diff --git a/packages/x-data-grid-premium/src/tests/rowSpanning.DataGridPremium.test.tsx b/packages/x-data-grid-premium/src/tests/rowSpanning.DataGridPremium.test.tsx index 13b9eb840946..61d9685b72c1 100644 --- a/packages/x-data-grid-premium/src/tests/rowSpanning.DataGridPremium.test.tsx +++ b/packages/x-data-grid-premium/src/tests/rowSpanning.DataGridPremium.test.tsx @@ -9,7 +9,7 @@ describe(' - Row spanning', () => { const { render } = createRenderer(); const baselineProps: DataGridPremiumProps = { - unstable_rowSpanning: true, + rowSpanning: true, columns: [ { field: 'code', diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index 364903b9205d..e8d57f00d5c7 100644 --- a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -911,6 +911,11 @@ DataGridProRaw.propTypes = { * @default "margin" */ rowSpacingType: PropTypes.oneOf(['border', 'margin']), + /** + * If `true`, the Data Grid will auto span the cells over the rows having the same value. + * @default false + */ + rowSpanning: PropTypes.bool, /** * Override the height/width of the Data Grid inner scrollbar. */ @@ -1018,11 +1023,6 @@ DataGridProRaw.propTypes = { */ unstable_listView: PropTypes.bool, unstable_onDataSourceError: PropTypes.func, - /** - * If `true`, the Data Grid will auto span the cells over the rows having the same value. - * @default false - */ - unstable_rowSpanning: PropTypes.bool, /** * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`. * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. diff --git a/packages/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/x-data-grid/src/DataGrid/DataGrid.tsx index cd083cbf0904..0f6d3ebc3b95 100644 --- a/packages/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/x-data-grid/src/DataGrid/DataGrid.tsx @@ -749,6 +749,11 @@ DataGridRaw.propTypes = { * @default "margin" */ rowSpacingType: PropTypes.oneOf(['border', 'margin']), + /** + * If `true`, the Data Grid will auto span the cells over the rows having the same value. + * @default false + */ + rowSpanning: PropTypes.bool, /** * Override the height/width of the Data Grid inner scrollbar. */ @@ -800,11 +805,6 @@ DataGridRaw.propTypes = { PropTypes.func, PropTypes.object, ]), - /** - * If `true`, the Data Grid will auto span the cells over the rows having the same value. - * @default false - */ - unstable_rowSpanning: PropTypes.bool, /** * If `true`, the Data Grid enables column virtualization when `getRowHeight` is set to `() => 'auto'`. * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. diff --git a/packages/x-data-grid/src/constants/dataGridPropsDefaultValues.ts b/packages/x-data-grid/src/constants/dataGridPropsDefaultValues.ts index b890eaf63dc0..df9cfed47780 100644 --- a/packages/x-data-grid/src/constants/dataGridPropsDefaultValues.ts +++ b/packages/x-data-grid/src/constants/dataGridPropsDefaultValues.ts @@ -50,11 +50,11 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = { rows: [], rowSelection: true, rowSpacingType: 'margin', + rowSpanning: false, showCellVerticalBorder: false, showColumnVerticalBorder: false, sortingMode: 'client', sortingOrder: ['asc' as const, 'desc' as const, null], throttleRowsMs: 0, - unstable_rowSpanning: false, virtualizeColumnsWithAutoRowHeight: false, }; diff --git a/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts b/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts index ef9dafab2321..1c29902b6e79 100644 --- a/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts +++ b/packages/x-data-grid/src/hooks/features/rows/useGridRowSpanning.ts @@ -164,7 +164,7 @@ const computeRowSpanningState = ( * @requires filterStateInitializer (method) - should be initialized before */ export const rowSpanningStateInitializer: GridStateInitializer = (state, props, apiRef) => { - if (props.unstable_rowSpanning) { + if (props.rowSpanning) { const rowIds = state.rows!.dataRowIds || []; const orderedFields = state.columns!.orderedFields || []; const dataRowIdToModelLookup = state.rows!.dataRowIdToModelLookup; @@ -221,7 +221,7 @@ export const rowSpanningStateInitializer: GridStateInitializer = (state, props, export const useGridRowSpanning = ( apiRef: React.MutableRefObject, - props: Pick, + props: Pick, ): void => { const { range, rows: visibleRows } = useGridVisibleRows(apiRef, props); const renderContext = useGridSelector(apiRef, gridRenderContextSelector); @@ -247,7 +247,7 @@ export const useGridRowSpanning = ( // - The `paginationModel` is updated // - The rows are updated (resetState: boolean = true) => { - if (!props.unstable_rowSpanning) { + if (!props.rowSpanning) { if (apiRef.current.state.rowSpanning !== EMPTY_STATE) { apiRef.current.setState((state) => ({ ...state, rowSpanning: EMPTY_STATE })); } @@ -320,15 +320,7 @@ export const useGridRowSpanning = ( }; }); }, - [ - apiRef, - props.unstable_rowSpanning, - range, - renderContext, - visibleRows, - colDefs, - processedRange, - ], + [apiRef, props.rowSpanning, range, renderContext, visibleRows, colDefs, processedRange], ); const prevRenderContext = React.useRef(renderContext); diff --git a/packages/x-data-grid/src/models/props/DataGridProps.ts b/packages/x-data-grid/src/models/props/DataGridProps.ts index 4adfe8a22094..e5ea2a80cf5f 100644 --- a/packages/x-data-grid/src/models/props/DataGridProps.ts +++ b/packages/x-data-grid/src/models/props/DataGridProps.ts @@ -379,7 +379,7 @@ export interface DataGridPropsWithDefaultValues 'auto'`. * By default, column virtualization is disabled when dynamic row height is enabled to measure the row height correctly. diff --git a/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx b/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx index c3875d9b3889..ef0b006133d1 100644 --- a/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx +++ b/packages/x-data-grid/src/tests/rowSpanning.DataGrid.test.tsx @@ -11,7 +11,7 @@ describe(' - Row spanning', () => { let apiRef: React.MutableRefObject; const baselineProps: DataGridProps = { - unstable_rowSpanning: true, + rowSpanning: true, columns: [ { field: 'code',