[DataGrid] Make row spanning feature stable (#15742)

Co-authored-by: Armin Mehinovic <4390250+arminmeh@users.noreply.github.com>

Author: MBilalShafi

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': {

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': {

docs/data/data-grid/row-spanning/RowSpanningCalendar.js

@@ -137,7 +137,7 @@ export default function RowSpanningCalendar() {
       <DataGrid
         columns={columns}
         rows={rows}
-        unstable_rowSpanning
+        rowSpanning
         disableRowSelectionOnClick
         hideFooter
         showCellVerticalBorder

docs/data/data-grid/row-spanning/RowSpanningCalendar.tsx

@@ -148,7 +148,7 @@ export default function RowSpanningCalendar() {
       <DataGrid
         columns={columns}
         rows={rows}
-        unstable_rowSpanning
+        rowSpanning
         disableRowSelectionOnClick
         hideFooter
         showCellVerticalBorder

docs/data/data-grid/row-spanning/RowSpanningCalendar.tsx.preview

@@ -1,7 +1,7 @@
 <DataGrid
   columns={columns}
   rows={rows}
-  unstable_rowSpanning
+  rowSpanning
   disableRowSelectionOnClick
   hideFooter
   showCellVerticalBorder

docs/data/data-grid/row-spanning/RowSpanningClassSchedule.js

@@ -137,7 +137,7 @@ export default function RowSpanningClassSchedule() {
       <DataGrid
         columns={columns}
         rows={rows}
-        unstable_rowSpanning
+        rowSpanning
         disableRowSelectionOnClick
         hideFooter
         showCellVerticalBorder

docs/data/data-grid/row-spanning/RowSpanningClassSchedule.tsx

@@ -139,7 +139,7 @@ export default function RowSpanningClassSchedule() {
       <DataGrid
         columns={columns}
         rows={rows}
-        unstable_rowSpanning
+        rowSpanning
         disableRowSelectionOnClick
         hideFooter
         showCellVerticalBorder

docs/data/data-grid/row-spanning/RowSpanningCustom.js

@@ -12,7 +12,7 @@ export default function RowSpanningCustom() {
         showColumnVerticalBorder
         disableRowSelectionOnClick
         hideFooter
-        unstable_rowSpanning
+        rowSpanning
         sx={{
           '& .MuiDataGrid-row:hover': {
             backgroundColor: 'transparent',

docs/data/data-grid/row-spanning/RowSpanningCustom.tsx

@@ -12,7 +12,7 @@ export default function RowSpanningCustom() {
         showColumnVerticalBorder
         disableRowSelectionOnClick
         hideFooter
-        unstable_rowSpanning
+        rowSpanning
         sx={{
           '& .MuiDataGrid-row:hover': {
             backgroundColor: 'transparent',

docs/data/data-grid/row-spanning/RowSpanningCustom.tsx.preview

@@ -5,7 +5,7 @@
   showColumnVerticalBorder
   disableRowSelectionOnClick
   hideFooter
-  unstable_rowSpanning
+  rowSpanning
   sx={{
     '& .MuiDataGrid-row:hover': {
       backgroundColor: 'transparent',

docs/data/data-grid/row-spanning/row-spanning.md

@@ -2,14 +2,10 @@
 
 <p class="description">Span cells across several rows.</p>
 
-:::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}}

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
+   <DataGrid
+  -  unstable_rowSpanning
+  +  rowSpanning
+   />
+  ```
+
 ### 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).

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' },

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -605,6 +605,7 @@
       "type": { "name": "enum", "description": "'border'<br>&#124;&nbsp;'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",

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -543,6 +543,7 @@
       "type": { "name": "enum", "description": "'border'<br>&#124;&nbsp;'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",

docs/pages/x/api/data-grid/data-grid.json

@@ -450,6 +450,7 @@
       "type": { "name": "enum", "description": "'border'<br>&#124;&nbsp;'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",

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 <code>getRowSpacing</code>."
     },
+    "rowSpanning": {
+      "description": "If <code>true</code>, 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 <code>true</code>, displays the data in a list view. Use in combination with <code>unstable_listColumn</code>."
     },
-    "unstable_rowSpanning": {
-      "description": "If <code>true</code>, the Data Grid will auto span the cells over the rows having the same value."
-    },
     "virtualizeColumnsWithAutoRowHeight": {
       "description": "If <code>true</code>, the Data Grid enables column virtualization when <code>getRowHeight</code> is set to <code>() =&gt; &#39;auto&#39;</code>. 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."
     }

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 <code>getRowSpacing</code>."
     },
+    "rowSpanning": {
+      "description": "If <code>true</code>, 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 <code>true</code>, displays the data in a list view. Use in combination with <code>unstable_listColumn</code>."
     },
-    "unstable_rowSpanning": {
-      "description": "If <code>true</code>, the Data Grid will auto span the cells over the rows having the same value."
-    },
     "virtualizeColumnsWithAutoRowHeight": {
       "description": "If <code>true</code>, the Data Grid enables column virtualization when <code>getRowHeight</code> is set to <code>() =&gt; &#39;auto&#39;</code>. 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."
     }

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 <code>getRowSpacing</code>."
     },
+    "rowSpanning": {
+      "description": "If <code>true</code>, 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 <code>true</code>, the Data Grid will auto span the cells over the rows having the same value."
-    },
     "virtualizeColumnsWithAutoRowHeight": {
       "description": "If <code>true</code>, the Data Grid enables column virtualization when <code>getRowHeight</code> is set to <code>() =&gt; &#39;auto&#39;</code>. 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."
     }

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.

packages/x-data-grid-premium/src/tests/rowSpanning.DataGridPremium.test.tsx

@@ -9,7 +9,7 @@ describe('<DataGridPremium /> - Row spanning', () => {
   const { render } = createRenderer();
 
   const baselineProps: DataGridPremiumProps = {
-    unstable_rowSpanning: true,
+    rowSpanning: true,
     columns: [
       {
         field: 'code',

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.

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.

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,
 };

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<GridPrivateApiCommunity>,
-  props: Pick<DataGridProcessedProps, 'unstable_rowSpanning' | 'pagination' | 'paginationMode'>,
+  props: Pick<DataGridProcessedProps, 'rowSpanning' | 'pagination' | 'paginationMode'>,
 ): 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);

packages/x-data-grid/src/models/props/DataGridProps.ts

@@ -379,7 +379,7 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
    * If `true`, the Data Grid will auto span the cells over the rows having the same value.
    * @default false
    */
-  unstable_rowSpanning: boolean;
+  rowSpanning: boolean;
   /**
    * 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.