From a3ba7bec4913fb74970d1538ead44694180b55b2 Mon Sep 17 00:00:00 2001
From: flavien <flaviendelangle@gmail.com>
Date: Mon, 7 Feb 2022 12:00:19 +0100
Subject: [PATCH 01/32] [DataGrid] Pass the indexes relative to the row and the
 virtualization engine to the Row component

---
 .../components/data-grid/style/StripedGrid.js | 64 +++++++++++++++++++
 .../data-grid/style/StripedGrid.tsx           | 40 ++++++++++++
 .../data-grid/style/StripedGrid.tsx.preview   |  1 +
 .../pages/components/data-grid/style/style.md |  6 ++
 .../_modules_/grid/components/GridRow.tsx     | 44 +++++++++++--
 .../virtualization/useGridVirtualScroller.tsx | 10 ++-
 6 files changed, 159 insertions(+), 6 deletions(-)
 create mode 100644 docs/src/pages/components/data-grid/style/StripedGrid.js
 create mode 100644 docs/src/pages/components/data-grid/style/StripedGrid.tsx
 create mode 100644 docs/src/pages/components/data-grid/style/StripedGrid.tsx.preview

diff --git a/docs/src/pages/components/data-grid/style/StripedGrid.js b/docs/src/pages/components/data-grid/style/StripedGrid.js
new file mode 100644
index 000000000000..9aabd7831045
--- /dev/null
+++ b/docs/src/pages/components/data-grid/style/StripedGrid.js
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { DataGrid, GridRow, gridClasses } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import clsx from 'clsx';
+
+const StripedDataGrid = styled(DataGrid)({
+  [`& .${gridClasses.row}.odd`]: {
+    backgroundColor: '#EEEEEE',
+    '&:hover, &.Mui-hovered': {
+      backgroundColor: '#DDDDDD',
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    },
+  },
+});
+
+const CustomRow = (props) => (
+  <GridRow
+    {...props}
+    className={clsx(
+      props.className,
+      props.indexes.pageRows % 2 === 1 ? 'odd' : undefined,
+    )}
+  />
+);
+
+CustomRow.propTypes = {
+  className: PropTypes.string,
+  indexes: PropTypes.shape({
+    /**
+     * Index of the row in the whole sorted and filtered dataset.
+     * If some rows above have expanded children, this index also take those children into account.
+     */
+    filteredRows: PropTypes.number.isRequired,
+    /**
+     * Index of the row in the current page.
+     * If the pagination is disabled, this value will be equal to the `dataset` value.
+     * If some rows above have expanded children, this index also take those children into account.
+     */
+    pageRows: PropTypes.number.isRequired,
+    /**
+     * Index of the row in the list of rows currently rendered by the virtualization engine.
+     * If the pagination is disabled, this value will be equal to the `page` value.
+     * If some rows above have expanded children, this index also take those children into account.
+     */
+    virtualizationEngineRows: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export default function StripedGrid() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Employee',
+    rowLength: 200,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid loading={loading} {...data} components={{ Row: CustomRow }} />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/data-grid/style/StripedGrid.tsx b/docs/src/pages/components/data-grid/style/StripedGrid.tsx
new file mode 100644
index 000000000000..1bcfa1ff3eeb
--- /dev/null
+++ b/docs/src/pages/components/data-grid/style/StripedGrid.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { DataGrid, GridRowProps, GridRow, gridClasses } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import clsx from 'clsx';
+
+const StripedDataGrid = styled(DataGrid)({
+  [`& .${gridClasses.row}.odd`]: {
+    backgroundColor: '#EEEEEE',
+    '&:hover, &.Mui-hovered': {
+      backgroundColor: '#DDDDDD',
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    },
+  },
+});
+
+const CustomRow = (props: GridRowProps) => (
+  <GridRow
+    {...props}
+    className={clsx(
+      props.className,
+      props.indexes.pageRows % 2 === 1 ? 'odd' : undefined,
+    )}
+  />
+);
+
+export default function StripedGrid() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Employee',
+    rowLength: 200,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <StripedDataGrid loading={loading} {...data} components={{ Row: CustomRow }} />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/data-grid/style/StripedGrid.tsx.preview b/docs/src/pages/components/data-grid/style/StripedGrid.tsx.preview
new file mode 100644
index 000000000000..2ec54f4ff7bf
--- /dev/null
+++ b/docs/src/pages/components/data-grid/style/StripedGrid.tsx.preview
@@ -0,0 +1 @@
+<DataGrid loading={loading} {...data} components={{ Row: CustomRow }} />
\ No newline at end of file
diff --git a/docs/src/pages/components/data-grid/style/style.md b/docs/src/pages/components/data-grid/style/style.md
index 0a6d1a48eae7..46e20e1db73e 100644
--- a/docs/src/pages/components/data-grid/style/style.md
+++ b/docs/src/pages/components/data-grid/style/style.md
@@ -117,6 +117,12 @@ Choose between one of the following values: 'left' | 'right' | 'center'.
 
 **Note**: You must use `headerAlign` to align the content of the header.
 
+## Striped rows
+
+The following demo illustrates how the rows of the grid can be stripped.
+
+{{"demo": "pages/components/data-grid/style/StripedGrid.js", "bg": "inline", "defaultCodeOpen": false}}
+
 ## Custom theme
 
 The following demo leverages the CSS customization API to match the Ant Design specification.
diff --git a/packages/grid/_modules_/grid/components/GridRow.tsx b/packages/grid/_modules_/grid/components/GridRow.tsx
index 2c0310c23b16..0a2907db57da 100644
--- a/packages/grid/_modules_/grid/components/GridRow.tsx
+++ b/packages/grid/_modules_/grid/components/GridRow.tsx
@@ -15,11 +15,40 @@ import { GridStateColDef } from '../models/colDef/gridColDef';
 import { GridCellIdentifier } from '../hooks/features/focus/gridFocusState';
 import { gridColumnsMetaSelector } from '../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { GridRenderEditCellParams } from '../models';
+
+export interface GridRowIndexes {
+  /**
+   * Index of the row in the whole sorted and filtered dataset.
+   * If some rows above have expanded children, this index also take those children into account.
+   */
+  filteredRows: number;
+
+  /**
+   * Index of the row in the current page.
+   * If the pagination is disabled, this value will be equal to the `dataset` value.
+   * If some rows above have expanded children, this index also take those children into account.
+   */
+  pageRows: number;
+
+  /**
+   * Index of the row in the list of rows currently rendered by the virtualization engine.
+   * If the pagination is disabled, this value will be equal to the `page` value.
+   * If some rows above have expanded children, this index also take those children into account.
+   */
+  virtualizationEngineRows: number;
+}
 
-export interface GridRowProps {
+export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
   rowId: GridRowId;
   selected: boolean;
+  /**
+   * Index of the row in the whole sorted and filtered dataset.
+   * If some rows above have expanded children, this index also take those children into account.
+   * @deprecated Use `props.indexes.filteredRows` instead.
+   */
   index: number;
+  indexes: GridRowIndexes;
   rowHeight: number;
   containerWidth: number;
   row: GridRowModel;
@@ -62,12 +91,13 @@ const EmptyCell = ({ width, height }) => {
   return <div className="MuiDataGrid-cell" style={style} />; // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 };
 
-function GridRow(props: React.HTMLAttributes<HTMLDivElement> & GridRowProps) {
+function GridRow(props: GridRowProps) {
   const {
     selected,
     rowId,
     row,
     index,
+    indexes,
     style: styleProp,
     rowHeight,
     className,
@@ -85,7 +115,7 @@ function GridRow(props: React.HTMLAttributes<HTMLDivElement> & GridRowProps) {
     onMouseLeave,
     ...other
   } = props;
-  const ariaRowIndex = index + 2; // 1 for the header row and 1 as it's 1-based
+  const ariaRowIndex = indexes.filteredRows + 2; // 1 for the header row and 1 as it's 1-based
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const columnsMeta = useGridSelector(apiRef, gridColumnsMetaSelector);
@@ -181,7 +211,11 @@ function GridRow(props: React.HTMLAttributes<HTMLDivElement> & GridRowProps) {
     }
 
     if (editCellState != null && column.renderEditCell) {
-      const params = { ...cellParams, ...editCellState, api: apiRef.current };
+      const params: GridRenderEditCellParams = {
+        ...cellParams,
+        ...editCellState,
+        api: apiRef.current,
+      };
       content = column.renderEditCell(params);
       // TODO move to GridCell
       classNames.push(clsx(gridClasses['cell--editing'], rootProps.classes?.['cell--editing']));
@@ -232,7 +266,7 @@ function GridRow(props: React.HTMLAttributes<HTMLDivElement> & GridRowProps) {
   return (
     <div
       data-id={rowId}
-      data-rowindex={index}
+      data-rowindex={indexes.filteredRows}
       role="row"
       className={clsx(rowClassName, classes.root, className)}
       aria-rowindex={ariaRowIndex}
diff --git a/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualScroller.tsx
index 932fb9856856..225a5d7cc9d5 100644
--- a/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualScroller.tsx
+++ b/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -18,6 +18,7 @@ import { GridRenderContext } from '../../../models';
 import { selectedIdsLookupSelector } from '../selection/gridSelectionSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { GridRowId, GridRowModel } from '../../../models/gridRows';
+import type { GridRowIndexes } from '../../../components/GridRow';
 
 // Uses binary search to avoid looping through all possible positions
 export function getIndexFromScroll(
@@ -296,6 +297,12 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => {
         isSelected = true;
       }
 
+      const indexes: GridRowIndexes = {
+        filteredRows: currentPage.range.firstRowIndex + nextRenderContext.firstRowIndex! + i,
+        pageRows: nextRenderContext.firstColumnIndex + i,
+        virtualizationEngineRows: i,
+      };
+
       rows.push(
         <rootProps.components.Row
           key={id}
@@ -310,7 +317,8 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => {
           firstColumnToRender={firstColumnToRender}
           lastColumnToRender={lastColumnToRender}
           selected={isSelected}
-          index={currentPage.range.firstRowIndex + nextRenderContext.firstRowIndex! + i}
+          index={indexes.filteredRows}
+          indexes={indexes}
           containerWidth={availableSpace}
           {...(typeof getRowProps === 'function' ? getRowProps(id, model) : {})}
           {...rootProps.componentsProps?.row}

From 178b28fe0e00dece00a9b3575fc3fd7fc8cd9121 Mon Sep 17 00:00:00 2001
From: flavien <flaviendelangle@gmail.com>
Date: Mon, 7 Feb 2022 12:09:33 +0100
Subject: [PATCH 02/32] Work

---
 .../_modules_/grid/components/GridRow.tsx     | 26 ++++++++++++++-----
 .../virtualization/useGridVirtualScroller.tsx |  4 +--
 scripts/x-data-grid-pro.exports.json          |  1 +
 scripts/x-data-grid.exports.json              |  1 +
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/grid/_modules_/grid/components/GridRow.tsx b/packages/grid/_modules_/grid/components/GridRow.tsx
index 0a2907db57da..179589e81a32 100644
--- a/packages/grid/_modules_/grid/components/GridRow.tsx
+++ b/packages/grid/_modules_/grid/components/GridRow.tsx
@@ -20,21 +20,18 @@ import { GridRenderEditCellParams } from '../models';
 export interface GridRowIndexes {
   /**
    * Index of the row in the whole sorted and filtered dataset.
-   * If some rows above have expanded children, this index also take those children into account.
    */
-  filteredRows: number;
+  visibleRows: number;
 
   /**
    * Index of the row in the current page.
    * If the pagination is disabled, this value will be equal to the `dataset` value.
-   * If some rows above have expanded children, this index also take those children into account.
    */
   pageRows: number;
 
   /**
    * Index of the row in the list of rows currently rendered by the virtualization engine.
    * If the pagination is disabled, this value will be equal to the `page` value.
-   * If some rows above have expanded children, this index also take those children into account.
    */
   virtualizationEngineRows: number;
 }
@@ -45,7 +42,7 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Index of the row in the whole sorted and filtered dataset.
    * If some rows above have expanded children, this index also take those children into account.
-   * @deprecated Use `props.indexes.filteredRows` instead.
+   * @deprecated Use `props.indexes.visibleRows` instead.
    */
   index: number;
   indexes: GridRowIndexes;
@@ -115,7 +112,7 @@ function GridRow(props: GridRowProps) {
     onMouseLeave,
     ...other
   } = props;
-  const ariaRowIndex = indexes.filteredRows + 2; // 1 for the header row and 1 as it's 1-based
+  const ariaRowIndex = indexes.visibleRows + 2; // 1 for the header row and 1 as it's 1-based
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const columnsMeta = useGridSelector(apiRef, gridColumnsMetaSelector);
@@ -216,6 +213,7 @@ function GridRow(props: GridRowProps) {
         ...editCellState,
         api: apiRef.current,
       };
+
       content = column.renderEditCell(params);
       // TODO move to GridCell
       classNames.push(clsx(gridClasses['cell--editing'], rootProps.classes?.['cell--editing']));
@@ -266,7 +264,7 @@ function GridRow(props: GridRowProps) {
   return (
     <div
       data-id={rowId}
-      data-rowindex={indexes.filteredRows}
+      data-rowindex={indexes.visibleRows}
       role="row"
       className={clsx(rowClassName, classes.root, className)}
       aria-rowindex={ariaRowIndex}
@@ -294,8 +292,22 @@ GridRow.propTypes = {
   containerWidth: PropTypes.number.isRequired,
   editRowsState: PropTypes.object.isRequired,
   firstColumnToRender: PropTypes.number.isRequired,
+  /**
+   * Index of the row in the whole sorted and filtered dataset.
+   * If some rows above have expanded children, this index also take those children into account.
+   * @deprecated Use `props.indexes.visibleRows` instead.
+   */
   index: PropTypes.number.isRequired,
+  indexes: PropTypes.shape({
+    pageRows: PropTypes.number.isRequired,
+    virtualizationEngineRows: PropTypes.number.isRequired,
+    visibleRows: PropTypes.number.isRequired,
+  }).isRequired,
   lastColumnToRender: PropTypes.number.isRequired,
+  onClick: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  onMouseEnter: PropTypes.func,
+  onMouseLeave: PropTypes.func,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
   row: PropTypes.object.isRequired,
   rowHeight: PropTypes.number.isRequired,
diff --git a/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualScroller.tsx
index 225a5d7cc9d5..1eab0e59605c 100644
--- a/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualScroller.tsx
+++ b/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -298,7 +298,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => {
       }
 
       const indexes: GridRowIndexes = {
-        filteredRows: currentPage.range.firstRowIndex + nextRenderContext.firstRowIndex! + i,
+        visibleRows: currentPage.range.firstRowIndex + nextRenderContext.firstRowIndex! + i,
         pageRows: nextRenderContext.firstColumnIndex + i,
         virtualizationEngineRows: i,
       };
@@ -317,7 +317,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => {
           firstColumnToRender={firstColumnToRender}
           lastColumnToRender={lastColumnToRender}
           selected={isSelected}
-          index={indexes.filteredRows}
+          index={indexes.visibleRows}
           indexes={indexes}
           containerWidth={availableSpace}
           {...(typeof getRowProps === 'function' ? getRowProps(id, model) : {})}
diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json
index 113a2d220c00..2e8a07aa6c93 100644
--- a/scripts/x-data-grid-pro.exports.json
+++ b/scripts/x-data-grid-pro.exports.json
@@ -320,6 +320,7 @@
   { "name": "GridRowId", "kind": "TypeAlias" },
   { "name": "GridRowIdGetter", "kind": "TypeAlias" },
   { "name": "gridRowIdsSelector", "kind": "Variable" },
+  { "name": "GridRowIndexes", "kind": "Interface" },
   { "name": "GridRowMode", "kind": "TypeAlias" },
   { "name": "GridRowModel", "kind": "TypeAlias" },
   { "name": "GridRowModelUpdate", "kind": "Interface" },
diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json
index a81d48e5f641..73ea12ea0c9e 100644
--- a/scripts/x-data-grid.exports.json
+++ b/scripts/x-data-grid.exports.json
@@ -320,6 +320,7 @@
   { "name": "GridRowId", "kind": "TypeAlias" },
   { "name": "GridRowIdGetter", "kind": "TypeAlias" },
   { "name": "gridRowIdsSelector", "kind": "Variable" },
+  { "name": "GridRowIndexes", "kind": "Interface" },
   { "name": "GridRowMode", "kind": "TypeAlias" },
   { "name": "GridRowModel", "kind": "TypeAlias" },
   { "name": "GridRowModelUpdate", "kind": "Interface" },

From e745fbf98496ddf84e698c5f2d010c11a3b25850 Mon Sep 17 00:00:00 2001
From: flavien <flaviendelangle@gmail.com>
Date: Mon, 7 Feb 2022 12:16:42 +0100
Subject: [PATCH 03/32] Work

---
 .../pages/components/data-grid/style/StripedGrid.js | 13 +++++--------
 .../data-grid/style/StripedGrid.tsx.preview         |  2 +-
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/docs/src/pages/components/data-grid/style/StripedGrid.js b/docs/src/pages/components/data-grid/style/StripedGrid.js
index 9aabd7831045..a4eca9bd10f4 100644
--- a/docs/src/pages/components/data-grid/style/StripedGrid.js
+++ b/docs/src/pages/components/data-grid/style/StripedGrid.js
@@ -30,23 +30,20 @@ const CustomRow = (props) => (
 CustomRow.propTypes = {
   className: PropTypes.string,
   indexes: PropTypes.shape({
-    /**
-     * Index of the row in the whole sorted and filtered dataset.
-     * If some rows above have expanded children, this index also take those children into account.
-     */
-    filteredRows: PropTypes.number.isRequired,
     /**
      * Index of the row in the current page.
      * If the pagination is disabled, this value will be equal to the `dataset` value.
-     * If some rows above have expanded children, this index also take those children into account.
      */
     pageRows: PropTypes.number.isRequired,
     /**
      * Index of the row in the list of rows currently rendered by the virtualization engine.
      * If the pagination is disabled, this value will be equal to the `page` value.
-     * If some rows above have expanded children, this index also take those children into account.
      */
     virtualizationEngineRows: PropTypes.number.isRequired,
+    /**
+     * Index of the row in the whole sorted and filtered dataset.
+     */
+    visibleRows: PropTypes.number.isRequired,
   }).isRequired,
 };
 
@@ -58,7 +55,7 @@ export default function StripedGrid() {
 
   return (
     <div style={{ height: 400, width: '100%' }}>
-      <DataGrid loading={loading} {...data} components={{ Row: CustomRow }} />
+      <StripedDataGrid loading={loading} {...data} components={{ Row: CustomRow }} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/data-grid/style/StripedGrid.tsx.preview b/docs/src/pages/components/data-grid/style/StripedGrid.tsx.preview
index 2ec54f4ff7bf..cdf1427cb4a5 100644
--- a/docs/src/pages/components/data-grid/style/StripedGrid.tsx.preview
+++ b/docs/src/pages/components/data-grid/style/StripedGrid.tsx.preview
@@ -1 +1 @@
-<DataGrid loading={loading} {...data} components={{ Row: CustomRow }} />
\ No newline at end of file
+<StripedDataGrid loading={loading} {...data} components={{ Row: CustomRow }} />
\ No newline at end of file

From 051becd129e4aedb8761d40bb795b04c5c268f92 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Fri, 4 Feb 2022 23:36:57 -0300
Subject: [PATCH 04/32] [DataGrid] Add support for margin between rows

---
 .../api-docs/data-grid/data-grid-pro.json     |   1 +
 docs/pages/api-docs/data-grid/data-grid.json  |   1 +
 .../data-grid/grid-row-class-name-params.js   |   7 +
 .../data-grid/grid-row-class-name-params.md   |  22 +++
 .../data-grid/grid-row-spacing-params.js      |   7 +
 .../data-grid/grid-row-spacing-params.md      |  20 +++
 .../api/buildInterfacesDocumentation.ts       |   2 +
 .../data-grid/rows/RowMarginGrid.js           |  53 ++++++
 .../data-grid/rows/RowMarginGrid.tsx          |  57 +++++++
 .../pages/components/data-grid/rows/rows.md   |   9 +
 .../api-docs/data-grid/data-grid-pro-pt.json  |   3 +-
 .../api-docs/data-grid/data-grid-pro-zh.json  |   3 +-
 .../api-docs/data-grid/data-grid-pro.json     |   3 +-
 .../api-docs/data-grid/data-grid-pt.json      |   3 +-
 .../api-docs/data-grid/data-grid-zh.json      |   3 +-
 .../api-docs/data-grid/data-grid.json         |   3 +-
 .../_modules_/grid/components/GridRow.tsx     |  18 +-
 .../hooks/features/rows/useGridRowSpacing.ts  |  43 +++++
 .../virtualization/useGridVirtualScroller.tsx |   2 +-
 .../grid/hooks/utils/useCurrentPageRows.ts    |  11 +-
 .../grid/_modules_/grid/models/gridRows.ts    |  11 +-
 .../grid/models/params/gridRowParams.ts       |  36 ++++
 .../grid/models/props/DataGridProps.ts        |  13 +-
 .../grid/x-data-grid-pro/src/DataGridPro.tsx  |   8 +-
 .../src/DataGridProVirtualScroller.tsx        |  15 +-
 .../src/useDataGridProComponent.tsx           |   2 +
 packages/grid/x-data-grid/src/DataGrid.tsx    |   8 +-
 .../src/tests/rows.DataGrid.test.tsx          | 154 ++++++++++++++++--
 .../x-data-grid/src/useDataGridComponent.tsx  |   2 +
 scripts/x-data-grid-pro.exports.json          |   5 +-
 scripts/x-data-grid.exports.json              |   5 +-
 31 files changed, 486 insertions(+), 44 deletions(-)
 create mode 100644 docs/pages/api-docs/data-grid/grid-row-class-name-params.js
 create mode 100644 docs/pages/api-docs/data-grid/grid-row-class-name-params.md
 create mode 100644 docs/pages/api-docs/data-grid/grid-row-spacing-params.js
 create mode 100644 docs/pages/api-docs/data-grid/grid-row-spacing-params.md
 create mode 100644 docs/src/pages/components/data-grid/rows/RowMarginGrid.js
 create mode 100644 docs/src/pages/components/data-grid/rows/RowMarginGrid.tsx
 create mode 100644 packages/grid/_modules_/grid/hooks/features/rows/useGridRowSpacing.ts

diff --git a/docs/pages/api-docs/data-grid/data-grid-pro.json b/docs/pages/api-docs/data-grid/data-grid-pro.json
index 6c6bbd99853d..9629dc431bbd 100644
--- a/docs/pages/api-docs/data-grid/data-grid-pro.json
+++ b/docs/pages/api-docs/data-grid/data-grid-pro.json
@@ -80,6 +80,7 @@
     "getRowClassName": { "type": { "name": "func" } },
     "getRowHeight": { "type": { "name": "func" } },
     "getRowId": { "type": { "name": "func" } },
+    "getRowSpacing": { "type": { "name": "func" } },
     "getTreeDataPath": { "type": { "name": "func" } },
     "groupingColDef": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;object" } },
     "headerHeight": { "type": { "name": "number" }, "default": "56" },
diff --git a/docs/pages/api-docs/data-grid/data-grid.json b/docs/pages/api-docs/data-grid/data-grid.json
index c8bfbd402172..c7853dfd06b6 100644
--- a/docs/pages/api-docs/data-grid/data-grid.json
+++ b/docs/pages/api-docs/data-grid/data-grid.json
@@ -50,6 +50,7 @@
     "getRowClassName": { "type": { "name": "func" } },
     "getRowHeight": { "type": { "name": "func" } },
     "getRowId": { "type": { "name": "func" } },
+    "getRowSpacing": { "type": { "name": "func" } },
     "headerHeight": { "type": { "name": "number" }, "default": "56" },
     "hideFooter": { "type": { "name": "bool" } },
     "hideFooterPagination": { "type": { "name": "bool" } },
diff --git a/docs/pages/api-docs/data-grid/grid-row-class-name-params.js b/docs/pages/api-docs/data-grid/grid-row-class-name-params.js
new file mode 100644
index 000000000000..45ba69c0e60c
--- /dev/null
+++ b/docs/pages/api-docs/data-grid/grid-row-class-name-params.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs';
+import { demos, docs, demoComponents } from './grid-row-class-name-params.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+}
diff --git a/docs/pages/api-docs/data-grid/grid-row-class-name-params.md b/docs/pages/api-docs/data-grid/grid-row-class-name-params.md
new file mode 100644
index 000000000000..11298856f19c
--- /dev/null
+++ b/docs/pages/api-docs/data-grid/grid-row-class-name-params.md
@@ -0,0 +1,22 @@
+# GridRowClassNameParams Interface
+
+<p class="description">Object passed as parameter in the row getRowClassName callback.</p>
+
+## Import
+
+```js
+import { GridRowClassNameParams } from '@mui/x-data-grid-pro';
+// or
+import { GridRowClassNameParams } from '@mui/x-data-grid';
+```
+
+## Properties
+
+| Name                                          | Type                                                                              | Description                                                |
+| :-------------------------------------------- | :-------------------------------------------------------------------------------- | :--------------------------------------------------------- |
+| <span class="prop-name">columns</span>        | <span class="prop-type">GridColumns</span>                                        | All grid columns.                                          |
+| <span class="prop-name">getValue</span>       | <span class="prop-type">(id: GridRowId, field: string) =&gt; GridCellValue</span> | Get the cell value of a row and field.                     |
+| <span class="prop-name">id</span>             | <span class="prop-type">GridRowId</span>                                          | The grid row id.                                           |
+| <span class="prop-name">isFirstVisible</span> | <span class="prop-type">boolean</span>                                            | Whether this row is the first visible or not.              |
+| <span class="prop-name">isLastVisible</span>  | <span class="prop-type">boolean</span>                                            | Whether this row is the last visible or not.               |
+| <span class="prop-name">row</span>            | <span class="prop-type">R</span>                                                  | The row model of the row that the current cell belongs to. |
diff --git a/docs/pages/api-docs/data-grid/grid-row-spacing-params.js b/docs/pages/api-docs/data-grid/grid-row-spacing-params.js
new file mode 100644
index 000000000000..e6f32fbc96b7
--- /dev/null
+++ b/docs/pages/api-docs/data-grid/grid-row-spacing-params.js
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs';
+import { demos, docs, demoComponents } from './grid-row-spacing-params.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+}
diff --git a/docs/pages/api-docs/data-grid/grid-row-spacing-params.md b/docs/pages/api-docs/data-grid/grid-row-spacing-params.md
new file mode 100644
index 000000000000..4625345be5ab
--- /dev/null
+++ b/docs/pages/api-docs/data-grid/grid-row-spacing-params.md
@@ -0,0 +1,20 @@
+# GridRowSpacingParams Interface
+
+<p class="description">Object passed as parameter in the row getRowSpacing callback.</p>
+
+## Import
+
+```js
+import { GridRowSpacingParams } from '@mui/x-data-grid-pro';
+// or
+import { GridRowSpacingParams } from '@mui/x-data-grid';
+```
+
+## Properties
+
+| Name                                          | Type                                        | Description                                                |
+| :-------------------------------------------- | :------------------------------------------ | :--------------------------------------------------------- |
+| <span class="prop-name">id</span>             | <span class="prop-type">GridRowId</span>    | The row model of the row that the current cell belongs to. |
+| <span class="prop-name">isFirstVisible</span> | <span class="prop-type">boolean</span>      | Whether this row is the first visible or not.              |
+| <span class="prop-name">isLastVisible</span>  | <span class="prop-type">boolean</span>      | Whether this row is the last visible or not.               |
+| <span class="prop-name">model</span>          | <span class="prop-type">GridRowModel</span> | The row model of the row that the current cell belongs to. |
diff --git a/docs/scripts/api/buildInterfacesDocumentation.ts b/docs/scripts/api/buildInterfacesDocumentation.ts
index 4f5e2c76e86c..d56b06d46373 100644
--- a/docs/scripts/api/buildInterfacesDocumentation.ts
+++ b/docs/scripts/api/buildInterfacesDocumentation.ts
@@ -52,6 +52,8 @@ const INTERFACES_WITH_DEDICATED_PAGES = [
   // Params
   'GridCellParams',
   'GridRowParams',
+  'GridRowClassNameParams',
+  'GridRowSpacingParams',
 
   // Others
   'GridColDef',
diff --git a/docs/src/pages/components/data-grid/rows/RowMarginGrid.js b/docs/src/pages/components/data-grid/rows/RowMarginGrid.js
new file mode 100644
index 000000000000..1bc32a9f7cea
--- /dev/null
+++ b/docs/src/pages/components/data-grid/rows/RowMarginGrid.js
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import clsx from 'clsx';
+
+export default function RowMarginGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 200,
+    maxColumns: 6,
+  });
+
+  const getRowSpacing = React.useCallback((params) => {
+    return {
+      top: params.isFirstVisible ? 0 : 5,
+      bottom: params.isLastVisible ? 0 : 5,
+    };
+  }, []);
+
+  const getRowClassName = React.useCallback((params) => {
+    return clsx({
+      first: params.isFirstVisible,
+      last: params.isLastVisible,
+    });
+  }, []);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        getRowSpacing={getRowSpacing}
+        getRowClassName={getRowClassName}
+        sx={{
+          '& .MuiDataGrid-virtualScrollerRenderZone': {
+            display: 'flex', // Prevents margin collapsing
+            flexDirection: 'column',
+          },
+          '& .MuiDataGrid-row': {
+            mt: '5px',
+            mb: '5px',
+            bgcolor: '#efefef',
+            '&.first': {
+              mt: 0,
+            },
+            '&.last': {
+              mb: 0,
+            },
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/data-grid/rows/RowMarginGrid.tsx b/docs/src/pages/components/data-grid/rows/RowMarginGrid.tsx
new file mode 100644
index 000000000000..9f957efe35db
--- /dev/null
+++ b/docs/src/pages/components/data-grid/rows/RowMarginGrid.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {
+  DataGrid,
+  GridRowSpacingParams,
+  GridRowClassNameParams,
+} from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import clsx from 'clsx';
+
+export default function RowMarginGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 200,
+    maxColumns: 6,
+  });
+
+  const getRowSpacing = React.useCallback((params: GridRowSpacingParams) => {
+    return {
+      top: params.isFirstVisible ? 0 : 5,
+      bottom: params.isLastVisible ? 0 : 5,
+    };
+  }, []);
+
+  const getRowClassName = React.useCallback((params: GridRowClassNameParams) => {
+    return clsx({
+      first: params.isFirstVisible,
+      last: params.isLastVisible,
+    });
+  }, []);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        getRowSpacing={getRowSpacing}
+        getRowClassName={getRowClassName}
+        sx={{
+          '& .MuiDataGrid-virtualScrollerRenderZone': {
+            display: 'flex', // Prevents margin collapsing
+            flexDirection: 'column',
+          },
+          '& .MuiDataGrid-row': {
+            mt: '5px',
+            mb: '5px',
+            bgcolor: '#efefef',
+            '&.first': {
+              mt: 0,
+            },
+            '&.last': {
+              mb: 0,
+            },
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/data-grid/rows/rows.md b/docs/src/pages/components/data-grid/rows/rows.md
index a19b619cacb7..a2973924ea51 100644
--- a/docs/src/pages/components/data-grid/rows/rows.md
+++ b/docs/src/pages/components/data-grid/rows/rows.md
@@ -100,6 +100,15 @@ If you need some rows to have different row heights this can be achieved using t
 > <DataGridPro getRowHeight={handleGetRowHeight} />
 > ```
 
+## Row spacing
+
+By using the `getRowSpacing` prop you can specify the vertical space between rows.
+This prop is called with a [`GridRowSpacingParams`](/api/data-grid/grid-row-spacing-params/) object.
+Observe that the value specified will only be used internally to calculate which rows to render during scroll and for space allocation.
+Use it with CSS to add a margin or border between rows, as shown in the demo below:
+
+{{"demo": "pages/components/data-grid/rows/RowMarginGrid.js", "bg": "inline"}}
+
 ## Styling rows
 
 You can check the [styling rows](/components/data-grid/style/#styling-rows) section for more information.
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json
index 9b263918064a..2bdd5556bec8 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json
@@ -44,9 +44,10 @@
     "getCellClassName": "Function that applies CSS classes dynamically on cells.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the cell.",
     "getDetailPanelContent": "Function that returns the element to render in row detail.<br><br><strong>Signature:</strong><br><code>function(params: GridRowParams) =&gt; JSX.Element</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a>.<br> <em>returns</em> (JSX.Element): The row detail element.",
     "getDetailPanelHeight": "Function that returns the height of the row detail panel.<br><br><strong>Signature:</strong><br><code>function(params: GridRowParams) =&gt; number</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a>.<br> <em>returns</em> (number): The height in pixels.",
-    "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
+    "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowClassNameParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-class-name-params/\">GridRowClassNameParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
     "getRowHeight": "Function that sets the row height per row.<br><br><strong>Signature:</strong><br><code>function(params: GridRowHeightParams) =&gt; GridRowHeightReturnValue</code><br><em>params:</em> With all properties from GridRowHeightParams.<br> <em>returns</em> (GridRowHeightReturnValue): The row height value. If <code>null</code> or <code>undefined</code> then the default row height is applied.",
     "getRowId": "Return the id of a given GridRowModel.",
+    "getRowSpacing": "Function that allows to specify margins between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row margin values.",
     "getTreeDataPath": "Determines the path of a row in the tree data. For instance, a row with the path [&quot;A&quot;, &quot;B&quot;] is the child of the row with the path [&quot;A&quot;]. Note that all paths must contain at least one element.<br><br><strong>Signature:</strong><br><code>function(row: GridRowModel) =&gt; Array&lt;string&gt;</code><br><em>row:</em> The row from which we want the path.<br> <em>returns</em> (Array<string>): The path to the row.",
     "groupingColDef": "The grouping column used by the tree data.",
     "headerHeight": "Set the height in pixel of the column headers in the grid.",
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json
index 9b263918064a..2bdd5556bec8 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json
@@ -44,9 +44,10 @@
     "getCellClassName": "Function that applies CSS classes dynamically on cells.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the cell.",
     "getDetailPanelContent": "Function that returns the element to render in row detail.<br><br><strong>Signature:</strong><br><code>function(params: GridRowParams) =&gt; JSX.Element</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a>.<br> <em>returns</em> (JSX.Element): The row detail element.",
     "getDetailPanelHeight": "Function that returns the height of the row detail panel.<br><br><strong>Signature:</strong><br><code>function(params: GridRowParams) =&gt; number</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a>.<br> <em>returns</em> (number): The height in pixels.",
-    "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
+    "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowClassNameParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-class-name-params/\">GridRowClassNameParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
     "getRowHeight": "Function that sets the row height per row.<br><br><strong>Signature:</strong><br><code>function(params: GridRowHeightParams) =&gt; GridRowHeightReturnValue</code><br><em>params:</em> With all properties from GridRowHeightParams.<br> <em>returns</em> (GridRowHeightReturnValue): The row height value. If <code>null</code> or <code>undefined</code> then the default row height is applied.",
     "getRowId": "Return the id of a given GridRowModel.",
+    "getRowSpacing": "Function that allows to specify margins between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row margin values.",
     "getTreeDataPath": "Determines the path of a row in the tree data. For instance, a row with the path [&quot;A&quot;, &quot;B&quot;] is the child of the row with the path [&quot;A&quot;]. Note that all paths must contain at least one element.<br><br><strong>Signature:</strong><br><code>function(row: GridRowModel) =&gt; Array&lt;string&gt;</code><br><em>row:</em> The row from which we want the path.<br> <em>returns</em> (Array<string>): The path to the row.",
     "groupingColDef": "The grouping column used by the tree data.",
     "headerHeight": "Set the height in pixel of the column headers in the grid.",
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json
index 9b263918064a..2bdd5556bec8 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro.json
@@ -44,9 +44,10 @@
     "getCellClassName": "Function that applies CSS classes dynamically on cells.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the cell.",
     "getDetailPanelContent": "Function that returns the element to render in row detail.<br><br><strong>Signature:</strong><br><code>function(params: GridRowParams) =&gt; JSX.Element</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a>.<br> <em>returns</em> (JSX.Element): The row detail element.",
     "getDetailPanelHeight": "Function that returns the height of the row detail panel.<br><br><strong>Signature:</strong><br><code>function(params: GridRowParams) =&gt; number</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a>.<br> <em>returns</em> (number): The height in pixels.",
-    "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
+    "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowClassNameParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-class-name-params/\">GridRowClassNameParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
     "getRowHeight": "Function that sets the row height per row.<br><br><strong>Signature:</strong><br><code>function(params: GridRowHeightParams) =&gt; GridRowHeightReturnValue</code><br><em>params:</em> With all properties from GridRowHeightParams.<br> <em>returns</em> (GridRowHeightReturnValue): The row height value. If <code>null</code> or <code>undefined</code> then the default row height is applied.",
     "getRowId": "Return the id of a given GridRowModel.",
+    "getRowSpacing": "Function that allows to specify margins between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row margin values.",
     "getTreeDataPath": "Determines the path of a row in the tree data. For instance, a row with the path [&quot;A&quot;, &quot;B&quot;] is the child of the row with the path [&quot;A&quot;]. Note that all paths must contain at least one element.<br><br><strong>Signature:</strong><br><code>function(row: GridRowModel) =&gt; Array&lt;string&gt;</code><br><em>row:</em> The row from which we want the path.<br> <em>returns</em> (Array<string>): The path to the row.",
     "groupingColDef": "The grouping column used by the tree data.",
     "headerHeight": "Set the height in pixel of the column headers in the grid.",
diff --git a/docs/translations/api-docs/data-grid/data-grid-pt.json b/docs/translations/api-docs/data-grid/data-grid-pt.json
index e28ed99a44fd..c2f8ba116edc 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pt.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pt.json
@@ -30,9 +30,10 @@
     "filterModel": "Set the filter model of the grid.",
     "getCellClassName": "Function that applies CSS classes dynamically on cells.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the cell.",
     "getDetailPanelContent": "Function that returns the element to render in row detail.<br><br><strong>Signature:</strong><br><code>function(params: GridRowParams) =&gt; JSX.Element</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a>.<br> <em>returns</em> (JSX.Element): The row detail element.",
-    "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
+    "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowClassNameParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-class-name-params/\">GridRowClassNameParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
     "getRowHeight": "Function that sets the row height per row.<br><br><strong>Signature:</strong><br><code>function(params: GridRowHeightParams) =&gt; GridRowHeightReturnValue</code><br><em>params:</em> With all properties from GridRowHeightParams.<br> <em>returns</em> (GridRowHeightReturnValue): The row height value. If <code>null</code> or <code>undefined</code> then the default row height is applied.",
     "getRowId": "Return the id of a given GridRowModel.",
+    "getRowSpacing": "Function that allows to specify margins between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row margin values.",
     "headerHeight": "Set the height in pixel of the column headers in the grid.",
     "hideFooter": "If <code>true</code>, the footer component is hidden.",
     "hideFooterPagination": "If <code>true</code>, the pagination component in the footer is hidden.",
diff --git a/docs/translations/api-docs/data-grid/data-grid-zh.json b/docs/translations/api-docs/data-grid/data-grid-zh.json
index e28ed99a44fd..c2f8ba116edc 100644
--- a/docs/translations/api-docs/data-grid/data-grid-zh.json
+++ b/docs/translations/api-docs/data-grid/data-grid-zh.json
@@ -30,9 +30,10 @@
     "filterModel": "Set the filter model of the grid.",
     "getCellClassName": "Function that applies CSS classes dynamically on cells.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the cell.",
     "getDetailPanelContent": "Function that returns the element to render in row detail.<br><br><strong>Signature:</strong><br><code>function(params: GridRowParams) =&gt; JSX.Element</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a>.<br> <em>returns</em> (JSX.Element): The row detail element.",
-    "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
+    "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowClassNameParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-class-name-params/\">GridRowClassNameParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
     "getRowHeight": "Function that sets the row height per row.<br><br><strong>Signature:</strong><br><code>function(params: GridRowHeightParams) =&gt; GridRowHeightReturnValue</code><br><em>params:</em> With all properties from GridRowHeightParams.<br> <em>returns</em> (GridRowHeightReturnValue): The row height value. If <code>null</code> or <code>undefined</code> then the default row height is applied.",
     "getRowId": "Return the id of a given GridRowModel.",
+    "getRowSpacing": "Function that allows to specify margins between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row margin values.",
     "headerHeight": "Set the height in pixel of the column headers in the grid.",
     "hideFooter": "If <code>true</code>, the footer component is hidden.",
     "hideFooterPagination": "If <code>true</code>, the pagination component in the footer is hidden.",
diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json
index e28ed99a44fd..c2f8ba116edc 100644
--- a/docs/translations/api-docs/data-grid/data-grid.json
+++ b/docs/translations/api-docs/data-grid/data-grid.json
@@ -30,9 +30,10 @@
     "filterModel": "Set the filter model of the grid.",
     "getCellClassName": "Function that applies CSS classes dynamically on cells.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the cell.",
     "getDetailPanelContent": "Function that returns the element to render in row detail.<br><br><strong>Signature:</strong><br><code>function(params: GridRowParams) =&gt; JSX.Element</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a>.<br> <em>returns</em> (JSX.Element): The row detail element.",
-    "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
+    "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowClassNameParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-class-name-params/\">GridRowClassNameParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
     "getRowHeight": "Function that sets the row height per row.<br><br><strong>Signature:</strong><br><code>function(params: GridRowHeightParams) =&gt; GridRowHeightReturnValue</code><br><em>params:</em> With all properties from GridRowHeightParams.<br> <em>returns</em> (GridRowHeightReturnValue): The row height value. If <code>null</code> or <code>undefined</code> then the default row height is applied.",
     "getRowId": "Return the id of a given GridRowModel.",
+    "getRowSpacing": "Function that allows to specify margins between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row margin values.",
     "headerHeight": "Set the height in pixel of the column headers in the grid.",
     "hideFooter": "If <code>true</code>, the footer component is hidden.",
     "hideFooterPagination": "If <code>true</code>, the pagination component in the footer is hidden.",
diff --git a/packages/grid/_modules_/grid/components/GridRow.tsx b/packages/grid/_modules_/grid/components/GridRow.tsx
index 2c0310c23b16..d4dc35424bb3 100644
--- a/packages/grid/_modules_/grid/components/GridRow.tsx
+++ b/packages/grid/_modules_/grid/components/GridRow.tsx
@@ -15,6 +15,8 @@ import { GridStateColDef } from '../models/colDef/gridColDef';
 import { GridCellIdentifier } from '../hooks/features/focus/gridFocusState';
 import { gridColumnsMetaSelector } from '../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { GridRowClassNameParams } from '../models/params/gridRowParams';
+import { useCurrentPageRows } from '../hooks/utils/useCurrentPageRows';
 
 export interface GridRowProps {
   rowId: GridRowId;
@@ -88,6 +90,7 @@ function GridRow(props: React.HTMLAttributes<HTMLDivElement> & GridRowProps) {
   const ariaRowIndex = index + 2; // 1 for the header row and 1 as it's 1-based
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
+  const currentPage = useCurrentPageRows(apiRef, rootProps);
   const columnsMeta = useGridSelector(apiRef, gridColumnsMetaSelector);
   const { hasScrollX, hasScrollY } = apiRef.current.getRootDimensions() ?? {
     hasScrollX: false,
@@ -139,9 +142,18 @@ function GridRow(props: React.HTMLAttributes<HTMLDivElement> & GridRowProps) {
     ...styleProp,
   };
 
-  const rowClassName =
-    typeof rootProps.getRowClassName === 'function' &&
-    rootProps.getRowClassName(apiRef.current.getRowParams(rowId));
+  let rowClassName: string | null = null;
+
+  if (typeof rootProps.getRowClassName === 'function') {
+    const indexRelativeToCurrentPage = index - currentPage.range!.firstRowIndex;
+    const rowParams: GridRowClassNameParams = {
+      ...apiRef.current.getRowParams(rowId),
+      isFirstVisible: indexRelativeToCurrentPage === 0,
+      isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+    };
+
+    rowClassName = rootProps.getRowClassName(rowParams);
+  }
 
   const cells: JSX.Element[] = [];
 
diff --git a/packages/grid/_modules_/grid/hooks/features/rows/useGridRowSpacing.ts b/packages/grid/_modules_/grid/hooks/features/rows/useGridRowSpacing.ts
new file mode 100644
index 000000000000..f7eef63ec619
--- /dev/null
+++ b/packages/grid/_modules_/grid/hooks/features/rows/useGridRowSpacing.ts
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { GridPreProcessor, useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { GridApiRef } from '../../../models/api/gridApiRef';
+import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { useCurrentPageRows } from '../../utils/useCurrentPageRows';
+import { GridRowSpacingParams } from '../../../models/params/gridRowParams';
+
+/**
+ * @requires useGridPage (state)
+ * @requires useGridPageSize (state)
+ * @requires useGridFilter (state)
+ * @requires useGridColumns (state, method)
+ * @requires useGridRows (state, method)
+ */
+export const useGridRowSpacing = (
+  apiRef: GridApiRef,
+  props: Pick<DataGridProcessedProps, 'getRowSpacing' | 'pagination' | 'paginationMode'>,
+) => {
+  const currentPage = useCurrentPageRows(apiRef, props);
+
+  const { getRowSpacing } = props;
+
+  const addRowSpacing = React.useCallback<GridPreProcessor<'rowHeight'>>(
+    (initialValue, row) => {
+      if (!getRowSpacing) {
+        return initialValue;
+      }
+
+      const index = currentPage.lookup[row.id];
+      const params: GridRowSpacingParams = {
+        ...row,
+        isFirstVisible: index === 0,
+        isLastVisible: index === currentPage.rows.length - 1,
+      };
+
+      const spacing = getRowSpacing(params);
+      return { ...initialValue, spacingTop: spacing.top ?? 0, spacingBottom: spacing.bottom ?? 0 };
+    },
+    [currentPage.lookup, currentPage.rows.length, getRowSpacing],
+  );
+
+  useGridRegisterPreProcessor(apiRef, 'rowHeight', addRowSpacing);
+};
diff --git a/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualScroller.tsx
index 932fb9856856..ad0ccf76cf17 100644
--- a/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualScroller.tsx
+++ b/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -310,7 +310,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => {
           firstColumnToRender={firstColumnToRender}
           lastColumnToRender={lastColumnToRender}
           selected={isSelected}
-          index={currentPage.range.firstRowIndex + nextRenderContext.firstRowIndex! + i}
+          index={currentPage.range.firstRowIndex + firstRowToRender + i}
           containerWidth={availableSpace}
           {...(typeof getRowProps === 'function' ? getRowProps(id, model) : {})}
           {...rootProps.componentsProps?.row}
diff --git a/packages/grid/_modules_/grid/hooks/utils/useCurrentPageRows.ts b/packages/grid/_modules_/grid/hooks/utils/useCurrentPageRows.ts
index cfdd9f29fe22..f4445a56009c 100644
--- a/packages/grid/_modules_/grid/hooks/utils/useCurrentPageRows.ts
+++ b/packages/grid/_modules_/grid/hooks/utils/useCurrentPageRows.ts
@@ -6,6 +6,7 @@ import {
 } from '../features/pagination/gridPaginationSelector';
 import { gridVisibleSortedRowEntriesSelector } from '../features/filter/gridFilterSelector';
 import type { GridApiRef, GridRowEntry } from '../../models';
+import { GridRowId } from '../../models/gridRows';
 
 export const getCurrentPageRows = (
   apiRef: GridApiRef,
@@ -41,11 +42,19 @@ export const useCurrentPageRows = (
 ) => {
   const response = getCurrentPageRows(apiRef, props);
 
+  const lookup = React.useMemo(() => {
+    return response.rows.reduce((acc, { id }, index) => {
+      acc[id] = index;
+      return acc;
+    }, {} as Record<GridRowId, number>);
+  }, [response.rows]);
+
   return React.useMemo(
     () => ({
       rows: response.rows,
       range: response.range,
+      lookup,
     }),
-    [response.rows, response.range],
+    [response.rows, response.range, lookup],
   );
 };
diff --git a/packages/grid/_modules_/grid/models/gridRows.ts b/packages/grid/_modules_/grid/models/gridRows.ts
index 95471991312d..0cafb1244138 100644
--- a/packages/grid/_modules_/grid/models/gridRows.ts
+++ b/packages/grid/_modules_/grid/models/gridRows.ts
@@ -80,7 +80,16 @@ export type GridRowsLookup = Record<GridRowId, GridRowModel>;
  */
 export type GridRowId = string | number;
 
-export type GridRowEntry = { id: GridRowId; model: GridRowModel };
+export interface GridRowEntry {
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  id: GridRowId;
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  model: GridRowModel;
+}
 
 /**
  * The function to retrieve the id of a [[GridRowModel]].
diff --git a/packages/grid/_modules_/grid/models/params/gridRowParams.ts b/packages/grid/_modules_/grid/models/params/gridRowParams.ts
index e3631e3aa86c..374600327d25 100644
--- a/packages/grid/_modules_/grid/models/params/gridRowParams.ts
+++ b/packages/grid/_modules_/grid/models/params/gridRowParams.ts
@@ -28,6 +28,20 @@ export interface GridRowParams<R extends GridRowModel = GridRowModel> {
   getValue: (id: GridRowId, field: string) => GridCellValue;
 }
 
+/**
+ * Object passed as parameter in the row getRowClassName callback.
+ */
+export interface GridRowClassNameParams extends GridRowParams {
+  /**
+   * Whether this row is the first visible or not.
+   */
+  isFirstVisible: boolean;
+  /**
+   * Whether this row is the last visible or not.
+   */
+  isLastVisible: boolean;
+}
+
 /**
  * Object passed as parameter in the row getRowHeight callback.
  */
@@ -42,3 +56,25 @@ export interface GridRowHeightParams extends GridRowEntry {
  * The getRowHeight return value.
  */
 export type GridRowHeightReturnValue = number | null | undefined;
+
+/**
+ * Object passed as parameter in the row getRowSpacing callback.
+ */
+export interface GridRowSpacingParams extends GridRowEntry {
+  /**
+   * Whether this row is the first visible or not.
+   */
+  isFirstVisible: boolean;
+  /**
+   * Whether this row is the last visible or not.
+   */
+  isLastVisible: boolean;
+}
+
+/**
+ * The getRowSpacing return value.
+ */
+export interface GridRowSpacing {
+  top?: number;
+  bottom?: number;
+}
diff --git a/packages/grid/_modules_/grid/models/props/DataGridProps.ts b/packages/grid/_modules_/grid/models/props/DataGridProps.ts
index 62b82d0dc3a3..5e72fde72858 100644
--- a/packages/grid/_modules_/grid/models/props/DataGridProps.ts
+++ b/packages/grid/_modules_/grid/models/props/DataGridProps.ts
@@ -18,6 +18,9 @@ import {
   GridRowHeightParams,
   GridRowHeightReturnValue,
   GridRowParams,
+  GridRowClassNameParams,
+  GridRowSpacing,
+  GridRowSpacingParams,
 } from '../params';
 import { GridFilterModel } from '../gridFilterModel';
 import { GridInputSelectionModel, GridSelectionModel } from '../gridSelectionModel';
@@ -388,16 +391,22 @@ export interface DataGridPropsWithoutDefaultValue extends CommonProps {
   getCellClassName?: (params: GridCellParams) => string;
   /**
    * Function that applies CSS classes dynamically on rows.
-   * @param {GridRowParams} params With all properties from [[GridRowParams]].
+   * @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
    * @returns {string} The CSS class to apply to the row.
    */
-  getRowClassName?: (params: GridRowParams) => string;
+  getRowClassName?: (params: GridRowClassNameParams) => string;
   /**
    * Function that sets the row height per row.
    * @param {GridRowHeightParams} params With all properties from [[GridRowHeightParams]].
    * @returns {GridRowHeightReturnValue} The row height value. If `null` or `undefined` then the default row height is applied.
    */
   getRowHeight?: (params: GridRowHeightParams) => GridRowHeightReturnValue;
+  /**
+   * Function that allows to specify margins between rows.
+   * @param {GridRowSpacingParams} params With all properties from [[GridRowSpacingParams]].
+   * @returns {GridRowSpacing} The row margin values.
+   */
+  getRowSpacing?: (params: GridRowSpacingParams) => GridRowSpacing;
   /**
    * Function that returns the element to render in row detail.
    * @param {GridRowParams} params With all properties from [[GridRowParams]].
diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro.tsx
index 4f40d856fcfe..48898399dc21 100644
--- a/packages/grid/x-data-grid-pro/src/DataGridPro.tsx
+++ b/packages/grid/x-data-grid-pro/src/DataGridPro.tsx
@@ -304,7 +304,7 @@ DataGridProRaw.propTypes = {
   getDetailPanelHeight: PropTypes.func,
   /**
    * Function that applies CSS classes dynamically on rows.
-   * @param {GridRowParams} params With all properties from [[GridRowParams]].
+   * @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
    * @returns {string} The CSS class to apply to the row.
    */
   getRowClassName: PropTypes.func,
@@ -318,6 +318,12 @@ DataGridProRaw.propTypes = {
    * Return the id of a given [[GridRowModel]].
    */
   getRowId: PropTypes.func,
+  /**
+   * Function that allows to specify margins between rows.
+   * @param {GridRowSpacingParams} params With all properties from [[GridRowSpacingParams]].
+   * @returns {GridRowSpacing} The row margin values.
+   */
+  getRowSpacing: PropTypes.func,
   /**
    * Determines the path of a row in the tree data.
    * For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"].
diff --git a/packages/grid/x-data-grid-pro/src/DataGridProVirtualScroller.tsx b/packages/grid/x-data-grid-pro/src/DataGridProVirtualScroller.tsx
index b328e13f50e5..01c994337598 100644
--- a/packages/grid/x-data-grid-pro/src/DataGridProVirtualScroller.tsx
+++ b/packages/grid/x-data-grid-pro/src/DataGridProVirtualScroller.tsx
@@ -254,17 +254,6 @@ const DataGridProVirtualScroller = React.forwardRef<
     minHeight: shouldExtendContent ? '100%' : 'auto',
   };
 
-  const rowsLookup = React.useMemo(() => {
-    if (rootProps.getDetailPanelContent == null) {
-      return null;
-    }
-
-    return currentPage.rows.reduce((acc, { id }, index) => {
-      acc[id] = index;
-      return acc;
-    }, {} as Record<GridRowId, number>);
-  }, [currentPage.rows, rootProps.getDetailPanelContent]);
-
   const getDetailPanels = () => {
     const panels: React.ReactNode[] = [];
 
@@ -280,11 +269,11 @@ const DataGridProVirtualScroller = React.forwardRef<
       const content = detailPanelsContent[id];
 
       // Check if the id exists in the current page
-      const exists = rowsLookup![id] !== undefined;
+      const exists = currentPage.lookup![id] !== undefined;
 
       if (React.isValidElement(content) && exists) {
         const height = detailPanelsHeights[id];
-        const rowIndex = rowsLookup![id];
+        const rowIndex = currentPage.lookup[id];
         const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id);
 
         panels.push(
diff --git a/packages/grid/x-data-grid-pro/src/useDataGridProComponent.tsx b/packages/grid/x-data-grid-pro/src/useDataGridProComponent.tsx
index f1b172552c47..f4d37af118c0 100644
--- a/packages/grid/x-data-grid-pro/src/useDataGridProComponent.tsx
+++ b/packages/grid/x-data-grid-pro/src/useDataGridProComponent.tsx
@@ -34,6 +34,7 @@ import { useGridColumnPinning } from '../../_modules_/grid/hooks/features/column
 import { useGridStatePersistence } from '../../_modules_/grid/hooks/features/statePersistence/useGridStatePersistence';
 import { useGridDetailPanel } from '../../_modules_/grid/hooks/features/detailPanel/useGridDetailPanel';
 import { useGridDetailPanelCache } from '../../_modules_/grid/hooks/features/detailPanel/useGridDetailPanelCache';
+import { useGridRowSpacing } from '../../_modules_/grid/hooks/features/rows/useGridRowSpacing';
 
 export const useDataGridProComponent = (
   inputApiRef: GridApiRef | undefined,
@@ -59,6 +60,7 @@ export const useDataGridProComponent = (
   useGridColumnResize(apiRef, props);
   useGridPageSize(apiRef, props);
   useGridPage(apiRef, props);
+  useGridRowSpacing(apiRef, props);
   useGridRowsMeta(apiRef, props);
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
diff --git a/packages/grid/x-data-grid/src/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid.tsx
index 878fafc8cb58..f3fcd508f6d0 100644
--- a/packages/grid/x-data-grid/src/DataGrid.tsx
+++ b/packages/grid/x-data-grid/src/DataGrid.tsx
@@ -211,7 +211,7 @@ DataGridRaw.propTypes = {
   getDetailPanelContent: PropTypes.func,
   /**
    * Function that applies CSS classes dynamically on rows.
-   * @param {GridRowParams} params With all properties from [[GridRowParams]].
+   * @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
    * @returns {string} The CSS class to apply to the row.
    */
   getRowClassName: PropTypes.func,
@@ -225,6 +225,12 @@ DataGridRaw.propTypes = {
    * Return the id of a given [[GridRowModel]].
    */
   getRowId: PropTypes.func,
+  /**
+   * Function that allows to specify margins between rows.
+   * @param {GridRowSpacingParams} params With all properties from [[GridRowSpacingParams]].
+   * @returns {GridRowSpacing} The row margin values.
+   */
+  getRowSpacing: PropTypes.func,
   /**
    * Set the height in pixel of the column headers in the grid.
    * @default 56
diff --git a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx
index 96ea30bb7881..05fd1469a968 100644
--- a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx
+++ b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx
@@ -3,7 +3,13 @@ import { createRenderer, fireEvent, screen } from '@mui/monorepo/test/utils';
 import { expect } from 'chai';
 import { spy, stub } from 'sinon';
 import Portal from '@mui/material/Portal';
-import { DataGrid, DataGridProps, GridActionsCellItem } from '@mui/x-data-grid';
+import clsx from 'clsx';
+import {
+  DataGrid,
+  DataGridProps,
+  GridActionsCellItem,
+  GridRowClassNameParams,
+} from '@mui/x-data-grid';
 import { getColumnValues, getRow } from 'test/utils/helperFn';
 import { getData } from 'storybook/src/data/data-service';
 import { COMPACT_DENSITY_FACTOR } from 'packages/grid/_modules_/grid/hooks/features/density/useGridDensity';
@@ -97,17 +103,44 @@ describe('<DataGrid /> - Rows', () => {
     expect(handleRowClick.callCount).to.equal(1);
   });
 
-  it('should apply the CSS class returned by getRowClassName', () => {
-    const getRowId = (row) => `${row.clientId}`;
-    const handleRowClassName = (params) => (params.row.age < 20 ? 'under-age' : '');
-    render(
-      <div style={{ width: 300, height: 300 }}>
-        <DataGrid getRowClassName={handleRowClassName} getRowId={getRowId} {...baselineProps} />
-      </div>,
-    );
-    expect(getRow(0)).to.have.class('under-age');
-    expect(getRow(1)).to.have.class('under-age');
-    expect(getRow(2)).not.to.have.class('under-age');
+  describe('prop: getRowClassName', () => {
+    it('should apply the CSS class returned by getRowClassName', () => {
+      const getRowId = (row: any) => `${row.clientId}`;
+      const handleRowClassName = (params: GridRowClassNameParams) =>
+        params.row.age < 20 ? 'under-age' : '';
+      render(
+        <div style={{ width: 300, height: 300 }}>
+          <DataGrid getRowClassName={handleRowClassName} getRowId={getRowId} {...baselineProps} />
+        </div>,
+      );
+      expect(getRow(0)).to.have.class('under-age');
+      expect(getRow(1)).to.have.class('under-age');
+      expect(getRow(2)).not.to.have.class('under-age');
+    });
+
+    it('should call with isFirstVisible=true in the first row and isLastVisible=true in the last', () => {
+      const { rows, columns } = getData(4, 2);
+      const getRowClassName = (params: GridRowClassNameParams) =>
+        clsx({ first: params.isFirstVisible, last: params.isLastVisible });
+      render(
+        <div style={{ width: 300, height: 300 }}>
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            getRowClassName={getRowClassName}
+            pageSize={3}
+            rowsPerPageOptions={[3]}
+          />
+        </div>,
+      );
+      expect(getRow(0)).to.have.class('first');
+      expect(getRow(1)).not.to.have.class('first');
+      expect(getRow(1)).not.to.have.class('last');
+      expect(getRow(2)).to.have.class('last');
+      fireEvent.click(screen.getByRole('button', { name: /next page/i }));
+      expect(getRow(3)).to.have.class('first');
+      expect(getRow(3)).to.have.class('last');
+    });
   });
 
   describe('columnType: actions', () => {
@@ -221,7 +254,7 @@ describe('<DataGrid /> - Rows', () => {
     });
   });
 
-  describe('Row height', () => {
+  describe('prop: getRowHeight', () => {
     before(function beforeHook() {
       if (isJSDOM) {
         // Need layouting
@@ -293,4 +326,99 @@ describe('<DataGrid /> - Rows', () => {
       expect(getRow(2).clientHeight).to.equal(30);
     });
   });
+
+  describe('prop: getRowSpacing', () => {
+    const { rows, columns } = getData(4, 2);
+
+    const TestCase = (props: Partial<DataGridProps>) => {
+      return (
+        <div style={{ width: 300, height: 300 }}>
+          <DataGrid rows={rows} columns={columns} {...props} />
+        </div>
+      );
+    };
+
+    it('should call with the correct params', () => {
+      const getRowSpacing = stub().returns({});
+      render(<TestCase getRowSpacing={getRowSpacing} pageSize={2} rowsPerPageOptions={[2]} />);
+
+      expect(getRowSpacing.args[0][0]).to.deep.equal({
+        isFirstVisible: true,
+        isLastVisible: false,
+        id: 0,
+        model: rows[0],
+      });
+      expect(getRowSpacing.args[1][0]).to.deep.equal({
+        isFirstVisible: false,
+        isLastVisible: true,
+        id: 1,
+        model: rows[1],
+      });
+
+      getRowSpacing.resetHistory();
+      fireEvent.click(screen.getByRole('button', { name: /next page/i }));
+
+      expect(getRowSpacing.args[0][0]).to.deep.equal({
+        isFirstVisible: true,
+        isLastVisible: false,
+        id: 2,
+        model: rows[2],
+      });
+      expect(getRowSpacing.args[1][0]).to.deep.equal({
+        isFirstVisible: false,
+        isLastVisible: true,
+        id: 3,
+        model: rows[3],
+      });
+    });
+
+    it('should consider the spacing when computing the content size', function test() {
+      if (isJSDOM) {
+        // Need layouting
+        this.skip();
+      }
+      const spacingTop = 5;
+      const spacingBottom = 10;
+      const rowHeight = 50;
+      render(
+        <TestCase
+          rowHeight={rowHeight}
+          getRowSpacing={() => ({ top: spacingTop, bottom: spacingBottom })}
+        />,
+      );
+      const virtualScrollerContent = document.querySelector('.MuiDataGrid-virtualScrollerContent');
+      const expectedHeight = rows.length * (rowHeight + spacingTop + spacingBottom);
+      expect(virtualScrollerContent).toHaveInlineStyle({
+        width: 'auto',
+        height: `${expectedHeight}px`,
+      });
+    });
+
+    it('should update the content size when getRowSpacing is removed', function test() {
+      if (isJSDOM) {
+        // Need layouting
+        this.skip();
+      }
+      const spacingTop = 5;
+      const spacingBottom = 10;
+      const rowHeight = 50;
+      const { setProps } = render(
+        <TestCase
+          rowHeight={rowHeight}
+          getRowSpacing={() => ({ top: spacingTop, bottom: spacingBottom })}
+        />,
+      );
+      const virtualScrollerContent = document.querySelector('.MuiDataGrid-virtualScrollerContent');
+      const expectedHeight = rows.length * (rowHeight + spacingTop + spacingBottom);
+      expect(virtualScrollerContent).toHaveInlineStyle({
+        width: 'auto',
+        height: `${expectedHeight}px`,
+      });
+      setProps({ getRowSpacing: null });
+      expect(virtualScrollerContent).toHaveInlineStyle({
+        width: 'auto',
+        height: `${rows.length * rowHeight}px`,
+      });
+    });
+  });
 });
diff --git a/packages/grid/x-data-grid/src/useDataGridComponent.tsx b/packages/grid/x-data-grid/src/useDataGridComponent.tsx
index 3d786ca54a92..0d9389b648e6 100644
--- a/packages/grid/x-data-grid/src/useDataGridComponent.tsx
+++ b/packages/grid/x-data-grid/src/useDataGridComponent.tsx
@@ -25,6 +25,7 @@ import { useGridEvents } from '../../_modules_/grid/hooks/features/events/useGri
 import { useGridDimensions } from '../../_modules_/grid/hooks/features/dimensions/useGridDimensions';
 import { useGridRowsMeta } from '../../_modules_/grid/hooks/features/rows/useGridRowsMeta';
 import { useGridStatePersistence } from '../../_modules_/grid/hooks/features/statePersistence/useGridStatePersistence';
+import { useGridRowSpacing } from '../../_modules_/grid/hooks/features/rows/useGridRowSpacing';
 
 export const useDataGridComponent = (props: DataGridProcessedProps) => {
   const apiRef = useGridInitialization(undefined, props);
@@ -40,6 +41,7 @@ export const useDataGridComponent = (props: DataGridProcessedProps) => {
   useGridFilter(apiRef, props);
   useGridPageSize(apiRef, props);
   useGridPage(apiRef, props);
+  useGridRowSpacing(apiRef, props);
   useGridRowsMeta(apiRef, props);
   useGridScroll(apiRef, props);
   useGridColumnMenu(apiRef);
diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json
index 113a2d220c00..983d886a562b 100644
--- a/scripts/x-data-grid-pro.exports.json
+++ b/scripts/x-data-grid-pro.exports.json
@@ -302,10 +302,11 @@
   { "name": "GridRootProps", "kind": "Interface" },
   { "name": "GridRow", "kind": "ExportSpecifier" },
   { "name": "GridRowApi", "kind": "Interface" },
+  { "name": "GridRowClassNameParams", "kind": "Interface" },
   { "name": "GridRowCount", "kind": "ExportSpecifier" },
   { "name": "gridRowCountSelector", "kind": "Variable" },
   { "name": "GridRowData", "kind": "TypeAlias" },
-  { "name": "GridRowEntry", "kind": "TypeAlias" },
+  { "name": "GridRowEntry", "kind": "Interface" },
   { "name": "GridRowEventLookup", "kind": "Interface" },
   { "name": "GridRowGroupingApi", "kind": "Interface" },
   { "name": "GridRowGroupingInitialState", "kind": "Interface" },
@@ -333,6 +334,8 @@
   { "name": "GridRowsMeta", "kind": "Interface" },
   { "name": "GridRowsMetaApi", "kind": "Interface" },
   { "name": "gridRowsMetaSelector", "kind": "Variable" },
+  { "name": "GridRowSpacing", "kind": "Interface" },
+  { "name": "GridRowSpacingParams", "kind": "Interface" },
   { "name": "GridRowsProp", "kind": "TypeAlias" },
   { "name": "GridRowsState", "kind": "Interface" },
   { "name": "gridRowsStateSelector", "kind": "Variable" },
diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json
index a81d48e5f641..da5307855249 100644
--- a/scripts/x-data-grid.exports.json
+++ b/scripts/x-data-grid.exports.json
@@ -302,10 +302,11 @@
   { "name": "GridRootProps", "kind": "Interface" },
   { "name": "GridRow", "kind": "ExportSpecifier" },
   { "name": "GridRowApi", "kind": "Interface" },
+  { "name": "GridRowClassNameParams", "kind": "Interface" },
   { "name": "GridRowCount", "kind": "ExportSpecifier" },
   { "name": "gridRowCountSelector", "kind": "Variable" },
   { "name": "GridRowData", "kind": "TypeAlias" },
-  { "name": "GridRowEntry", "kind": "TypeAlias" },
+  { "name": "GridRowEntry", "kind": "Interface" },
   { "name": "GridRowEventLookup", "kind": "Interface" },
   { "name": "GridRowGroupingApi", "kind": "Interface" },
   { "name": "GridRowGroupingInitialState", "kind": "Interface" },
@@ -333,6 +334,8 @@
   { "name": "GridRowsMeta", "kind": "Interface" },
   { "name": "GridRowsMetaApi", "kind": "Interface" },
   { "name": "gridRowsMetaSelector", "kind": "Variable" },
+  { "name": "GridRowSpacing", "kind": "Interface" },
+  { "name": "GridRowSpacingParams", "kind": "Interface" },
   { "name": "GridRowsProp", "kind": "TypeAlias" },
   { "name": "GridRowsState", "kind": "Interface" },
   { "name": "gridRowsStateSelector", "kind": "Variable" },

From 802bd07ddb8408d3ebde0cf118ad26d266d4e90b Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Mon, 7 Feb 2022 22:21:03 -0300
Subject: [PATCH 05/32] No 'margin'

---
 docs/pages/api-docs/data-grid/grid-row-class-name-params.md | 2 +-
 docs/pages/api-docs/data-grid/grid-row-spacing-params.md    | 2 +-
 docs/translations/api-docs/data-grid/data-grid-pro-pt.json  | 2 +-
 docs/translations/api-docs/data-grid/data-grid-pro-zh.json  | 2 +-
 docs/translations/api-docs/data-grid/data-grid-pro.json     | 2 +-
 docs/translations/api-docs/data-grid/data-grid-pt.json      | 2 +-
 docs/translations/api-docs/data-grid/data-grid-zh.json      | 2 +-
 docs/translations/api-docs/data-grid/data-grid.json         | 2 +-
 packages/grid/_modules_/grid/models/params/gridRowParams.ts | 6 +++---
 packages/grid/_modules_/grid/models/props/DataGridProps.ts  | 4 ++--
 packages/grid/x-data-grid-pro/src/DataGridPro.tsx           | 4 ++--
 packages/grid/x-data-grid/src/DataGrid.tsx                  | 4 ++--
 12 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/docs/pages/api-docs/data-grid/grid-row-class-name-params.md b/docs/pages/api-docs/data-grid/grid-row-class-name-params.md
index 11298856f19c..04093a7afcd4 100644
--- a/docs/pages/api-docs/data-grid/grid-row-class-name-params.md
+++ b/docs/pages/api-docs/data-grid/grid-row-class-name-params.md
@@ -1,6 +1,6 @@
 # GridRowClassNameParams Interface
 
-<p class="description">Object passed as parameter in the row getRowClassName callback.</p>
+<p class="description">Object passed as parameter in the row `getRowClassName` callback prop.</p>
 
 ## Import
 
diff --git a/docs/pages/api-docs/data-grid/grid-row-spacing-params.md b/docs/pages/api-docs/data-grid/grid-row-spacing-params.md
index 4625345be5ab..ed6aad8a2d29 100644
--- a/docs/pages/api-docs/data-grid/grid-row-spacing-params.md
+++ b/docs/pages/api-docs/data-grid/grid-row-spacing-params.md
@@ -1,6 +1,6 @@
 # GridRowSpacingParams Interface
 
-<p class="description">Object passed as parameter in the row getRowSpacing callback.</p>
+<p class="description">Object passed as parameter in the row `getRowSpacing` callback prop.</p>
 
 ## Import
 
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json
index 2bdd5556bec8..b74fb26288d3 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json
@@ -47,7 +47,7 @@
     "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowClassNameParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-class-name-params/\">GridRowClassNameParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
     "getRowHeight": "Function that sets the row height per row.<br><br><strong>Signature:</strong><br><code>function(params: GridRowHeightParams) =&gt; GridRowHeightReturnValue</code><br><em>params:</em> With all properties from GridRowHeightParams.<br> <em>returns</em> (GridRowHeightReturnValue): The row height value. If <code>null</code> or <code>undefined</code> then the default row height is applied.",
     "getRowId": "Return the id of a given GridRowModel.",
-    "getRowSpacing": "Function that allows to specify margins between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row margin values.",
+    "getRowSpacing": "Function that allows to specify the spacing between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row spacing values.",
     "getTreeDataPath": "Determines the path of a row in the tree data. For instance, a row with the path [&quot;A&quot;, &quot;B&quot;] is the child of the row with the path [&quot;A&quot;]. Note that all paths must contain at least one element.<br><br><strong>Signature:</strong><br><code>function(row: GridRowModel) =&gt; Array&lt;string&gt;</code><br><em>row:</em> The row from which we want the path.<br> <em>returns</em> (Array<string>): The path to the row.",
     "groupingColDef": "The grouping column used by the tree data.",
     "headerHeight": "Set the height in pixel of the column headers in the grid.",
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json
index 2bdd5556bec8..b74fb26288d3 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json
@@ -47,7 +47,7 @@
     "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowClassNameParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-class-name-params/\">GridRowClassNameParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
     "getRowHeight": "Function that sets the row height per row.<br><br><strong>Signature:</strong><br><code>function(params: GridRowHeightParams) =&gt; GridRowHeightReturnValue</code><br><em>params:</em> With all properties from GridRowHeightParams.<br> <em>returns</em> (GridRowHeightReturnValue): The row height value. If <code>null</code> or <code>undefined</code> then the default row height is applied.",
     "getRowId": "Return the id of a given GridRowModel.",
-    "getRowSpacing": "Function that allows to specify margins between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row margin values.",
+    "getRowSpacing": "Function that allows to specify the spacing between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row spacing values.",
     "getTreeDataPath": "Determines the path of a row in the tree data. For instance, a row with the path [&quot;A&quot;, &quot;B&quot;] is the child of the row with the path [&quot;A&quot;]. Note that all paths must contain at least one element.<br><br><strong>Signature:</strong><br><code>function(row: GridRowModel) =&gt; Array&lt;string&gt;</code><br><em>row:</em> The row from which we want the path.<br> <em>returns</em> (Array<string>): The path to the row.",
     "groupingColDef": "The grouping column used by the tree data.",
     "headerHeight": "Set the height in pixel of the column headers in the grid.",
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json
index 2bdd5556bec8..b74fb26288d3 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro.json
@@ -47,7 +47,7 @@
     "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowClassNameParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-class-name-params/\">GridRowClassNameParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
     "getRowHeight": "Function that sets the row height per row.<br><br><strong>Signature:</strong><br><code>function(params: GridRowHeightParams) =&gt; GridRowHeightReturnValue</code><br><em>params:</em> With all properties from GridRowHeightParams.<br> <em>returns</em> (GridRowHeightReturnValue): The row height value. If <code>null</code> or <code>undefined</code> then the default row height is applied.",
     "getRowId": "Return the id of a given GridRowModel.",
-    "getRowSpacing": "Function that allows to specify margins between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row margin values.",
+    "getRowSpacing": "Function that allows to specify the spacing between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row spacing values.",
     "getTreeDataPath": "Determines the path of a row in the tree data. For instance, a row with the path [&quot;A&quot;, &quot;B&quot;] is the child of the row with the path [&quot;A&quot;]. Note that all paths must contain at least one element.<br><br><strong>Signature:</strong><br><code>function(row: GridRowModel) =&gt; Array&lt;string&gt;</code><br><em>row:</em> The row from which we want the path.<br> <em>returns</em> (Array<string>): The path to the row.",
     "groupingColDef": "The grouping column used by the tree data.",
     "headerHeight": "Set the height in pixel of the column headers in the grid.",
diff --git a/docs/translations/api-docs/data-grid/data-grid-pt.json b/docs/translations/api-docs/data-grid/data-grid-pt.json
index c2f8ba116edc..854c6a132a83 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pt.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pt.json
@@ -33,7 +33,7 @@
     "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowClassNameParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-class-name-params/\">GridRowClassNameParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
     "getRowHeight": "Function that sets the row height per row.<br><br><strong>Signature:</strong><br><code>function(params: GridRowHeightParams) =&gt; GridRowHeightReturnValue</code><br><em>params:</em> With all properties from GridRowHeightParams.<br> <em>returns</em> (GridRowHeightReturnValue): The row height value. If <code>null</code> or <code>undefined</code> then the default row height is applied.",
     "getRowId": "Return the id of a given GridRowModel.",
-    "getRowSpacing": "Function that allows to specify margins between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row margin values.",
+    "getRowSpacing": "Function that allows to specify the spacing between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row spacing values.",
     "headerHeight": "Set the height in pixel of the column headers in the grid.",
     "hideFooter": "If <code>true</code>, the footer component is hidden.",
     "hideFooterPagination": "If <code>true</code>, the pagination component in the footer is hidden.",
diff --git a/docs/translations/api-docs/data-grid/data-grid-zh.json b/docs/translations/api-docs/data-grid/data-grid-zh.json
index c2f8ba116edc..854c6a132a83 100644
--- a/docs/translations/api-docs/data-grid/data-grid-zh.json
+++ b/docs/translations/api-docs/data-grid/data-grid-zh.json
@@ -33,7 +33,7 @@
     "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowClassNameParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-class-name-params/\">GridRowClassNameParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
     "getRowHeight": "Function that sets the row height per row.<br><br><strong>Signature:</strong><br><code>function(params: GridRowHeightParams) =&gt; GridRowHeightReturnValue</code><br><em>params:</em> With all properties from GridRowHeightParams.<br> <em>returns</em> (GridRowHeightReturnValue): The row height value. If <code>null</code> or <code>undefined</code> then the default row height is applied.",
     "getRowId": "Return the id of a given GridRowModel.",
-    "getRowSpacing": "Function that allows to specify margins between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row margin values.",
+    "getRowSpacing": "Function that allows to specify the spacing between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row spacing values.",
     "headerHeight": "Set the height in pixel of the column headers in the grid.",
     "hideFooter": "If <code>true</code>, the footer component is hidden.",
     "hideFooterPagination": "If <code>true</code>, the pagination component in the footer is hidden.",
diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json
index c2f8ba116edc..854c6a132a83 100644
--- a/docs/translations/api-docs/data-grid/data-grid.json
+++ b/docs/translations/api-docs/data-grid/data-grid.json
@@ -33,7 +33,7 @@
     "getRowClassName": "Function that applies CSS classes dynamically on rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowClassNameParams) =&gt; string</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-class-name-params/\">GridRowClassNameParams</a>.<br> <em>returns</em> (string): The CSS class to apply to the row.",
     "getRowHeight": "Function that sets the row height per row.<br><br><strong>Signature:</strong><br><code>function(params: GridRowHeightParams) =&gt; GridRowHeightReturnValue</code><br><em>params:</em> With all properties from GridRowHeightParams.<br> <em>returns</em> (GridRowHeightReturnValue): The row height value. If <code>null</code> or <code>undefined</code> then the default row height is applied.",
     "getRowId": "Return the id of a given GridRowModel.",
-    "getRowSpacing": "Function that allows to specify margins between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row margin values.",
+    "getRowSpacing": "Function that allows to specify the spacing between rows.<br><br><strong>Signature:</strong><br><code>function(params: GridRowSpacingParams) =&gt; GridRowSpacing</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-spacing-params/\">GridRowSpacingParams</a>.<br> <em>returns</em> (GridRowSpacing): The row spacing values.",
     "headerHeight": "Set the height in pixel of the column headers in the grid.",
     "hideFooter": "If <code>true</code>, the footer component is hidden.",
     "hideFooterPagination": "If <code>true</code>, the pagination component in the footer is hidden.",
diff --git a/packages/grid/_modules_/grid/models/params/gridRowParams.ts b/packages/grid/_modules_/grid/models/params/gridRowParams.ts
index 374600327d25..9942e1ee8854 100644
--- a/packages/grid/_modules_/grid/models/params/gridRowParams.ts
+++ b/packages/grid/_modules_/grid/models/params/gridRowParams.ts
@@ -29,7 +29,7 @@ export interface GridRowParams<R extends GridRowModel = GridRowModel> {
 }
 
 /**
- * Object passed as parameter in the row getRowClassName callback.
+ * Object passed as parameter in the row `getRowClassName` callback prop.
  */
 export interface GridRowClassNameParams extends GridRowParams {
   /**
@@ -43,7 +43,7 @@ export interface GridRowClassNameParams extends GridRowParams {
 }
 
 /**
- * Object passed as parameter in the row getRowHeight callback.
+ * Object passed as parameter in the row `getRowHeight` callback prop.
  */
 export interface GridRowHeightParams extends GridRowEntry {
   /**
@@ -58,7 +58,7 @@ export interface GridRowHeightParams extends GridRowEntry {
 export type GridRowHeightReturnValue = number | null | undefined;
 
 /**
- * Object passed as parameter in the row getRowSpacing callback.
+ * Object passed as parameter in the row `getRowSpacing` callback prop.
  */
 export interface GridRowSpacingParams extends GridRowEntry {
   /**
diff --git a/packages/grid/_modules_/grid/models/props/DataGridProps.ts b/packages/grid/_modules_/grid/models/props/DataGridProps.ts
index 5e72fde72858..4fe0821c0cf6 100644
--- a/packages/grid/_modules_/grid/models/props/DataGridProps.ts
+++ b/packages/grid/_modules_/grid/models/props/DataGridProps.ts
@@ -402,9 +402,9 @@ export interface DataGridPropsWithoutDefaultValue extends CommonProps {
    */
   getRowHeight?: (params: GridRowHeightParams) => GridRowHeightReturnValue;
   /**
-   * Function that allows to specify margins between rows.
+   * Function that allows to specify the spacing between rows.
    * @param {GridRowSpacingParams} params With all properties from [[GridRowSpacingParams]].
-   * @returns {GridRowSpacing} The row margin values.
+   * @returns {GridRowSpacing} The row spacing values.
    */
   getRowSpacing?: (params: GridRowSpacingParams) => GridRowSpacing;
   /**
diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro.tsx
index 48898399dc21..65d86048b0e5 100644
--- a/packages/grid/x-data-grid-pro/src/DataGridPro.tsx
+++ b/packages/grid/x-data-grid-pro/src/DataGridPro.tsx
@@ -319,9 +319,9 @@ DataGridProRaw.propTypes = {
    */
   getRowId: PropTypes.func,
   /**
-   * Function that allows to specify margins between rows.
+   * Function that allows to specify the spacing between rows.
    * @param {GridRowSpacingParams} params With all properties from [[GridRowSpacingParams]].
-   * @returns {GridRowSpacing} The row margin values.
+   * @returns {GridRowSpacing} The row spacing values.
    */
   getRowSpacing: PropTypes.func,
   /**
diff --git a/packages/grid/x-data-grid/src/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid.tsx
index f3fcd508f6d0..06b004c1df7b 100644
--- a/packages/grid/x-data-grid/src/DataGrid.tsx
+++ b/packages/grid/x-data-grid/src/DataGrid.tsx
@@ -226,9 +226,9 @@ DataGridRaw.propTypes = {
    */
   getRowId: PropTypes.func,
   /**
-   * Function that allows to specify margins between rows.
+   * Function that allows to specify the spacing between rows.
    * @param {GridRowSpacingParams} params With all properties from [[GridRowSpacingParams]].
-   * @returns {GridRowSpacing} The row margin values.
+   * @returns {GridRowSpacing} The row spacing values.
    */
   getRowSpacing: PropTypes.func,
   /**

From 8ad38da6d617c7e87d54dbf84a10f29c9967f0a4 Mon Sep 17 00:00:00 2001
From: flavien <flaviendelangle@gmail.com>
Date: Tue, 8 Feb 2022 09:32:18 +0100
Subject: [PATCH 06/32] Fix

---
 .../components/data-grid/style/StripedGrid.js | 15 ++++-------
 .../_modules_/grid/components/GridRow.tsx     | 26 +++++++------------
 .../virtualization/useGridVirtualScroller.tsx |  9 ++++---
 3 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/docs/src/pages/components/data-grid/style/StripedGrid.js b/docs/src/pages/components/data-grid/style/StripedGrid.js
index a4eca9bd10f4..0e4a9fb50b3e 100644
--- a/docs/src/pages/components/data-grid/style/StripedGrid.js
+++ b/docs/src/pages/components/data-grid/style/StripedGrid.js
@@ -31,19 +31,14 @@ CustomRow.propTypes = {
   className: PropTypes.string,
   indexes: PropTypes.shape({
     /**
-     * Index of the row in the current page.
-     * If the pagination is disabled, this value will be equal to the `dataset` value.
-     */
-    pageRows: PropTypes.number.isRequired,
-    /**
-     * Index of the row in the list of rows currently rendered by the virtualization engine.
-     * If the pagination is disabled, this value will be equal to the `page` value.
+     * Index of the row in the whole sorted and filtered dataset.
      */
-    virtualizationEngineRows: PropTypes.number.isRequired,
+    fromFilteredRows: PropTypes.number.isRequired,
     /**
-     * Index of the row in the whole sorted and filtered dataset.
+     * Index of the row in the current page.
+     * If the pagination is disabled, this value will be equal to the `fromFilteredRows` value.
      */
-    visibleRows: PropTypes.number.isRequired,
+    fromPageRows: PropTypes.number.isRequired,
   }).isRequired,
 };
 
diff --git a/packages/grid/_modules_/grid/components/GridRow.tsx b/packages/grid/_modules_/grid/components/GridRow.tsx
index 179589e81a32..cc6bea2beae4 100644
--- a/packages/grid/_modules_/grid/components/GridRow.tsx
+++ b/packages/grid/_modules_/grid/components/GridRow.tsx
@@ -21,19 +21,12 @@ export interface GridRowIndexes {
   /**
    * Index of the row in the whole sorted and filtered dataset.
    */
-  visibleRows: number;
-
+  fromFilteredRows: number;
   /**
    * Index of the row in the current page.
-   * If the pagination is disabled, this value will be equal to the `dataset` value.
-   */
-  pageRows: number;
-
-  /**
-   * Index of the row in the list of rows currently rendered by the virtualization engine.
-   * If the pagination is disabled, this value will be equal to the `page` value.
+   * If the pagination is disabled, this value will be equal to the `fromFilteredRows` value.
    */
-  virtualizationEngineRows: number;
+  fromPageRows: number;
 }
 
 export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -42,7 +35,7 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Index of the row in the whole sorted and filtered dataset.
    * If some rows above have expanded children, this index also take those children into account.
-   * @deprecated Use `props.indexes.visibleRows` instead.
+   * @deprecated Use `props.indexes.fromFilteredRows` instead.
    */
   index: number;
   indexes: GridRowIndexes;
@@ -112,7 +105,7 @@ function GridRow(props: GridRowProps) {
     onMouseLeave,
     ...other
   } = props;
-  const ariaRowIndex = indexes.visibleRows + 2; // 1 for the header row and 1 as it's 1-based
+  const ariaRowIndex = indexes.fromFilteredRows + 2; // 1 for the header row and 1 as it's 1-based
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const columnsMeta = useGridSelector(apiRef, gridColumnsMetaSelector);
@@ -264,7 +257,7 @@ function GridRow(props: GridRowProps) {
   return (
     <div
       data-id={rowId}
-      data-rowindex={indexes.visibleRows}
+      data-rowindex={indexes.fromFilteredRows}
       role="row"
       className={clsx(rowClassName, classes.root, className)}
       aria-rowindex={ariaRowIndex}
@@ -295,13 +288,12 @@ GridRow.propTypes = {
   /**
    * Index of the row in the whole sorted and filtered dataset.
    * If some rows above have expanded children, this index also take those children into account.
-   * @deprecated Use `props.indexes.visibleRows` instead.
+   * @deprecated Use `props.indexes.fromFilteredRows` instead.
    */
   index: PropTypes.number.isRequired,
   indexes: PropTypes.shape({
-    pageRows: PropTypes.number.isRequired,
-    virtualizationEngineRows: PropTypes.number.isRequired,
-    visibleRows: PropTypes.number.isRequired,
+    fromFilteredRows: PropTypes.number.isRequired,
+    fromPageRows: PropTypes.number.isRequired,
   }).isRequired,
   lastColumnToRender: PropTypes.number.isRequired,
   onClick: PropTypes.func,
diff --git a/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualScroller.tsx
index 1eab0e59605c..a0994e241b2a 100644
--- a/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualScroller.tsx
+++ b/packages/grid/_modules_/grid/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -297,10 +297,11 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => {
         isSelected = true;
       }
 
+      // currentPage.range.firstRowIndex + firstRowToRender + i
+
       const indexes: GridRowIndexes = {
-        visibleRows: currentPage.range.firstRowIndex + nextRenderContext.firstRowIndex! + i,
-        pageRows: nextRenderContext.firstColumnIndex + i,
-        virtualizationEngineRows: i,
+        fromFilteredRows: currentPage.range.firstRowIndex + firstRowToRender + i,
+        fromPageRows: firstRowToRender + i,
       };
 
       rows.push(
@@ -317,7 +318,7 @@ export const useGridVirtualScroller = (props: UseGridVirtualScrollerProps) => {
           firstColumnToRender={firstColumnToRender}
           lastColumnToRender={lastColumnToRender}
           selected={isSelected}
-          index={indexes.visibleRows}
+          index={indexes.fromFilteredRows}
           indexes={indexes}
           containerWidth={availableSpace}
           {...(typeof getRowProps === 'function' ? getRowProps(id, model) : {})}

From e6dd0dfa954276dfb3d467556bc3bc6bc710dbd6 Mon Sep 17 00:00:00 2001
From: flavien <flaviendelangle@gmail.com>
Date: Tue, 8 Feb 2022 09:42:19 +0100
Subject: [PATCH 07/32] Fix

---
 .../components/data-grid/style/StripedGrid.js | 35 +++++++++++++++----
 .../data-grid/style/StripedGrid.tsx           | 35 +++++++++++++++----
 2 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/docs/src/pages/components/data-grid/style/StripedGrid.js b/docs/src/pages/components/data-grid/style/StripedGrid.js
index 0e4a9fb50b3e..629e89c1f028 100644
--- a/docs/src/pages/components/data-grid/style/StripedGrid.js
+++ b/docs/src/pages/components/data-grid/style/StripedGrid.js
@@ -1,28 +1,51 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 import { DataGrid, GridRow, gridClasses } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 import clsx from 'clsx';
 
-const StripedDataGrid = styled(DataGrid)({
-  [`& .${gridClasses.row}.odd`]: {
+const ODD_OPACITY = 0.2;
+
+const StripedDataGrid = styled(DataGrid)(({ theme }) => ({
+  [`& .${gridClasses.row}.even`]: {
     backgroundColor: '#EEEEEE',
     '&:hover, &.Mui-hovered': {
-      backgroundColor: '#DDDDDD',
+      backgroundColor: alpha(theme.palette.primary.main, ODD_OPACITY),
       '@media (hover: none)': {
         backgroundColor: 'transparent',
       },
     },
+    '&.Mui-selected': {
+      backgroundColor: alpha(
+        theme.palette.primary.main,
+        ODD_OPACITY + theme.palette.action.selectedOpacity,
+      ),
+      '&:hover, &.Mui-hovered': {
+        backgroundColor: alpha(
+          theme.palette.primary.main,
+          ODD_OPACITY +
+            theme.palette.action.selectedOpacity +
+            theme.palette.action.hoverOpacity,
+        ),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: alpha(
+            theme.palette.primary.main,
+            ODD_OPACITY + theme.palette.action.selectedOpacity,
+          ),
+        },
+      },
+    },
   },
-});
+}));
 
 const CustomRow = (props) => (
   <GridRow
     {...props}
     className={clsx(
       props.className,
-      props.indexes.pageRows % 2 === 1 ? 'odd' : undefined,
+      props.indexes.fromPageRows % 2 === 0 ? 'even' : undefined,
     )}
   />
 );
diff --git a/docs/src/pages/components/data-grid/style/StripedGrid.tsx b/docs/src/pages/components/data-grid/style/StripedGrid.tsx
index 1bcfa1ff3eeb..5b96204f881a 100644
--- a/docs/src/pages/components/data-grid/style/StripedGrid.tsx
+++ b/docs/src/pages/components/data-grid/style/StripedGrid.tsx
@@ -1,27 +1,50 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
+import { alpha, styled } from '@mui/material/styles';
 import { DataGrid, GridRowProps, GridRow, gridClasses } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 import clsx from 'clsx';
 
-const StripedDataGrid = styled(DataGrid)({
-  [`& .${gridClasses.row}.odd`]: {
+const ODD_OPACITY = 0.2;
+
+const StripedDataGrid = styled(DataGrid)(({ theme }) => ({
+  [`& .${gridClasses.row}.even`]: {
     backgroundColor: '#EEEEEE',
     '&:hover, &.Mui-hovered': {
-      backgroundColor: '#DDDDDD',
+      backgroundColor: alpha(theme.palette.primary.main, ODD_OPACITY),
       '@media (hover: none)': {
         backgroundColor: 'transparent',
       },
     },
+    '&.Mui-selected': {
+      backgroundColor: alpha(
+        theme.palette.primary.main,
+        ODD_OPACITY + theme.palette.action.selectedOpacity,
+      ),
+      '&:hover, &.Mui-hovered': {
+        backgroundColor: alpha(
+          theme.palette.primary.main,
+          ODD_OPACITY +
+            theme.palette.action.selectedOpacity +
+            theme.palette.action.hoverOpacity,
+        ),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: alpha(
+            theme.palette.primary.main,
+            ODD_OPACITY + theme.palette.action.selectedOpacity,
+          ),
+        },
+      },
+    },
   },
-});
+}));
 
 const CustomRow = (props: GridRowProps) => (
   <GridRow
     {...props}
     className={clsx(
       props.className,
-      props.indexes.pageRows % 2 === 1 ? 'odd' : undefined,
+      props.indexes.fromPageRows % 2 === 0 ? 'even' : undefined,
     )}
   />
 );

From bfc8fddf298de772361e5107158c56df1c4a305e Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Tue, 8 Feb 2022 09:45:11 -0300
Subject: [PATCH 08/32] Adapt to dark mode

---
 docs/src/pages/components/data-grid/rows/RowMarginGrid.js  | 2 +-
 docs/src/pages/components/data-grid/rows/RowMarginGrid.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/data-grid/rows/RowMarginGrid.js b/docs/src/pages/components/data-grid/rows/RowMarginGrid.js
index 1bc32a9f7cea..366780ad96fa 100644
--- a/docs/src/pages/components/data-grid/rows/RowMarginGrid.js
+++ b/docs/src/pages/components/data-grid/rows/RowMarginGrid.js
@@ -38,7 +38,7 @@ export default function RowMarginGrid() {
           '& .MuiDataGrid-row': {
             mt: '5px',
             mb: '5px',
-            bgcolor: '#efefef',
+            bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#000' : '#efefef'),
             '&.first': {
               mt: 0,
             },
diff --git a/docs/src/pages/components/data-grid/rows/RowMarginGrid.tsx b/docs/src/pages/components/data-grid/rows/RowMarginGrid.tsx
index 9f957efe35db..d4ae0f41b981 100644
--- a/docs/src/pages/components/data-grid/rows/RowMarginGrid.tsx
+++ b/docs/src/pages/components/data-grid/rows/RowMarginGrid.tsx
@@ -42,7 +42,7 @@ export default function RowMarginGrid() {
           '& .MuiDataGrid-row': {
             mt: '5px',
             mb: '5px',
-            bgcolor: '#efefef',
+            bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#000' : '#efefef'),
             '&.first': {
               mt: 0,
             },

From 24088b0296df8264b61bcba859780b3c9fa5cd02 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Tue, 8 Feb 2022 09:45:32 -0300
Subject: [PATCH 09/32] Add unstable_getRowIndexRelativeToCurrentPage

---
 .../hooks/features/rows/useGridRowSpacing.ts  | 26 +++++++++++++++++--
 .../grid/hooks/utils/useCurrentPageRows.ts    | 11 +-------
 .../grid/_modules_/grid/models/api/gridApi.ts |  5 ++--
 .../_modules_/grid/models/api/gridRowApi.ts   | 12 +++++++++
 .../src/DataGridProVirtualScroller.tsx        |  6 ++---
 5 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/packages/grid/_modules_/grid/hooks/features/rows/useGridRowSpacing.ts b/packages/grid/_modules_/grid/hooks/features/rows/useGridRowSpacing.ts
index f7eef63ec619..685ce34bb87a 100644
--- a/packages/grid/_modules_/grid/hooks/features/rows/useGridRowSpacing.ts
+++ b/packages/grid/_modules_/grid/hooks/features/rows/useGridRowSpacing.ts
@@ -4,6 +4,9 @@ import { GridApiRef } from '../../../models/api/gridApiRef';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { useCurrentPageRows } from '../../utils/useCurrentPageRows';
 import { GridRowSpacingParams } from '../../../models/params/gridRowParams';
+import { GridRowId } from '../../../models/gridRows';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+import { GridRowSpacingApi } from '../../../models/api/gridRowApi';
 
 /**
  * @requires useGridPage (state)
@@ -18,6 +21,25 @@ export const useGridRowSpacing = (
 ) => {
   const currentPage = useCurrentPageRows(apiRef, props);
 
+  const lookup = React.useMemo(
+    () =>
+      currentPage.rows.reduce((acc, { id }, index) => {
+        acc[id] = index;
+        return acc;
+      }, {} as Record<GridRowId, number>),
+    [currentPage.rows],
+  );
+
+  // This method is temporarily being registered in this hook because if moved
+  // to useGridRows it will be called without having the required states initialized.
+  const getRowIndexRelativeToCurrentPage = React.useCallback((id) => lookup[id], [lookup]);
+
+  const rowApi: GridRowSpacingApi = {
+    unstable_getRowIndexRelativeToCurrentPage: getRowIndexRelativeToCurrentPage,
+  };
+
+  useGridApiMethod(apiRef, rowApi, 'GridRowSpacingApi');
+
   const { getRowSpacing } = props;
 
   const addRowSpacing = React.useCallback<GridPreProcessor<'rowHeight'>>(
@@ -26,7 +48,7 @@ export const useGridRowSpacing = (
         return initialValue;
       }
 
-      const index = currentPage.lookup[row.id];
+      const index = apiRef.current.unstable_getRowIndexRelativeToCurrentPage(row.id);
       const params: GridRowSpacingParams = {
         ...row,
         isFirstVisible: index === 0,
@@ -36,7 +58,7 @@ export const useGridRowSpacing = (
       const spacing = getRowSpacing(params);
       return { ...initialValue, spacingTop: spacing.top ?? 0, spacingBottom: spacing.bottom ?? 0 };
     },
-    [currentPage.lookup, currentPage.rows.length, getRowSpacing],
+    [apiRef, currentPage.rows.length, getRowSpacing],
   );
 
   useGridRegisterPreProcessor(apiRef, 'rowHeight', addRowSpacing);
diff --git a/packages/grid/_modules_/grid/hooks/utils/useCurrentPageRows.ts b/packages/grid/_modules_/grid/hooks/utils/useCurrentPageRows.ts
index f4445a56009c..cfdd9f29fe22 100644
--- a/packages/grid/_modules_/grid/hooks/utils/useCurrentPageRows.ts
+++ b/packages/grid/_modules_/grid/hooks/utils/useCurrentPageRows.ts
@@ -6,7 +6,6 @@ import {
 } from '../features/pagination/gridPaginationSelector';
 import { gridVisibleSortedRowEntriesSelector } from '../features/filter/gridFilterSelector';
 import type { GridApiRef, GridRowEntry } from '../../models';
-import { GridRowId } from '../../models/gridRows';
 
 export const getCurrentPageRows = (
   apiRef: GridApiRef,
@@ -42,19 +41,11 @@ export const useCurrentPageRows = (
 ) => {
   const response = getCurrentPageRows(apiRef, props);
 
-  const lookup = React.useMemo(() => {
-    return response.rows.reduce((acc, { id }, index) => {
-      acc[id] = index;
-      return acc;
-    }, {} as Record<GridRowId, number>);
-  }, [response.rows]);
-
   return React.useMemo(
     () => ({
       rows: response.rows,
       range: response.range,
-      lookup,
     }),
-    [response.rows, response.range, lookup],
+    [response.rows, response.range],
   );
 };
diff --git a/packages/grid/_modules_/grid/models/api/gridApi.ts b/packages/grid/_modules_/grid/models/api/gridApi.ts
index de779c36c8af..08b22e4d6c91 100644
--- a/packages/grid/_modules_/grid/models/api/gridApi.ts
+++ b/packages/grid/_modules_/grid/models/api/gridApi.ts
@@ -12,7 +12,7 @@ import { GridParamsApi } from './gridParamsApi';
 import { GridPreferencesPanelApi } from './gridPreferencesPanelApi';
 import { GridPrintExportApi } from './gridPrintExportApi';
 import { GridDisableVirtualizationApi } from './gridDisableVirtualizationApi';
-import { GridRowApi } from './gridRowApi';
+import { GridRowApi, GridRowSpacingApi } from './gridRowApi';
 import { GridRowsMetaApi } from './gridRowsMetaApi';
 import { GridSelectionApi } from './gridSelectionApi';
 import { GridSortApi } from './gridSortApi';
@@ -62,4 +62,5 @@ export interface GridApi
     GridVirtualScrollerApi,
     GridColumnPinningApi,
     GridStatePersistenceApi,
-    GridDetailPanelApi {}
+    GridDetailPanelApi,
+    GridRowSpacingApi {}
diff --git a/packages/grid/_modules_/grid/models/api/gridRowApi.ts b/packages/grid/_modules_/grid/models/api/gridRowApi.ts
index 7e1d70fae38a..6f5b31e5eb5c 100644
--- a/packages/grid/_modules_/grid/models/api/gridRowApi.ts
+++ b/packages/grid/_modules_/grid/models/api/gridRowApi.ts
@@ -48,3 +48,15 @@ export interface GridRowApi {
    */
   setRowChildrenExpansion: (id: GridRowId, isExpanded: boolean) => void;
 }
+
+/**
+ * The Row API interface that is available in the grid `apiRef`.
+ */
+export interface GridRowSpacingApi {
+  /**
+   * Gets the row index of a row relative to the rows that are visible in the current page.
+   * @param {GridRowId} id The `GridRowId` of the row.
+   * @returns {number} The index of the row.
+   */
+  unstable_getRowIndexRelativeToCurrentPage: (id: GridRowId) => number;
+}
diff --git a/packages/grid/x-data-grid-pro/src/DataGridProVirtualScroller.tsx b/packages/grid/x-data-grid-pro/src/DataGridProVirtualScroller.tsx
index 01c994337598..21e8e3fd90a0 100644
--- a/packages/grid/x-data-grid-pro/src/DataGridProVirtualScroller.tsx
+++ b/packages/grid/x-data-grid-pro/src/DataGridProVirtualScroller.tsx
@@ -20,7 +20,6 @@ import {
   gridDetailPanelExpandedRowsContentCacheSelector,
   gridDetailPanelExpandedRowsHeightCacheSelector,
 } from '../../_modules_/grid/hooks/features/detailPanel/gridDetailPanelSelector';
-import { useCurrentPageRows } from '../../_modules_/grid/hooks/utils/useCurrentPageRows';
 import {
   GridPinnedColumns,
   GridPinnedPosition,
@@ -145,7 +144,6 @@ const DataGridProVirtualScroller = React.forwardRef<
   const { className, disableVirtualization, ...other } = props;
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
-  const currentPage = useCurrentPageRows(apiRef, rootProps);
   const visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
   const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
   const detailPanelsContent = useGridSelector(
@@ -269,11 +267,11 @@ const DataGridProVirtualScroller = React.forwardRef<
       const content = detailPanelsContent[id];
 
       // Check if the id exists in the current page
-      const exists = currentPage.lookup![id] !== undefined;
+      const rowIndex = apiRef.current.unstable_getRowIndexRelativeToCurrentPage(id);
+      const exists = rowIndex !== undefined;
 
       if (React.isValidElement(content) && exists) {
         const height = detailPanelsHeights[id];
-        const rowIndex = currentPage.lookup[id];
         const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id);
 
         panels.push(

From 1574c193afd2397d26a34f52e2a41a168b78eb01 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Tue, 8 Feb 2022 10:09:25 -0300
Subject: [PATCH 10/32] Update descriptions

---
 docs/pages/api-docs/data-grid/grid-api.md     | 199 +++++++++---------
 .../data-grid/grid-row-spacing-params.md      |  12 +-
 .../grid/_modules_/grid/models/gridRows.ts    |   4 +-
 scripts/x-data-grid-pro.exports.json          |   1 +
 scripts/x-data-grid.exports.json              |   1 +
 5 files changed, 110 insertions(+), 107 deletions(-)

diff --git a/docs/pages/api-docs/data-grid/grid-api.md b/docs/pages/api-docs/data-grid/grid-api.md
index 4bf6da52d0e1..efe013922550 100644
--- a/docs/pages/api-docs/data-grid/grid-api.md
+++ b/docs/pages/api-docs/data-grid/grid-api.md
@@ -10,102 +10,103 @@ import { GridApi } from '@mui/x-data-grid-pro';
 
 ## Properties
 
-| Name                                                       | Type                                                                                                                                                              | Description                                                                                                                                                                                         |
-| :--------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <span class="prop-name">addRowGroupingCriteria</span>      | <span class="prop-type">(groupingCriteriaField: string, groupingIndex?: number) =&gt; void</span>                                                                 | Adds the field to the row grouping model.                                                                                                                                                           |
-| <span class="prop-name">applySorting</span>                | <span class="prop-type">() =&gt; void</span>                                                                                                                      | Applies the current sort model to the rows.                                                                                                                                                         |
-| <span class="prop-name">commitCellChange</span>            | <span class="prop-type">(params: GridCommitCellChangeParams, event?: MuiBaseEvent) =&gt; boolean \| Promise&lt;boolean&gt;</span>                                 | Updates the field at the given id with the value stored in the edit row model.                                                                                                                      |
-| <span class="prop-name">commitRowChange</span>             | <span class="prop-type">(id: GridRowId, event?: MuiBaseEvent) =&gt; boolean \| Promise&lt;boolean&gt;</span>                                                      | Updates the row at the given id with the values stored in the edit row model.                                                                                                                       |
-| <span class="prop-name">deleteFilterItem</span>            | <span class="prop-type">(item: GridFilterItem) =&gt; void</span>                                                                                                  | Deletes a [GridFilterItem](/api/data-grid/grid-filter-item/).                                                                                                                                       |
-| <span class="prop-name">exportDataAsCsv</span>             | <span class="prop-type">(options?: GridCsvExportOptions) =&gt; void</span>                                                                                        | Downloads and exports a CSV of the grid's data.                                                                                                                                                     |
-| <span class="prop-name">exportDataAsPrint</span>           | <span class="prop-type">(options?: GridPrintExportOptions) =&gt; void</span>                                                                                      | Print the grid's data.                                                                                                                                                                              |
-| <span class="prop-name">exportState</span>                 | <span class="prop-type">() =&gt; GridInitialState</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](/api/data-grid/grid-col-def/) containing all the column definitions.                                                                                               |
-| <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">(id: GridRowId, field: string) =&gt; GridCellParams</span>                                                                                | Gets the [GridCellParams](/api/data-grid/grid-cell-params/) object that is passed as argument in events.                                                                                            |
-| <span class="prop-name">getCellValue</span>                | <span class="prop-type">(id: GridRowId, field: string) =&gt; GridCellValue</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](/api/data-grid/grid-col-def/) for the given `field`.                                                                                                                       |
-| <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.                                      |
-| <span class="prop-name">getColumnPosition</span>           | <span class="prop-type">(field: string) =&gt; number</span>                                                                                                       | Returns the left-position of a column relative to the inner border of the grid.                                                                                                                     |
-| <span class="prop-name">getColumnsMeta</span>              | <span class="prop-type">() =&gt; GridColumnsMeta</span>                                                                                                           | Returns the GridColumnsMeta for each column.                                                                                                                                                        |
-| <span class="prop-name">getDataAsCsv</span>                | <span class="prop-type">(options?: GridCsvExportOptions) =&gt; string</span>                                                                                      | Returns the grid data as a CSV string.<br />This method is used internally by `exportDataAsCsv`.                                                                                                    |
-| <span class="prop-name">getEditRowsModel</span>            | <span class="prop-type">() =&gt; GridEditRowsModel</span>                                                                                                         | Gets the edit rows model of the grid.                                                                                                                                                               |
-| <span class="prop-name">getExpandedDetailPanels</span>     | <span class="prop-type">() =&gt; GridRowId[]</span>                                                                                                               | Returns the rows whose detail panel is open.                                                                                                                                                        |
-| <span class="prop-name">getLocaleText</span>               | <span class="prop-type">&lt;T extends GridTranslationKeys&gt;(key: T) =&gt; GridLocaleText[T]</span>                                                              | Returns the translation for the `key`.                                                                                                                                                              |
-| <span class="prop-name">getPinnedColumns</span>            | <span class="prop-type">() =&gt; GridPinnedColumns</span>                                                                                                         | Returns which columns are pinned.                                                                                                                                                                   |
-| <span class="prop-name">getRootDimensions</span>           | <span class="prop-type">() =&gt; GridDimensions \| null</span>                                                                                                    | Returns the dimensions of the grid                                                                                                                                                                  |
-| <span class="prop-name">getRow</span>                      | <span class="prop-type">(id: GridRowId) =&gt; GridRowModel \| null</span>                                                                                         | Gets the row data with a given id.                                                                                                                                                                  |
-| <span class="prop-name">getRowElement</span>               | <span class="prop-type">(id: GridRowId) =&gt; HTMLDivElement \| null</span>                                                                                       | Gets the underlying DOM element for a row at the given `id`.                                                                                                                                        |
-| <span class="prop-name">getRowIdFromRowIndex</span>        | <span class="prop-type">(index: number) =&gt; GridRowId</span>                                                                                                    | Gets the `GridRowId` of a row at a specific index.<br />The index is based on the sorted but unfiltered row list.                                                                                   |
-| <span class="prop-name">getRowIndex</span>                 | <span class="prop-type">(id: GridRowId) =&gt; number</span>                                                                                                       | Gets the row index of a row with a given id.<br />The index is based on the sorted but unfiltered row list.                                                                                         |
-| <span class="prop-name">getRowMode</span>                  | <span class="prop-type">(id: GridRowId) =&gt; GridRowMode</span>                                                                                                  | Gets the mode of a row.                                                                                                                                                                             |
-| <span class="prop-name">getRowModels</span>                | <span class="prop-type">() =&gt; Map&lt;GridRowId, GridRowModel&gt;</span>                                                                                        | Gets the full set of rows as Map&lt;GridRowId, GridRowModel&gt;.                                                                                                                                    |
-| <span class="prop-name">getRowNode</span>                  | <span class="prop-type">(id: GridRowId) =&gt; GridRowTreeNodeConfig \| null</span>                                                                                | Gets the row node from the internal tree structure.                                                                                                                                                 |
-| <span class="prop-name">getRowParams</span>                | <span class="prop-type">(id: GridRowId) =&gt; GridRowParams</span>                                                                                                | Gets the [GridRowParams](/api/data-grid/grid-row-params/) object that is passed as argument in events.                                                                                              |
-| <span class="prop-name">getRowsCount</span>                | <span class="prop-type">() =&gt; number</span>                                                                                                                    | Gets the total number of rows in the grid.                                                                                                                                                          |
-| <span class="prop-name">getScrollPosition</span>           | <span class="prop-type">() =&gt; GridScrollParams</span>                                                                                                          | Returns the current scroll position.                                                                                                                                                                |
-| <span class="prop-name">getSelectedRows</span>             | <span class="prop-type">() =&gt; Map&lt;GridRowId, GridRowModel&gt;</span>                                                                                        | Returns an array of the selected rows.                                                                                                                                                              |
-| <span class="prop-name">getSortedRowIds</span>             | <span class="prop-type">() =&gt; GridRowId[]</span>                                                                                                               | Returns all row ids sorted according to the active sort model.                                                                                                                                      |
-| <span class="prop-name">getSortedRows</span>               | <span class="prop-type">() =&gt; GridRowModel[]</span>                                                                                                            | Returns all rows sorted according to the active sort model.                                                                                                                                         |
-| <span class="prop-name">getSortModel</span>                | <span class="prop-type">() =&gt; GridSortModel</span>                                                                                                             | Returns the sort model currently applied to the grid.                                                                                                                                               |
-| <span class="prop-name">getVisibleColumns</span>           | <span class="prop-type">() =&gt; GridStateColDef[]</span>                                                                                                         | Returns the currently visible columns.                                                                                                                                                              |
-| <span class="prop-name">getVisibleRowModels</span>         | <span class="prop-type">() =&gt; Map&lt;GridRowId, GridRowModel&gt;</span>                                                                                        | Returns a sorted `Map` containing only the visible rows.                                                                                                                                            |
-| <span class="prop-name">hideColumnMenu</span>              | <span class="prop-type">() =&gt; void</span>                                                                                                                      | Hides the column menu that is open.                                                                                                                                                                 |
-| <span class="prop-name">hideFilterPanel</span>             | <span class="prop-type">() =&gt; void</span>                                                                                                                      | Hides the filter panel.                                                                                                                                                                             |
-| <span class="prop-name">hidePreferences</span>             | <span class="prop-type">() =&gt; void</span>                                                                                                                      | Hides the preferences panel.                                                                                                                                                                        |
-| <span class="prop-name">isCellEditable</span>              | <span class="prop-type">(params: GridCellParams) =&gt; boolean</span>                                                                                             | Controls if a cell is editable.                                                                                                                                                                     |
-| <span class="prop-name">isColumnPinned</span>              | <span class="prop-type">(field: string) =&gt; GridPinnedPosition \| false</span>                                                                                  | Returns which side a column is pinned to.                                                                                                                                                           |
-| <span class="prop-name">isRowSelected</span>               | <span class="prop-type">(id: GridRowId) =&gt; boolean</span>                                                                                                      | Determines if a row is selected or not.                                                                                                                                                             |
-| <span class="prop-name">pinColumn</span>                   | <span class="prop-type">(field: string, side: GridPinnedPosition) =&gt; void</span>                                                                               | Pins a column to the left or right side of the grid.                                                                                                                                                |
-| <span class="prop-name">publishEvent</span>                | <span class="prop-type">GridEventPublisher</span>                                                                                                                 | Emits an event.                                                                                                                                                                                     |
-| <span class="prop-name">removeRowGroupingCriteria</span>   | <span class="prop-type">(groupingCriteriaField: string) =&gt; void</span>                                                                                         | sRemove the field from the row grouping model.                                                                                                                                                      |
-| <span class="prop-name">resize</span>                      | <span class="prop-type">() =&gt; void</span>                                                                                                                      | Triggers a resize of the component and recalculation of width and height.                                                                                                                           |
-| <span class="prop-name">restoreState</span>                | <span class="prop-type">(stateToRestore: GridInitialState) =&gt; void</span>                                                                                      | Inject the given values into the state of the DataGrid.                                                                                                                                             |
-| <span class="prop-name">scroll</span>                      | <span class="prop-type">(params: Partial&lt;GridScrollParams&gt;) =&gt; void</span>                                                                               | Triggers the viewport to scroll to the given positions (in pixels).                                                                                                                                 |
-| <span class="prop-name">scrollToIndexes</span>             | <span class="prop-type">(params: Partial&lt;GridCellIndexCoordinates&gt;) =&gt; boolean</span>                                                                    | Triggers the viewport to scroll to the cell at indexes given by `params`.<br />Returns `true` if the grid had to scroll to reach the target.                                                        |
-| <span class="prop-name">selectRow</span>                   | <span class="prop-type">(id: GridRowId, isSelected?: boolean, resetSelection?: boolean) =&gt; void</span>                                                         | Change the selection state of a row.                                                                                                                                                                |
-| <span class="prop-name">selectRowRange</span>              | <span class="prop-type">(range: { startId: GridRowId; endId: GridRowId }, isSelected?: boolean, resetSelection?: boolean) =&gt; void</span>                       | Change the selection state of all the selectable rows in a range.                                                                                                                                   |
-| <span class="prop-name">selectRows</span>                  | <span class="prop-type">(ids: GridRowId[], isSelected?: boolean, resetSelection?: boolean) =&gt; void</span>                                                      | Change the selection state of multiple rows.                                                                                                                                                        |
-| <span class="prop-name">setCellFocus</span>                | <span class="prop-type">(id: GridRowId, field: string) =&gt; void</span>                                                                                          | Sets the focus to the cell at the given `id` and `field`.                                                                                                                                           |
-| <span class="prop-name">setCellMode</span>                 | <span class="prop-type">(id: GridRowId, field: string, mode: GridCellMode) =&gt; void</span>                                                                      | Sets the mode of a cell.                                                                                                                                                                            |
-| <span class="prop-name">setColumnHeaderFocus</span>        | <span class="prop-type">(field: string, event?: MuiBaseEvent) =&gt; void</span>                                                                                   | Sets the focus to the column header at the given `field`.                                                                                                                                           |
-| <span class="prop-name">setColumnIndex</span>              | <span class="prop-type">(field: string, targetIndexPosition: number) =&gt; void</span>                                                                            | Moves a column from its original position to the position given by `targetIndexPosition`.                                                                                                           |
-| <span class="prop-name">setColumnVisibility</span>         | <span class="prop-type">(field: string, isVisible: boolean) =&gt; void</span>                                                                                     | Changes the visibility of the column referred by `field`.                                                                                                                                           |
-| <span class="prop-name">setColumnVisibilityModel</span>    | <span class="prop-type">(model: GridColumnVisibilityModel) =&gt; void</span>                                                                                      | Sets the column visibility model to the one given by `model`.                                                                                                                                       |
-| <span class="prop-name">setColumnWidth</span>              | <span class="prop-type">(field: string, width: number) =&gt; void</span>                                                                                          | Updates the width of a column.                                                                                                                                                                      |
-| <span class="prop-name">setDensity</span>                  | <span class="prop-type">(density: GridDensity, headerHeight?: number, rowHeight?: number) =&gt; void</span>                                                       | Sets the density of the grid.                                                                                                                                                                       |
-| <span class="prop-name">setEditCellValue</span>            | <span class="prop-type">(params: GridEditCellValueParams, event?: MuiBaseEvent) =&gt; Promise&lt;boolean&gt; \| void</span>                                       | Sets the value of the edit cell.<br />Commonly used inside the edit cell component.                                                                                                                 |
-| <span class="prop-name">setEditRowsModel</span>            | <span class="prop-type">(model: GridEditRowsModel) =&gt; void</span>                                                                                              | Set the edit rows model of the grid.                                                                                                                                                                |
-| <span class="prop-name">setExpandedDetailPanels</span>     | <span class="prop-type">(ids: GridRowId[]) =&gt; void</span>                                                                                                      | Changes which rows to expand the detail panel.                                                                                                                                                      |
-| <span class="prop-name">setFilterLinkOperator</span>       | <span class="prop-type">(operator: GridLinkOperator) =&gt; void</span>                                                                                            | Changes the GridLinkOperator used to connect the filters.                                                                                                                                           |
-| <span class="prop-name">setFilterModel</span>              | <span class="prop-type">(model: GridFilterModel) =&gt; void</span>                                                                                                | Sets the filter model to the one given by `model`.                                                                                                                                                  |
-| <span class="prop-name">setPage</span>                     | <span class="prop-type">(page: number) =&gt; void</span>                                                                                                          | Sets the displayed page to the value given by `page`.                                                                                                                                               |
-| <span class="prop-name">setPageSize</span>                 | <span class="prop-type">(pageSize: number) =&gt; void</span>                                                                                                      | Sets the number of displayed rows to the value given by `pageSize`.                                                                                                                                 |
-| <span class="prop-name">setPinnedColumns</span>            | <span class="prop-type">(pinnedColumns: GridPinnedColumns) =&gt; void</span>                                                                                      | Changes the pinned columns.                                                                                                                                                                         |
-| <span class="prop-name">setRowChildrenExpansion</span>     | <span class="prop-type">(id: GridRowId, isExpanded: boolean) =&gt; void</span>                                                                                    | Expand or collapse a row children.                                                                                                                                                                  |
-| <span class="prop-name">setRowGroupingCriteriaIndex</span> | <span class="prop-type">(groupingCriteriaField: string, groupingIndex: number) =&gt; void</span>                                                                  | Sets the grouping index of a grouping criteria.                                                                                                                                                     |
-| <span class="prop-name">setRowGroupingModel</span>         | <span class="prop-type">(model: GridRowGroupingModel) =&gt; void</span>                                                                                           | Sets the columns to use as grouping criteria.                                                                                                                                                       |
-| <span class="prop-name">setRowMode</span>                  | <span class="prop-type">(id: GridRowId, mode: GridRowMode) =&gt; void</span>                                                                                      | Sets the mode of a row.                                                                                                                                                                             |
-| <span class="prop-name">setRows</span>                     | <span class="prop-type">(rows: GridRowModel[]) =&gt; void</span>                                                                                                  | Sets a new set of rows.                                                                                                                                                                             |
-| <span class="prop-name">setSelectionModel</span>           | <span class="prop-type">(rowIds: GridRowId[]) =&gt; void</span>                                                                                                   | Updates the selected rows to be those passed to the `rowIds` argument.<br />Any row already selected will be unselected.                                                                            |
-| <span class="prop-name">setSortModel</span>                | <span class="prop-type">(model: GridSortModel) =&gt; void</span>                                                                                                  | Updates the sort model and triggers the sorting of rows.                                                                                                                                            |
-| <span class="prop-name">setState</span>                    | <span class="prop-type">(state: GridState \| ((previousState: GridState) =&gt; GridState)) =&gt; boolean</span>                                                   | Sets the whole state of the grid.                                                                                                                                                                   |
-| <span class="prop-name">showColumnMenu</span>              | <span class="prop-type">(field: string) =&gt; void</span>                                                                                                         | Display the column menu under the `field` column.                                                                                                                                                   |
-| <span class="prop-name">showError</span>                   | <span class="prop-type">(props: any) =&gt; void</span>                                                                                                            | Displays the error overlay component.                                                                                                                                                               |
-| <span class="prop-name">showFilterPanel</span>             | <span class="prop-type">(targetColumnField?: string) =&gt; void</span>                                                                                            | Shows the filter panel. If `targetColumnField` is given, a filter for this field is also added.                                                                                                     |
-| <span class="prop-name">showPreferences</span>             | <span class="prop-type">(newValue: GridPreferencePanelsValue) =&gt; void</span>                                                                                   | Displays the preferences panel. The `newValue` argument controls the content of the panel.                                                                                                          |
-| <span class="prop-name">sortColumn</span>                  | <span class="prop-type">(column: GridColDef, direction?: GridSortDirection, allowMultipleSorting?: boolean) =&gt; void</span>                                     | Sorts a column.                                                                                                                                                                                     |
-| <span class="prop-name">state</span>                       | <span class="prop-type">GridState</span>                                                                                                                          | Property that contains the whole state of the grid.                                                                                                                                                 |
-| <span class="prop-name">subscribeEvent</span>              | <span class="prop-type">&lt;E extends GridEventsStr&gt;(event: E, handler: GridEventListener&lt;E&gt;, options?: EventListenerOptions) =&gt; () =&gt; void</span> | Registers a handler for an event.                                                                                                                                                                   |
-| <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>           | <span class="prop-type">(id: GridRowId) =&gt; void</span>                                                                                                         | Expands or collapses the detail panel of a row.                                                                                                                                                     |
-| <span class="prop-name">unpinColumn</span>                 | <span class="prop-type">(field: string) =&gt; void</span>                                                                                                         | Unpins a column.                                                                                                                                                                                    |
-| <span class="prop-name">updateColumn</span>                | <span class="prop-type">(col: GridColDef) =&gt; void</span>                                                                                                       | Updates the definition of a column.                                                                                                                                                                 |
-| <span class="prop-name">updateColumns</span>               | <span class="prop-type">(cols: GridColDef[]) =&gt; void</span>                                                                                                    | Updates the definition of multiple columns at the same time.                                                                                                                                        |
-| <span class="prop-name">updateRows</span>                  | <span class="prop-type">(updates: GridRowModelUpdate[]) =&gt; void</span>                                                                                         | Allows to updates, insert and delete rows in a single call.                                                                                                                                         |
-| <span class="prop-name">upsertFilterItem</span>            | <span class="prop-type">(item: GridFilterItem) =&gt; void</span>                                                                                                  | Updates or inserts a [GridFilterItem](/api/data-grid/grid-filter-item/).                                                                                                                            |
+| Name                                                                     | Type                                                                                                                                                              | Description                                                                                                                                                                                         |
+| :----------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| <span class="prop-name">addRowGroupingCriteria</span>                    | <span class="prop-type">(groupingCriteriaField: string, groupingIndex?: number) =&gt; void</span>                                                                 | Adds the field to the row grouping model.                                                                                                                                                           |
+| <span class="prop-name">applySorting</span>                              | <span class="prop-type">() =&gt; void</span>                                                                                                                      | Applies the current sort model to the rows.                                                                                                                                                         |
+| <span class="prop-name">commitCellChange</span>                          | <span class="prop-type">(params: GridCommitCellChangeParams, event?: MuiBaseEvent) =&gt; boolean \| Promise&lt;boolean&gt;</span>                                 | Updates the field at the given id with the value stored in the edit row model.                                                                                                                      |
+| <span class="prop-name">commitRowChange</span>                           | <span class="prop-type">(id: GridRowId, event?: MuiBaseEvent) =&gt; boolean \| Promise&lt;boolean&gt;</span>                                                      | Updates the row at the given id with the values stored in the edit row model.                                                                                                                       |
+| <span class="prop-name">deleteFilterItem</span>                          | <span class="prop-type">(item: GridFilterItem) =&gt; void</span>                                                                                                  | Deletes a [GridFilterItem](/api/data-grid/grid-filter-item/).                                                                                                                                       |
+| <span class="prop-name">exportDataAsCsv</span>                           | <span class="prop-type">(options?: GridCsvExportOptions) =&gt; void</span>                                                                                        | Downloads and exports a CSV of the grid's data.                                                                                                                                                     |
+| <span class="prop-name">exportDataAsPrint</span>                         | <span class="prop-type">(options?: GridPrintExportOptions) =&gt; void</span>                                                                                      | Print the grid's data.                                                                                                                                                                              |
+| <span class="prop-name">exportState</span>                               | <span class="prop-type">() =&gt; GridInitialState</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](/api/data-grid/grid-col-def/) containing all the column definitions.                                                                                               |
+| <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">(id: GridRowId, field: string) =&gt; GridCellParams</span>                                                                                | Gets the [GridCellParams](/api/data-grid/grid-cell-params/) object that is passed as argument in events.                                                                                            |
+| <span class="prop-name">getCellValue</span>                              | <span class="prop-type">(id: GridRowId, field: string) =&gt; GridCellValue</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](/api/data-grid/grid-col-def/) for the given `field`.                                                                                                                       |
+| <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.                                      |
+| <span class="prop-name">getColumnPosition</span>                         | <span class="prop-type">(field: string) =&gt; number</span>                                                                                                       | Returns the left-position of a column relative to the inner border of the grid.                                                                                                                     |
+| <span class="prop-name">getColumnsMeta</span>                            | <span class="prop-type">() =&gt; GridColumnsMeta</span>                                                                                                           | Returns the GridColumnsMeta for each column.                                                                                                                                                        |
+| <span class="prop-name">getDataAsCsv</span>                              | <span class="prop-type">(options?: GridCsvExportOptions) =&gt; string</span>                                                                                      | Returns the grid data as a CSV string.<br />This method is used internally by `exportDataAsCsv`.                                                                                                    |
+| <span class="prop-name">getEditRowsModel</span>                          | <span class="prop-type">() =&gt; GridEditRowsModel</span>                                                                                                         | Gets the edit rows model of the grid.                                                                                                                                                               |
+| <span class="prop-name">getExpandedDetailPanels</span>                   | <span class="prop-type">() =&gt; GridRowId[]</span>                                                                                                               | Returns the rows whose detail panel is open.                                                                                                                                                        |
+| <span class="prop-name">getLocaleText</span>                             | <span class="prop-type">&lt;T extends GridTranslationKeys&gt;(key: T) =&gt; GridLocaleText[T]</span>                                                              | Returns the translation for the `key`.                                                                                                                                                              |
+| <span class="prop-name">getPinnedColumns</span>                          | <span class="prop-type">() =&gt; GridPinnedColumns</span>                                                                                                         | Returns which columns are pinned.                                                                                                                                                                   |
+| <span class="prop-name">getRootDimensions</span>                         | <span class="prop-type">() =&gt; GridDimensions \| null</span>                                                                                                    | Returns the dimensions of the grid                                                                                                                                                                  |
+| <span class="prop-name">getRow</span>                                    | <span class="prop-type">(id: GridRowId) =&gt; GridRowModel \| null</span>                                                                                         | Gets the row data with a given id.                                                                                                                                                                  |
+| <span class="prop-name">getRowElement</span>                             | <span class="prop-type">(id: GridRowId) =&gt; HTMLDivElement \| null</span>                                                                                       | Gets the underlying DOM element for a row at the given `id`.                                                                                                                                        |
+| <span class="prop-name">getRowIdFromRowIndex</span>                      | <span class="prop-type">(index: number) =&gt; GridRowId</span>                                                                                                    | Gets the `GridRowId` of a row at a specific index.<br />The index is based on the sorted but unfiltered row list.                                                                                   |
+| <span class="prop-name">getRowIndex</span>                               | <span class="prop-type">(id: GridRowId) =&gt; number</span>                                                                                                       | Gets the row index of a row with a given id.<br />The index is based on the sorted but unfiltered row list.                                                                                         |
+| <span class="prop-name">getRowMode</span>                                | <span class="prop-type">(id: GridRowId) =&gt; GridRowMode</span>                                                                                                  | Gets the mode of a row.                                                                                                                                                                             |
+| <span class="prop-name">getRowModels</span>                              | <span class="prop-type">() =&gt; Map&lt;GridRowId, GridRowModel&gt;</span>                                                                                        | Gets the full set of rows as Map&lt;GridRowId, GridRowModel&gt;.                                                                                                                                    |
+| <span class="prop-name">getRowNode</span>                                | <span class="prop-type">(id: GridRowId) =&gt; GridRowTreeNodeConfig \| null</span>                                                                                | Gets the row node from the internal tree structure.                                                                                                                                                 |
+| <span class="prop-name">getRowParams</span>                              | <span class="prop-type">(id: GridRowId) =&gt; GridRowParams</span>                                                                                                | Gets the [GridRowParams](/api/data-grid/grid-row-params/) object that is passed as argument in events.                                                                                              |
+| <span class="prop-name">getRowsCount</span>                              | <span class="prop-type">() =&gt; number</span>                                                                                                                    | Gets the total number of rows in the grid.                                                                                                                                                          |
+| <span class="prop-name">getScrollPosition</span>                         | <span class="prop-type">() =&gt; GridScrollParams</span>                                                                                                          | Returns the current scroll position.                                                                                                                                                                |
+| <span class="prop-name">getSelectedRows</span>                           | <span class="prop-type">() =&gt; Map&lt;GridRowId, GridRowModel&gt;</span>                                                                                        | Returns an array of the selected rows.                                                                                                                                                              |
+| <span class="prop-name">getSortedRowIds</span>                           | <span class="prop-type">() =&gt; GridRowId[]</span>                                                                                                               | Returns all row ids sorted according to the active sort model.                                                                                                                                      |
+| <span class="prop-name">getSortedRows</span>                             | <span class="prop-type">() =&gt; GridRowModel[]</span>                                                                                                            | Returns all rows sorted according to the active sort model.                                                                                                                                         |
+| <span class="prop-name">getSortModel</span>                              | <span class="prop-type">() =&gt; GridSortModel</span>                                                                                                             | Returns the sort model currently applied to the grid.                                                                                                                                               |
+| <span class="prop-name">getVisibleColumns</span>                         | <span class="prop-type">() =&gt; GridStateColDef[]</span>                                                                                                         | Returns the currently visible columns.                                                                                                                                                              |
+| <span class="prop-name">getVisibleRowModels</span>                       | <span class="prop-type">() =&gt; Map&lt;GridRowId, GridRowModel&gt;</span>                                                                                        | Returns a sorted `Map` containing only the visible rows.                                                                                                                                            |
+| <span class="prop-name">hideColumnMenu</span>                            | <span class="prop-type">() =&gt; void</span>                                                                                                                      | Hides the column menu that is open.                                                                                                                                                                 |
+| <span class="prop-name">hideFilterPanel</span>                           | <span class="prop-type">() =&gt; void</span>                                                                                                                      | Hides the filter panel.                                                                                                                                                                             |
+| <span class="prop-name">hidePreferences</span>                           | <span class="prop-type">() =&gt; void</span>                                                                                                                      | Hides the preferences panel.                                                                                                                                                                        |
+| <span class="prop-name">isCellEditable</span>                            | <span class="prop-type">(params: GridCellParams) =&gt; boolean</span>                                                                                             | Controls if a cell is editable.                                                                                                                                                                     |
+| <span class="prop-name">isColumnPinned</span>                            | <span class="prop-type">(field: string) =&gt; GridPinnedPosition \| false</span>                                                                                  | Returns which side a column is pinned to.                                                                                                                                                           |
+| <span class="prop-name">isRowSelected</span>                             | <span class="prop-type">(id: GridRowId) =&gt; boolean</span>                                                                                                      | Determines if a row is selected or not.                                                                                                                                                             |
+| <span class="prop-name">pinColumn</span>                                 | <span class="prop-type">(field: string, side: GridPinnedPosition) =&gt; void</span>                                                                               | Pins a column to the left or right side of the grid.                                                                                                                                                |
+| <span class="prop-name">publishEvent</span>                              | <span class="prop-type">GridEventPublisher</span>                                                                                                                 | Emits an event.                                                                                                                                                                                     |
+| <span class="prop-name">removeRowGroupingCriteria</span>                 | <span class="prop-type">(groupingCriteriaField: string) =&gt; void</span>                                                                                         | sRemove the field from the row grouping model.                                                                                                                                                      |
+| <span class="prop-name">resize</span>                                    | <span class="prop-type">() =&gt; void</span>                                                                                                                      | Triggers a resize of the component and recalculation of width and height.                                                                                                                           |
+| <span class="prop-name">restoreState</span>                              | <span class="prop-type">(stateToRestore: GridInitialState) =&gt; void</span>                                                                                      | Inject the given values into the state of the DataGrid.                                                                                                                                             |
+| <span class="prop-name">scroll</span>                                    | <span class="prop-type">(params: Partial&lt;GridScrollParams&gt;) =&gt; void</span>                                                                               | Triggers the viewport to scroll to the given positions (in pixels).                                                                                                                                 |
+| <span class="prop-name">scrollToIndexes</span>                           | <span class="prop-type">(params: Partial&lt;GridCellIndexCoordinates&gt;) =&gt; boolean</span>                                                                    | Triggers the viewport to scroll to the cell at indexes given by `params`.<br />Returns `true` if the grid had to scroll to reach the target.                                                        |
+| <span class="prop-name">selectRow</span>                                 | <span class="prop-type">(id: GridRowId, isSelected?: boolean, resetSelection?: boolean) =&gt; void</span>                                                         | Change the selection state of a row.                                                                                                                                                                |
+| <span class="prop-name">selectRowRange</span>                            | <span class="prop-type">(range: { startId: GridRowId; endId: GridRowId }, isSelected?: boolean, resetSelection?: boolean) =&gt; void</span>                       | Change the selection state of all the selectable rows in a range.                                                                                                                                   |
+| <span class="prop-name">selectRows</span>                                | <span class="prop-type">(ids: GridRowId[], isSelected?: boolean, resetSelection?: boolean) =&gt; void</span>                                                      | Change the selection state of multiple rows.                                                                                                                                                        |
+| <span class="prop-name">setCellFocus</span>                              | <span class="prop-type">(id: GridRowId, field: string) =&gt; void</span>                                                                                          | Sets the focus to the cell at the given `id` and `field`.                                                                                                                                           |
+| <span class="prop-name">setCellMode</span>                               | <span class="prop-type">(id: GridRowId, field: string, mode: GridCellMode) =&gt; void</span>                                                                      | Sets the mode of a cell.                                                                                                                                                                            |
+| <span class="prop-name">setColumnHeaderFocus</span>                      | <span class="prop-type">(field: string, event?: MuiBaseEvent) =&gt; void</span>                                                                                   | Sets the focus to the column header at the given `field`.                                                                                                                                           |
+| <span class="prop-name">setColumnIndex</span>                            | <span class="prop-type">(field: string, targetIndexPosition: number) =&gt; void</span>                                                                            | Moves a column from its original position to the position given by `targetIndexPosition`.                                                                                                           |
+| <span class="prop-name">setColumnVisibility</span>                       | <span class="prop-type">(field: string, isVisible: boolean) =&gt; void</span>                                                                                     | Changes the visibility of the column referred by `field`.                                                                                                                                           |
+| <span class="prop-name">setColumnVisibilityModel</span>                  | <span class="prop-type">(model: GridColumnVisibilityModel) =&gt; void</span>                                                                                      | Sets the column visibility model to the one given by `model`.                                                                                                                                       |
+| <span class="prop-name">setColumnWidth</span>                            | <span class="prop-type">(field: string, width: number) =&gt; void</span>                                                                                          | Updates the width of a column.                                                                                                                                                                      |
+| <span class="prop-name">setDensity</span>                                | <span class="prop-type">(density: GridDensity, headerHeight?: number, rowHeight?: number) =&gt; void</span>                                                       | Sets the density of the grid.                                                                                                                                                                       |
+| <span class="prop-name">setEditCellValue</span>                          | <span class="prop-type">(params: GridEditCellValueParams, event?: MuiBaseEvent) =&gt; Promise&lt;boolean&gt; \| void</span>                                       | Sets the value of the edit cell.<br />Commonly used inside the edit cell component.                                                                                                                 |
+| <span class="prop-name">setEditRowsModel</span>                          | <span class="prop-type">(model: GridEditRowsModel) =&gt; void</span>                                                                                              | Set the edit rows model of the grid.                                                                                                                                                                |
+| <span class="prop-name">setExpandedDetailPanels</span>                   | <span class="prop-type">(ids: GridRowId[]) =&gt; void</span>                                                                                                      | Changes which rows to expand the detail panel.                                                                                                                                                      |
+| <span class="prop-name">setFilterLinkOperator</span>                     | <span class="prop-type">(operator: GridLinkOperator) =&gt; void</span>                                                                                            | Changes the GridLinkOperator used to connect the filters.                                                                                                                                           |
+| <span class="prop-name">setFilterModel</span>                            | <span class="prop-type">(model: GridFilterModel) =&gt; void</span>                                                                                                | Sets the filter model to the one given by `model`.                                                                                                                                                  |
+| <span class="prop-name">setPage</span>                                   | <span class="prop-type">(page: number) =&gt; void</span>                                                                                                          | Sets the displayed page to the value given by `page`.                                                                                                                                               |
+| <span class="prop-name">setPageSize</span>                               | <span class="prop-type">(pageSize: number) =&gt; void</span>                                                                                                      | Sets the number of displayed rows to the value given by `pageSize`.                                                                                                                                 |
+| <span class="prop-name">setPinnedColumns</span>                          | <span class="prop-type">(pinnedColumns: GridPinnedColumns) =&gt; void</span>                                                                                      | Changes the pinned columns.                                                                                                                                                                         |
+| <span class="prop-name">setRowChildrenExpansion</span>                   | <span class="prop-type">(id: GridRowId, isExpanded: boolean) =&gt; void</span>                                                                                    | Expand or collapse a row children.                                                                                                                                                                  |
+| <span class="prop-name">setRowGroupingCriteriaIndex</span>               | <span class="prop-type">(groupingCriteriaField: string, groupingIndex: number) =&gt; void</span>                                                                  | Sets the grouping index of a grouping criteria.                                                                                                                                                     |
+| <span class="prop-name">setRowGroupingModel</span>                       | <span class="prop-type">(model: GridRowGroupingModel) =&gt; void</span>                                                                                           | Sets the columns to use as grouping criteria.                                                                                                                                                       |
+| <span class="prop-name">setRowMode</span>                                | <span class="prop-type">(id: GridRowId, mode: GridRowMode) =&gt; void</span>                                                                                      | Sets the mode of a row.                                                                                                                                                                             |
+| <span class="prop-name">setRows</span>                                   | <span class="prop-type">(rows: GridRowModel[]) =&gt; void</span>                                                                                                  | Sets a new set of rows.                                                                                                                                                                             |
+| <span class="prop-name">setSelectionModel</span>                         | <span class="prop-type">(rowIds: GridRowId[]) =&gt; void</span>                                                                                                   | Updates the selected rows to be those passed to the `rowIds` argument.<br />Any row already selected will be unselected.                                                                            |
+| <span class="prop-name">setSortModel</span>                              | <span class="prop-type">(model: GridSortModel) =&gt; void</span>                                                                                                  | Updates the sort model and triggers the sorting of rows.                                                                                                                                            |
+| <span class="prop-name">setState</span>                                  | <span class="prop-type">(state: GridState \| ((previousState: GridState) =&gt; GridState)) =&gt; boolean</span>                                                   | Sets the whole state of the grid.                                                                                                                                                                   |
+| <span class="prop-name">showColumnMenu</span>                            | <span class="prop-type">(field: string) =&gt; void</span>                                                                                                         | Display the column menu under the `field` column.                                                                                                                                                   |
+| <span class="prop-name">showError</span>                                 | <span class="prop-type">(props: any) =&gt; void</span>                                                                                                            | Displays the error overlay component.                                                                                                                                                               |
+| <span class="prop-name">showFilterPanel</span>                           | <span class="prop-type">(targetColumnField?: string) =&gt; void</span>                                                                                            | Shows the filter panel. If `targetColumnField` is given, a filter for this field is also added.                                                                                                     |
+| <span class="prop-name">showPreferences</span>                           | <span class="prop-type">(newValue: GridPreferencePanelsValue) =&gt; void</span>                                                                                   | Displays the preferences panel. The `newValue` argument controls the content of the panel.                                                                                                          |
+| <span class="prop-name">sortColumn</span>                                | <span class="prop-type">(column: GridColDef, direction?: GridSortDirection, allowMultipleSorting?: boolean) =&gt; void</span>                                     | Sorts a column.                                                                                                                                                                                     |
+| <span class="prop-name">state</span>                                     | <span class="prop-type">GridState</span>                                                                                                                          | Property that contains the whole state of the grid.                                                                                                                                                 |
+| <span class="prop-name">subscribeEvent</span>                            | <span class="prop-type">&lt;E extends GridEventsStr&gt;(event: E, handler: GridEventListener&lt;E&gt;, options?: EventListenerOptions) =&gt; () =&gt; void</span> | Registers a handler for an event.                                                                                                                                                                   |
+| <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>                         | <span class="prop-type">(id: GridRowId) =&gt; void</span>                                                                                                         | Expands or collapses the detail panel of a row.                                                                                                                                                     |
+| <span class="prop-name">unpinColumn</span>                               | <span class="prop-type">(field: string) =&gt; void</span>                                                                                                         | Unpins a column.                                                                                                                                                                                    |
+| <span class="prop-name">unstable_getRowIndexRelativeToCurrentPage</span> | <span class="prop-type">(id: GridRowId) =&gt; number</span>                                                                                                       | Gets the row index of a row relative to the rows that are visible in the current page.                                                                                                              |
+| <span class="prop-name">updateColumn</span>                              | <span class="prop-type">(col: GridColDef) =&gt; void</span>                                                                                                       | Updates the definition of a column.                                                                                                                                                                 |
+| <span class="prop-name">updateColumns</span>                             | <span class="prop-type">(cols: GridColDef[]) =&gt; void</span>                                                                                                    | Updates the definition of multiple columns at the same time.                                                                                                                                        |
+| <span class="prop-name">updateRows</span>                                | <span class="prop-type">(updates: GridRowModelUpdate[]) =&gt; void</span>                                                                                         | Allows to updates, insert and delete rows in a single call.                                                                                                                                         |
+| <span class="prop-name">upsertFilterItem</span>                          | <span class="prop-type">(item: GridFilterItem) =&gt; void</span>                                                                                                  | Updates or inserts a [GridFilterItem](/api/data-grid/grid-filter-item/).                                                                                                                            |
diff --git a/docs/pages/api-docs/data-grid/grid-row-spacing-params.md b/docs/pages/api-docs/data-grid/grid-row-spacing-params.md
index ed6aad8a2d29..dfd2af391025 100644
--- a/docs/pages/api-docs/data-grid/grid-row-spacing-params.md
+++ b/docs/pages/api-docs/data-grid/grid-row-spacing-params.md
@@ -12,9 +12,9 @@ import { GridRowSpacingParams } from '@mui/x-data-grid';
 
 ## Properties
 
-| Name                                          | Type                                        | Description                                                |
-| :-------------------------------------------- | :------------------------------------------ | :--------------------------------------------------------- |
-| <span class="prop-name">id</span>             | <span class="prop-type">GridRowId</span>    | The row model of the row that the current cell belongs to. |
-| <span class="prop-name">isFirstVisible</span> | <span class="prop-type">boolean</span>      | Whether this row is the first visible or not.              |
-| <span class="prop-name">isLastVisible</span>  | <span class="prop-type">boolean</span>      | Whether this row is the last visible or not.               |
-| <span class="prop-name">model</span>          | <span class="prop-type">GridRowModel</span> | The row model of the row that the current cell belongs to. |
+| Name                                          | Type                                        | Description                                   |
+| :-------------------------------------------- | :------------------------------------------ | :-------------------------------------------- |
+| <span class="prop-name">id</span>             | <span class="prop-type">GridRowId</span>    | The row id.                                   |
+| <span class="prop-name">isFirstVisible</span> | <span class="prop-type">boolean</span>      | Whether this row is the first visible or not. |
+| <span class="prop-name">isLastVisible</span>  | <span class="prop-type">boolean</span>      | Whether this row is the last visible or not.  |
+| <span class="prop-name">model</span>          | <span class="prop-type">GridRowModel</span> | The row model.                                |
diff --git a/packages/grid/_modules_/grid/models/gridRows.ts b/packages/grid/_modules_/grid/models/gridRows.ts
index 0cafb1244138..63eb11139a76 100644
--- a/packages/grid/_modules_/grid/models/gridRows.ts
+++ b/packages/grid/_modules_/grid/models/gridRows.ts
@@ -82,11 +82,11 @@ export type GridRowId = string | number;
 
 export interface GridRowEntry {
   /**
-   * The row model of the row that the current cell belongs to.
+   * The row id.
    */
   id: GridRowId;
   /**
-   * The row model of the row that the current cell belongs to.
+   * The row model.
    */
   model: GridRowModel;
 }
diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json
index 983d886a562b..d0e1e9e31141 100644
--- a/scripts/x-data-grid-pro.exports.json
+++ b/scripts/x-data-grid-pro.exports.json
@@ -335,6 +335,7 @@
   { "name": "GridRowsMetaApi", "kind": "Interface" },
   { "name": "gridRowsMetaSelector", "kind": "Variable" },
   { "name": "GridRowSpacing", "kind": "Interface" },
+  { "name": "GridRowSpacingApi", "kind": "Interface" },
   { "name": "GridRowSpacingParams", "kind": "Interface" },
   { "name": "GridRowsProp", "kind": "TypeAlias" },
   { "name": "GridRowsState", "kind": "Interface" },
diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json
index da5307855249..9b410cc02773 100644
--- a/scripts/x-data-grid.exports.json
+++ b/scripts/x-data-grid.exports.json
@@ -335,6 +335,7 @@
   { "name": "GridRowsMetaApi", "kind": "Interface" },
   { "name": "gridRowsMetaSelector", "kind": "Variable" },
   { "name": "GridRowSpacing", "kind": "Interface" },
+  { "name": "GridRowSpacingApi", "kind": "Interface" },
   { "name": "GridRowSpacingParams", "kind": "Interface" },
   { "name": "GridRowsProp", "kind": "TypeAlias" },
   { "name": "GridRowsState", "kind": "Interface" },

From 092be634fe55fb385c03d49c95a4b5b539e0204f Mon Sep 17 00:00:00 2001
From: flavien <flaviendelangle@gmail.com>
Date: Tue, 8 Feb 2022 15:18:14 +0100
Subject: [PATCH 11/32] Work

---
 .../data-grid/style/StripedGrid.tsx           |  0
 .../data-grid/style/StripedGrid.tsx.preview   |  0
 docs/data/data-grid/style/style.md            |  2 +-
 docs/src/pages/components/.eslintrc.js        |  8 --
 .../components/data-grid/style/StripedGrid.js | 79 -------------------
 5 files changed, 1 insertion(+), 88 deletions(-)
 rename docs/{src/pages/components => data}/data-grid/style/StripedGrid.tsx (100%)
 rename docs/{src/pages/components => data}/data-grid/style/StripedGrid.tsx.preview (100%)
 delete mode 100644 docs/src/pages/components/.eslintrc.js
 delete mode 100644 docs/src/pages/components/data-grid/style/StripedGrid.js

diff --git a/docs/src/pages/components/data-grid/style/StripedGrid.tsx b/docs/data/data-grid/style/StripedGrid.tsx
similarity index 100%
rename from docs/src/pages/components/data-grid/style/StripedGrid.tsx
rename to docs/data/data-grid/style/StripedGrid.tsx
diff --git a/docs/src/pages/components/data-grid/style/StripedGrid.tsx.preview b/docs/data/data-grid/style/StripedGrid.tsx.preview
similarity index 100%
rename from docs/src/pages/components/data-grid/style/StripedGrid.tsx.preview
rename to docs/data/data-grid/style/StripedGrid.tsx.preview
diff --git a/docs/data/data-grid/style/style.md b/docs/data/data-grid/style/style.md
index bbad4a8f0880..634efbe7c947 100644
--- a/docs/data/data-grid/style/style.md
+++ b/docs/data/data-grid/style/style.md
@@ -121,7 +121,7 @@ Choose between one of the following values: 'left' | 'right' | 'center'.
 
 The following demo illustrates how the rows of the grid can be stripped.
 
-{{"demo": "pages/components/data-grid/style/StripedGrid.js", "bg": "inline", "defaultCodeOpen": false}}
+{{"demo": "StripedGrid.js", "bg": "inline", "defaultCodeOpen": false}}
 
 ## Custom theme
 
diff --git a/docs/src/pages/components/.eslintrc.js b/docs/src/pages/components/.eslintrc.js
deleted file mode 100644
index 4eb66e683b1f..000000000000
--- a/docs/src/pages/components/.eslintrc.js
+++ /dev/null
@@ -1,8 +0,0 @@
-module.exports = {
-  rules: {
-    // useful for interactions feedback
-    'no-console': ['off', { allow: ['info'] }],
-    // not very friendly to prop forwarding
-    'react/jsx-handler-names': 'off',
-  },
-};
diff --git a/docs/src/pages/components/data-grid/style/StripedGrid.js b/docs/src/pages/components/data-grid/style/StripedGrid.js
deleted file mode 100644
index 629e89c1f028..000000000000
--- a/docs/src/pages/components/data-grid/style/StripedGrid.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { alpha, styled } from '@mui/material/styles';
-import { DataGrid, GridRow, gridClasses } from '@mui/x-data-grid';
-import { useDemoData } from '@mui/x-data-grid-generator';
-import clsx from 'clsx';
-
-const ODD_OPACITY = 0.2;
-
-const StripedDataGrid = styled(DataGrid)(({ theme }) => ({
-  [`& .${gridClasses.row}.even`]: {
-    backgroundColor: '#EEEEEE',
-    '&:hover, &.Mui-hovered': {
-      backgroundColor: alpha(theme.palette.primary.main, ODD_OPACITY),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent',
-      },
-    },
-    '&.Mui-selected': {
-      backgroundColor: alpha(
-        theme.palette.primary.main,
-        ODD_OPACITY + theme.palette.action.selectedOpacity,
-      ),
-      '&:hover, &.Mui-hovered': {
-        backgroundColor: alpha(
-          theme.palette.primary.main,
-          ODD_OPACITY +
-            theme.palette.action.selectedOpacity +
-            theme.palette.action.hoverOpacity,
-        ),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: alpha(
-            theme.palette.primary.main,
-            ODD_OPACITY + theme.palette.action.selectedOpacity,
-          ),
-        },
-      },
-    },
-  },
-}));
-
-const CustomRow = (props) => (
-  <GridRow
-    {...props}
-    className={clsx(
-      props.className,
-      props.indexes.fromPageRows % 2 === 0 ? 'even' : undefined,
-    )}
-  />
-);
-
-CustomRow.propTypes = {
-  className: PropTypes.string,
-  indexes: PropTypes.shape({
-    /**
-     * Index of the row in the whole sorted and filtered dataset.
-     */
-    fromFilteredRows: PropTypes.number.isRequired,
-    /**
-     * Index of the row in the current page.
-     * If the pagination is disabled, this value will be equal to the `fromFilteredRows` value.
-     */
-    fromPageRows: PropTypes.number.isRequired,
-  }).isRequired,
-};
-
-export default function StripedGrid() {
-  const { data, loading } = useDemoData({
-    dataSet: 'Employee',
-    rowLength: 200,
-  });
-
-  return (
-    <div style={{ height: 400, width: '100%' }}>
-      <StripedDataGrid loading={loading} {...data} components={{ Row: CustomRow }} />
-    </div>
-  );
-}

From d2ac7985a6ab5a24c8971b048c26fa171dc847d9 Mon Sep 17 00:00:00 2001
From: flavien <flaviendelangle@gmail.com>
Date: Tue, 8 Feb 2022 15:25:06 +0100
Subject: [PATCH 12/32] Fix

---
 docs/data/data-grid/style/StripedGrid.js | 79 ++++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 docs/data/data-grid/style/StripedGrid.js

diff --git a/docs/data/data-grid/style/StripedGrid.js b/docs/data/data-grid/style/StripedGrid.js
new file mode 100644
index 000000000000..629e89c1f028
--- /dev/null
+++ b/docs/data/data-grid/style/StripedGrid.js
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { alpha, styled } from '@mui/material/styles';
+import { DataGrid, GridRow, gridClasses } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import clsx from 'clsx';
+
+const ODD_OPACITY = 0.2;
+
+const StripedDataGrid = styled(DataGrid)(({ theme }) => ({
+  [`& .${gridClasses.row}.even`]: {
+    backgroundColor: '#EEEEEE',
+    '&:hover, &.Mui-hovered': {
+      backgroundColor: alpha(theme.palette.primary.main, ODD_OPACITY),
+      '@media (hover: none)': {
+        backgroundColor: 'transparent',
+      },
+    },
+    '&.Mui-selected': {
+      backgroundColor: alpha(
+        theme.palette.primary.main,
+        ODD_OPACITY + theme.palette.action.selectedOpacity,
+      ),
+      '&:hover, &.Mui-hovered': {
+        backgroundColor: alpha(
+          theme.palette.primary.main,
+          ODD_OPACITY +
+            theme.palette.action.selectedOpacity +
+            theme.palette.action.hoverOpacity,
+        ),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: alpha(
+            theme.palette.primary.main,
+            ODD_OPACITY + theme.palette.action.selectedOpacity,
+          ),
+        },
+      },
+    },
+  },
+}));
+
+const CustomRow = (props) => (
+  <GridRow
+    {...props}
+    className={clsx(
+      props.className,
+      props.indexes.fromPageRows % 2 === 0 ? 'even' : undefined,
+    )}
+  />
+);
+
+CustomRow.propTypes = {
+  className: PropTypes.string,
+  indexes: PropTypes.shape({
+    /**
+     * Index of the row in the whole sorted and filtered dataset.
+     */
+    fromFilteredRows: PropTypes.number.isRequired,
+    /**
+     * Index of the row in the current page.
+     * If the pagination is disabled, this value will be equal to the `fromFilteredRows` value.
+     */
+    fromPageRows: PropTypes.number.isRequired,
+  }).isRequired,
+};
+
+export default function StripedGrid() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Employee',
+    rowLength: 200,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <StripedDataGrid loading={loading} {...data} components={{ Row: CustomRow }} />
+    </div>
+  );
+}

From 138c722e806c2ac7f2be9a7ad1e009d7d3efaf13 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Fri, 25 Feb 2022 17:02:20 -0300
Subject: [PATCH 13/32] Move getRowSpacing call to hydrateRowsMeta

---
 docs/data/data-grid/rows/rows.md              |  2 +-
 .../src/useDataGridProComponent.tsx           |  2 -
 .../hooks/features/rows/useGridRowSpacing.ts  | 65 -------------------
 .../hooks/features/rows/useGridRows.ts        | 14 ++++
 .../hooks/features/rows/useGridRowsMeta.ts    | 37 +++++++----
 .../src/internals/models/api/gridApiCommon.ts |  5 +-
 .../src/internals/models/api/gridRowApi.ts    | 11 +---
 .../src/internals/models/api/gridSortApi.ts   |  1 +
 packages/grid/x-data-grid/src/private.ts      |  1 -
 .../x-data-grid/src/useDataGridComponent.tsx  |  2 -
 scripts/x-data-grid-pro.exports.json          |  1 -
 scripts/x-data-grid.exports.json              |  1 -
 12 files changed, 47 insertions(+), 95 deletions(-)
 delete mode 100644 packages/grid/x-data-grid/src/internals/hooks/features/rows/useGridRowSpacing.ts

diff --git a/docs/data/data-grid/rows/rows.md b/docs/data/data-grid/rows/rows.md
index a49ba6501f11..7a5fa87fc8b8 100644
--- a/docs/data/data-grid/rows/rows.md
+++ b/docs/data/data-grid/rows/rows.md
@@ -107,7 +107,7 @@ This prop is called with a [`GridRowSpacingParams`](/api/data-grid/grid-row-spac
 Observe that the value specified will only be used internally to calculate which rows to render during scroll and for space allocation.
 Use it with CSS to add a margin or border between rows, as shown in the demo below:
 
-{{"demo": "pages/components/data-grid/rows/RowMarginGrid.js", "bg": "inline"}}
+{{"demo": "RowMarginGrid.js", "bg": "inline"}}
 
 ## Styling rows
 
diff --git a/packages/grid/x-data-grid-pro/src/useDataGridProComponent.tsx b/packages/grid/x-data-grid-pro/src/useDataGridProComponent.tsx
index 60d1f017e1c7..9078e0614cdb 100644
--- a/packages/grid/x-data-grid-pro/src/useDataGridProComponent.tsx
+++ b/packages/grid/x-data-grid-pro/src/useDataGridProComponent.tsx
@@ -19,7 +19,6 @@ import {
   unstable_pageStateInitializer as pageStateInitializer,
   unstable_useGridPreferencesPanel as useGridPreferencesPanel,
   unstable_useGridEditing as useGridEditing,
-  unstable_useGridRowSpacing as useGridRowSpacing,
   unstable_useGridRows as useGridRows,
   unstable_rowsStateInitializer as rowsStateInitializer,
   unstable_useGridRowsMeta as useGridRowsMeta,
@@ -101,7 +100,6 @@ export const useDataGridProComponent = (
   useGridDensity(apiRef, props);
   useGridColumnReorder(apiRef, props);
   useGridColumnResize(apiRef, props);
-  useGridRowSpacing(apiRef, props);
   useGridPagination(apiRef, props);
   useGridRowsMeta(apiRef, props);
   useGridScroll(apiRef, props);
diff --git a/packages/grid/x-data-grid/src/internals/hooks/features/rows/useGridRowSpacing.ts b/packages/grid/x-data-grid/src/internals/hooks/features/rows/useGridRowSpacing.ts
deleted file mode 100644
index 077a1337d151..000000000000
--- a/packages/grid/x-data-grid/src/internals/hooks/features/rows/useGridRowSpacing.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { GridPreProcessor, useGridRegisterPreProcessor } from '../../core/preProcessing';
-import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-import { useCurrentPageRows } from '../../utils/useCurrentPageRows';
-import { GridRowSpacingParams } from '../../../models/params/gridRowParams';
-import { GridRowId } from '../../../models/gridRows';
-import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { GridRowSpacingApi } from '../../../models/api/gridRowApi';
-import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
-
-/**
- * @requires useGridPage (state)
- * @requires useGridPageSize (state)
- * @requires useGridFilter (state)
- * @requires useGridColumns (state, method)
- * @requires useGridRows (state, method)
- */
-export const useGridRowSpacing = (
-  apiRef: React.MutableRefObject<GridApiCommunity>,
-  props: Pick<DataGridProcessedProps, 'getRowSpacing' | 'pagination' | 'paginationMode'>,
-) => {
-  const currentPage = useCurrentPageRows(apiRef, props);
-
-  const lookup = React.useMemo(
-    () =>
-      currentPage.rows.reduce((acc, { id }, index) => {
-        acc[id] = index;
-        return acc;
-      }, {} as Record<GridRowId, number>),
-    [currentPage.rows],
-  );
-
-  // This method is temporarily being registered in this hook because if moved
-  // to useGridRows it will be called without having the required states initialized.
-  const getRowIndexRelativeToCurrentPage = React.useCallback((id) => lookup[id], [lookup]);
-
-  const rowApi: GridRowSpacingApi = {
-    unstable_getRowIndexRelativeToCurrentPage: getRowIndexRelativeToCurrentPage,
-  };
-
-  useGridApiMethod(apiRef, rowApi, 'GridRowSpacingApi');
-
-  const { getRowSpacing } = props;
-
-  const addRowSpacing = React.useCallback<GridPreProcessor<'rowHeight'>>(
-    (initialValue, row) => {
-      if (!getRowSpacing) {
-        return initialValue;
-      }
-
-      const index = apiRef.current.unstable_getRowIndexRelativeToCurrentPage(row.id);
-      const params: GridRowSpacingParams = {
-        ...row,
-        isFirstVisible: index === 0,
-        isLastVisible: index === currentPage.rows.length - 1,
-      };
-
-      const spacing = getRowSpacing(params);
-      return { ...initialValue, spacingTop: spacing.top ?? 0, spacingBottom: spacing.bottom ?? 0 };
-    },
-    [apiRef, currentPage.rows.length, getRowSpacing],
-  );
-
-  useGridRegisterPreProcessor(apiRef, 'rowHeight', addRowSpacing);
-};
diff --git a/packages/grid/x-data-grid/src/internals/hooks/features/rows/useGridRows.ts b/packages/grid/x-data-grid/src/internals/hooks/features/rows/useGridRows.ts
index 9eb69eb7e36a..afa7fd388978 100644
--- a/packages/grid/x-data-grid/src/internals/hooks/features/rows/useGridRows.ts
+++ b/packages/grid/x-data-grid/src/internals/hooks/features/rows/useGridRows.ts
@@ -22,6 +22,7 @@ import {
 } from './gridRowsSelector';
 import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
+import { useCurrentPageRows } from '../../utils/useCurrentPageRows';
 import {
   GridRowsInternalCacheState,
   GridRowInternalCacheValue,
@@ -142,12 +143,24 @@ export const useGridRows = (
 
   const logger = useGridLogger(apiRef, 'useGridRows');
   const rowsCache = React.useRef(apiRef.current.state.rowsCache); // To avoid listing rowsCache as useEffect dep
+  const currentPage = useCurrentPageRows(apiRef, props);
 
   const getRow = React.useCallback<GridRowApi['getRow']>(
     (id) => gridRowsLookupSelector(apiRef)[id] ?? null,
     [apiRef],
   );
 
+  const lookup = React.useMemo(
+    () =>
+      currentPage.rows.reduce((acc, { id }, index) => {
+        acc[id] = index;
+        return acc;
+      }, {} as Record<GridRowId, number>),
+    [currentPage.rows],
+  );
+
+  const getRowIndexRelativeToCurrentPage = React.useCallback((id) => lookup[id], [lookup]);
+
   const throttledRowsChange = React.useCallback(
     (newState: GridRowsInternalCacheState, throttle: boolean) => {
       const run = () => {
@@ -388,6 +401,7 @@ export const useGridRows = (
     updateRows,
     setRowChildrenExpansion,
     getRowNode,
+    unstable_getRowIndexRelativeToCurrentPage: getRowIndexRelativeToCurrentPage,
   };
 
   useGridApiMethod(apiRef, rowApi, 'GridRowApi');
diff --git a/packages/grid/x-data-grid/src/internals/hooks/features/rows/useGridRowsMeta.ts b/packages/grid/x-data-grid/src/internals/hooks/features/rows/useGridRowsMeta.ts
index 3adce142b6cc..69dfe79d414b 100644
--- a/packages/grid/x-data-grid/src/internals/hooks/features/rows/useGridRowsMeta.ts
+++ b/packages/grid/x-data-grid/src/internals/hooks/features/rows/useGridRowsMeta.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridRowsMetaApi } from '../../../models/api/gridRowsMetaApi';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-import { getCurrentPageRows } from '../../utils/useCurrentPageRows';
+import { useCurrentPageRows } from '../../utils/useCurrentPageRows';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { GridRowId } from '../../../models/gridRows';
 import { useGridSelector } from '../../utils/useGridSelector';
@@ -24,9 +24,12 @@ import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
  */
 export const useGridRowsMeta = (
   apiRef: React.MutableRefObject<GridApiCommunity>,
-  props: Pick<DataGridProcessedProps, 'getRowHeight' | 'pagination' | 'paginationMode'>,
+  props: Pick<
+    DataGridProcessedProps,
+    'getRowHeight' | 'getRowSpacing' | 'pagination' | 'paginationMode'
+  >,
 ): void => {
-  const { getRowHeight, pagination, paginationMode } = props;
+  const { getRowHeight, getRowSpacing } = props;
   const rowsHeightLookup = React.useRef<{
     [key: GridRowId]: { value: number; isResized: boolean };
   }>({});
@@ -34,6 +37,7 @@ export const useGridRowsMeta = (
   const filterState = useGridSelector(apiRef, gridFilterStateSelector);
   const paginationState = useGridSelector(apiRef, gridPaginationSelector);
   const sortingState = useGridSelector(apiRef, gridSortingStateSelector);
+  const currentPage = useCurrentPageRows(apiRef, props);
 
   useGridStateInit(apiRef, (state) => ({
     ...state,
@@ -44,16 +48,11 @@ export const useGridRowsMeta = (
   }));
 
   const hydrateRowsMeta = React.useCallback(() => {
-    const { rows } = getCurrentPageRows(apiRef, {
-      pagination,
-      paginationMode,
-    });
-
     apiRef.current.setState((state) => {
       const positions: number[] = [];
       const densityFactor = gridDensityFactorSelector(state, apiRef.current.instanceId);
       const currentRowHeight = gridDensityRowHeightSelector(state, apiRef.current.instanceId);
-      const currentPageTotalHeight = rows.reduce((acc: number, row) => {
+      const currentPageTotalHeight = currentPage.rows.reduce((acc: number, row) => {
         positions.push(acc);
         let baseRowHeight: number;
 
@@ -72,9 +71,25 @@ export const useGridRowsMeta = (
           }
         }
 
+        // We use an object to make simple to check if a height is already added or not
+        const initialHeights: Record<string, number> = { base: baseRowHeight };
+
+        if (getRowSpacing) {
+          const index = apiRef.current.unstable_getRowIndexRelativeToCurrentPage(row.id);
+
+          const spacing = getRowSpacing({
+            ...row,
+            isFirstVisible: index === 0,
+            isLastVisible: index === currentPage.rows.length - 1,
+          });
+
+          initialHeights.spacingTop = spacing.top ?? 0;
+          initialHeights.spacingBottom = spacing.bottom ?? 0;
+        }
+
         const heights = apiRef.current.unstable_applyPreProcessors(
           'rowHeight',
-          { base: baseRowHeight }, // We use an object to make simple to check if a size was already added or not
+          initialHeights,
           row,
         ) as Record<string, number>;
 
@@ -94,7 +109,7 @@ export const useGridRowsMeta = (
       };
     });
     apiRef.current.forceUpdate();
-  }, [apiRef, pagination, paginationMode, getRowHeight]);
+  }, [apiRef, currentPage.rows, getRowSpacing, getRowHeight]);
 
   const getTargetRowHeight = (rowId: GridRowId): number =>
     rowsHeightLookup.current[rowId]?.value || rowHeight;
diff --git a/packages/grid/x-data-grid/src/internals/models/api/gridApiCommon.ts b/packages/grid/x-data-grid/src/internals/models/api/gridApiCommon.ts
index d5ca4a100f11..a8bf2d33d249 100644
--- a/packages/grid/x-data-grid/src/internals/models/api/gridApiCommon.ts
+++ b/packages/grid/x-data-grid/src/internals/models/api/gridApiCommon.ts
@@ -12,7 +12,7 @@ import type { GridParamsApi } from './gridParamsApi';
 import { GridPreferencesPanelApi } from './gridPreferencesPanelApi';
 import { GridPrintExportApi } from './gridPrintExportApi';
 import { GridDisableVirtualizationApi } from './gridDisableVirtualizationApi';
-import { GridRowApi, GridRowSpacingApi } from './gridRowApi';
+import { GridRowApi } from './gridRowApi';
 import { GridRowsMetaApi } from './gridRowsMetaApi';
 import { GridSelectionApi } from './gridSelectionApi';
 import { GridSortApi } from './gridSortApi';
@@ -56,5 +56,4 @@ export interface GridApiCommon
     GridLocaleTextApi,
     GridClipboardApi,
     GridScrollApi,
-    GridStateApiUntyped,
-    GridRowSpacingApi {}
+    GridStateApiUntyped {}
diff --git a/packages/grid/x-data-grid/src/internals/models/api/gridRowApi.ts b/packages/grid/x-data-grid/src/internals/models/api/gridRowApi.ts
index 6f5b31e5eb5c..fff1427381e7 100644
--- a/packages/grid/x-data-grid/src/internals/models/api/gridRowApi.ts
+++ b/packages/grid/x-data-grid/src/internals/models/api/gridRowApi.ts
@@ -47,16 +47,11 @@ export interface GridRowApi {
    * @param {boolean} isExpanded A boolean indicating if the row must be expanded or collapsed.
    */
   setRowChildrenExpansion: (id: GridRowId, isExpanded: boolean) => void;
-}
-
-/**
- * The Row API interface that is available in the grid `apiRef`.
- */
-export interface GridRowSpacingApi {
   /**
-   * Gets the row index of a row relative to the rows that are visible in the current page.
-   * @param {GridRowId} id The `GridRowId` of the row.
+   * Gets the index of a row relative to the rows that are visible in the current page.
+   * @param {GridRowId} id The row id.
    * @returns {number} The index of the row.
+   * @ignore - do not document.
    */
   unstable_getRowIndexRelativeToCurrentPage: (id: GridRowId) => number;
 }
diff --git a/packages/grid/x-data-grid/src/internals/models/api/gridSortApi.ts b/packages/grid/x-data-grid/src/internals/models/api/gridSortApi.ts
index eb9d8f529fd6..4498777205f4 100644
--- a/packages/grid/x-data-grid/src/internals/models/api/gridSortApi.ts
+++ b/packages/grid/x-data-grid/src/internals/models/api/gridSortApi.ts
@@ -53,6 +53,7 @@ export interface GridSortApi {
    * The index is based on the sorted but unfiltered row list.
    * @param {GridRowId} id The `GridRowId` of the row.
    * @returns {number} The index of the row.
+   * @deprecated Use `unstable_getRowIndexRelativeToCurrentPage` instead.
    */
   getRowIndex: (id: GridRowId) => number;
 }
diff --git a/packages/grid/x-data-grid/src/private.ts b/packages/grid/x-data-grid/src/private.ts
index d764c2231c4e..d48a220c9d55 100644
--- a/packages/grid/x-data-grid/src/private.ts
+++ b/packages/grid/x-data-grid/src/private.ts
@@ -46,7 +46,6 @@ export {
   useGridRows as unstable_useGridRows,
   rowsStateInitializer as unstable_rowsStateInitializer,
 } from './internals/hooks/features/rows/useGridRows';
-export { useGridRowSpacing as unstable_useGridRowSpacing } from './internals/hooks/features/rows/useGridRowSpacing';
 export { useGridRowsMeta as unstable_useGridRowsMeta } from './internals/hooks/features/rows/useGridRowsMeta';
 export { useGridParamsApi as unstable_useGridParamsApi } from './internals/hooks/features/rows/useGridParamsApi';
 export { useGridSelection as unstable_useGridSelection } from './internals/hooks/features/selection/useGridSelection';
diff --git a/packages/grid/x-data-grid/src/useDataGridComponent.tsx b/packages/grid/x-data-grid/src/useDataGridComponent.tsx
index 7c71a9b76a9c..bc4e95540c89 100644
--- a/packages/grid/x-data-grid/src/useDataGridComponent.tsx
+++ b/packages/grid/x-data-grid/src/useDataGridComponent.tsx
@@ -38,7 +38,6 @@ import { useGridSelectionPreProcessors } from './internals/hooks/features/select
 import { useGridInitializeState } from './internals/hooks/utils/useGridInitializeState';
 import { pageSizeStateInitializer } from './internals/hooks/features/pagination/useGridPageSize';
 import { pageStateInitializer } from './internals/hooks/features/pagination/useGridPage';
-import { useGridRowSpacing } from './internals/hooks/features/rows/useGridRowSpacing';
 
 export const useDataGridComponent = (props: DataGridProcessedProps) => {
   const apiRef = useGridInitialization<GridApiCommunity>(undefined, props);
@@ -69,7 +68,6 @@ export const useDataGridComponent = (props: DataGridProcessedProps) => {
   useGridFilter(apiRef, props);
   useGridDensity(apiRef, props);
   useGridPagination(apiRef, props);
-  useGridRowSpacing(apiRef, props);
   useGridRowsMeta(apiRef, props);
   useGridScroll(apiRef, props);
   useGridColumnMenu(apiRef);
diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json
index 3e1cf08a9e0c..90aa0f576c69 100644
--- a/scripts/x-data-grid-pro.exports.json
+++ b/scripts/x-data-grid-pro.exports.json
@@ -356,7 +356,6 @@
   { "name": "gridRowsMetaSelector", "kind": "Variable" },
   { "name": "GridRowsMetaState", "kind": "Interface" },
   { "name": "GridRowSpacing", "kind": "Interface" },
-  { "name": "GridRowSpacingApi", "kind": "Interface" },
   { "name": "GridRowSpacingParams", "kind": "Interface" },
   { "name": "GridRowsProp", "kind": "TypeAlias" },
   { "name": "GridRowsState", "kind": "ExportSpecifier" },
diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json
index d1b156943c24..cfccb1df112d 100644
--- a/scripts/x-data-grid.exports.json
+++ b/scripts/x-data-grid.exports.json
@@ -320,7 +320,6 @@
   { "name": "gridRowsMetaSelector", "kind": "Variable" },
   { "name": "GridRowsMetaState", "kind": "Interface" },
   { "name": "GridRowSpacing", "kind": "Interface" },
-  { "name": "GridRowSpacingApi", "kind": "Interface" },
   { "name": "GridRowSpacingParams", "kind": "Interface" },
   { "name": "GridRowsProp", "kind": "TypeAlias" },
   { "name": "GridRowsState", "kind": "ExportSpecifier" },

From 80995eebb6ba8fdc455fea971114070ef9d6899d Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Fri, 25 Feb 2022 17:13:51 -0300
Subject: [PATCH 14/32] =?UTF-8?q?Jos=C3=A9's=20review?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/data/data-grid/rows/rows.md | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/docs/data/data-grid/rows/rows.md b/docs/data/data-grid/rows/rows.md
index 7a5fa87fc8b8..a3e5a1d126b2 100644
--- a/docs/data/data-grid/rows/rows.md
+++ b/docs/data/data-grid/rows/rows.md
@@ -102,10 +102,22 @@ If you need some rows to have different row heights this can be achieved using t
 
 ## Row spacing
 
-By using the `getRowSpacing` prop you can specify the vertical space between rows.
+You can use the `getRowSpacing` prop to specify the vertical space between rows.
 This prop is called with a [`GridRowSpacingParams`](/api/data-grid/grid-row-spacing-params/) object.
-Observe that the value specified will only be used internally to calculate which rows to render during scroll and for space allocation.
-Use it with CSS to add a margin or border between rows, as shown in the demo below:
+
+```tsx
+const getRowSpacing = React.useCallback((params: GridRowSpacingParams) => {
+  return {
+    top: params.isFirstVisible ? 0 : 5,
+    bottom: params.isLastVisible ? 0 : 5,
+  };
+}, []);
+```
+
+The value specified is only used internally to calculate which rows to render during scroll and for space allocation.
+This decision was taken to allow deep customization of the border styles.
+The same params from above are also available to the `getRowClassName` prop.
+Use it to add a custom class name to the rows and customize the border or margin with CSS, as shown in the complete demo below:
 
 {{"demo": "RowMarginGrid.js", "bg": "inline"}}
 

From c2c5cdc64a090bd8183560f0bba36a848976bd4c Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Fri, 25 Feb 2022 17:52:30 -0300
Subject: [PATCH 15/32] Remove ignored method from docs

---
 docs/pages/api-docs/data-grid/grid-api.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/pages/api-docs/data-grid/grid-api.md b/docs/pages/api-docs/data-grid/grid-api.md
index efe013922550..149f53c2ef22 100644
--- a/docs/pages/api-docs/data-grid/grid-api.md
+++ b/docs/pages/api-docs/data-grid/grid-api.md
@@ -105,7 +105,6 @@ import { GridApi } from '@mui/x-data-grid-pro';
 | <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>                         | <span class="prop-type">(id: GridRowId) =&gt; void</span>                                                                                                         | Expands or collapses the detail panel of a row.                                                                                                                                                     |
 | <span class="prop-name">unpinColumn</span>                               | <span class="prop-type">(field: string) =&gt; void</span>                                                                                                         | Unpins a column.                                                                                                                                                                                    |
-| <span class="prop-name">unstable_getRowIndexRelativeToCurrentPage</span> | <span class="prop-type">(id: GridRowId) =&gt; number</span>                                                                                                       | Gets the row index of a row relative to the rows that are visible in the current page.                                                                                                              |
 | <span class="prop-name">updateColumn</span>                              | <span class="prop-type">(col: GridColDef) =&gt; void</span>                                                                                                       | Updates the definition of a column.                                                                                                                                                                 |
 | <span class="prop-name">updateColumns</span>                             | <span class="prop-type">(cols: GridColDef[]) =&gt; void</span>                                                                                                    | Updates the definition of multiple columns at the same time.                                                                                                                                        |
 | <span class="prop-name">updateRows</span>                                | <span class="prop-type">(updates: GridRowModelUpdate[]) =&gt; void</span>                                                                                         | Allows to updates, insert and delete rows in a single call.                                                                                                                                         |

From cbd53831f5dc1e13b92ad9eedcadd7d2815eb324 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Fri, 4 Mar 2022 17:25:20 -0300
Subject: [PATCH 16/32] Make it apply real margin

---
 .../src/components/DataGridProVirtualScroller.tsx  |  5 ++++-
 .../grid/x-data-grid/src/components/GridRow.tsx    | 14 +++++++++++++-
 .../src/hooks/features/rows/useGridRowsMeta.ts     | 12 +++++++++---
 .../x-data-grid/src/models/api/gridRowsMetaApi.ts  |  7 +++++++
 4 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx b/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx
index 6ef24b5775b2..2d3333e75080 100644
--- a/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx
+++ b/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx
@@ -258,7 +258,10 @@ const DataGridProVirtualScroller = React.forwardRef<
 
       if (React.isValidElement(content) && exists) {
         const height = detailPanelsHeights[id];
-        const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id);
+        const sizes = apiRef.current.unstable_getRowInternalSizes(id);
+        const spacingTop = sizes?.spacingTop || 0;
+        const top =
+          rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id) + spacingTop;
 
         panels.push(
           <VirtualScrollerDetailPanel
diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx
index 643aa3cce121..de10ca851b8c 100644
--- a/packages/grid/x-data-grid/src/components/GridRow.tsx
+++ b/packages/grid/x-data-grid/src/components/GridRow.tsx
@@ -189,11 +189,23 @@ function GridRow(props: React.HTMLAttributes<HTMLDivElement> & GridRowProps) {
   );
 
   const style = {
+    ...styleProp,
     maxHeight: rowHeight,
     minHeight: rowHeight,
-    ...styleProp,
   };
 
+  const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+
+  if (sizes?.spacingTop) {
+    const property = rootProps.rowSpacingType === 'border' ? 'borderTopWidth' : 'marginTop';
+    style[property] = sizes.spacingTop;
+  }
+
+  if (sizes?.spacingBottom) {
+    const property = rootProps.rowSpacingType === 'border' ? 'borderBottomWidth' : 'marginBottom';
+    style[property] = sizes.spacingBottom;
+  }
+
   let rowClassName: string | null = null;
 
   if (typeof rootProps.getRowClassName === 'function') {
diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
index 69dfe79d414b..d6eb7f1429ea 100644
--- a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
+++ b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
@@ -31,7 +31,7 @@ export const useGridRowsMeta = (
 ): void => {
   const { getRowHeight, getRowSpacing } = props;
   const rowsHeightLookup = React.useRef<{
-    [key: GridRowId]: { value: number; isResized: boolean };
+    [key: GridRowId]: { value: number; isResized: boolean; sizes: Record<string, number> };
   }>({});
   const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
   const filterState = useGridSelector(apiRef, gridFilterStateSelector);
@@ -87,16 +87,17 @@ export const useGridRowsMeta = (
           initialHeights.spacingBottom = spacing.bottom ?? 0;
         }
 
-        const heights = apiRef.current.unstable_applyPreProcessors(
+        const sizes = apiRef.current.unstable_applyPreProcessors(
           'rowHeight',
           initialHeights,
           row,
         ) as Record<string, number>;
 
-        const finalRowHeight = Object.values(heights).reduce((acc2, value) => acc2 + value, 0);
+        const finalRowHeight = Object.values(sizes).reduce((acc2, value) => acc2 + value, 0);
 
         rowsHeightLookup.current[row.id] = {
           value: baseRowHeight,
+          sizes,
           isResized,
         };
 
@@ -114,11 +115,15 @@ export const useGridRowsMeta = (
   const getTargetRowHeight = (rowId: GridRowId): number =>
     rowsHeightLookup.current[rowId]?.value || rowHeight;
 
+  const getRowInternalSizes = (rowId: GridRowId): Record<string, number> | undefined =>
+    rowsHeightLookup.current[rowId]?.sizes;
+
   const setRowHeight = React.useCallback<GridRowsMetaApi['unstable_setRowHeight']>(
     (id: GridRowId, height: number) => {
       rowsHeightLookup.current[id] = {
         value: height,
         isResized: true,
+        sizes: { ...rowsHeightLookup.current[id].sizes, base: height },
       };
       hydrateRowsMeta();
     },
@@ -147,6 +152,7 @@ export const useGridRowsMeta = (
 
   const rowsMetaApi: GridRowsMetaApi = {
     unstable_getRowHeight: getTargetRowHeight,
+    unstable_getRowInternalSizes: getRowInternalSizes,
     unstable_setRowHeight: setRowHeight,
   };
 
diff --git a/packages/grid/x-data-grid/src/models/api/gridRowsMetaApi.ts b/packages/grid/x-data-grid/src/models/api/gridRowsMetaApi.ts
index 082b14148d94..dfe5b6368208 100644
--- a/packages/grid/x-data-grid/src/models/api/gridRowsMetaApi.ts
+++ b/packages/grid/x-data-grid/src/models/api/gridRowsMetaApi.ts
@@ -11,6 +11,13 @@ export interface GridRowsMetaApi {
    * @ignore - do not document.
    */
   unstable_getRowHeight: (id: GridRowId) => number;
+  /**
+   * Gets all sizes that compose the total height that the given row takes.
+   * @param {GridRowId} id The id of the row.
+   * @returns {Record<string, number>} The object containing the sizes.
+   * @ignore - do not document.
+   */
+  unstable_getRowInternalSizes: (id: GridRowId) => Record<string, number> | undefined;
   /**
    * Updates the base height of a row.
    * @param {GridRowId} id The id of the row.

From eec647c30a1be4d9d8293b1bc335936bfa8579e5 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Fri, 4 Mar 2022 17:25:43 -0300
Subject: [PATCH 17/32] Add rowSpacingType

---
 docs/data/data-grid/rows/RowMarginGrid.js     | 21 ---------
 docs/data/data-grid/rows/RowMarginGrid.tsx    | 27 +----------
 .../data-grid/rows/RowMarginGrid.tsx.preview  |  9 ++++
 docs/data/data-grid/rows/rows.md              | 21 ++++++---
 .../api-docs/data-grid/data-grid-pro.json     |  4 ++
 docs/pages/api-docs/data-grid/data-grid.json  |  4 ++
 docs/pages/x/api/data-grid/data-grid-pro.json |  4 ++
 docs/pages/x/api/data-grid/data-grid.json     |  4 ++
 .../api-docs/data-grid/data-grid-pro-pt.json  |  1 +
 .../api-docs/data-grid/data-grid-pro-zh.json  |  1 +
 .../api-docs/data-grid/data-grid-pro.json     |  1 +
 .../api-docs/data-grid/data-grid-pt.json      |  1 +
 .../api-docs/data-grid/data-grid-zh.json      |  1 +
 .../api-docs/data-grid/data-grid.json         |  1 +
 .../src/DataGridPro/DataGridPro.tsx           |  5 ++
 .../x-data-grid/src/DataGrid/DataGrid.tsx     |  5 ++
 .../src/DataGrid/useDataGridProps.ts          |  1 +
 .../GridVirtualScrollerRenderZone.tsx         |  2 +
 .../src/models/props/DataGridProps.ts         |  5 ++
 .../src/tests/rows.DataGrid.test.tsx          | 47 ++++++++++++++-----
 20 files changed, 101 insertions(+), 64 deletions(-)
 create mode 100644 docs/data/data-grid/rows/RowMarginGrid.tsx.preview

diff --git a/docs/data/data-grid/rows/RowMarginGrid.js b/docs/data/data-grid/rows/RowMarginGrid.js
index 366780ad96fa..820c6f09a620 100644
--- a/docs/data/data-grid/rows/RowMarginGrid.js
+++ b/docs/data/data-grid/rows/RowMarginGrid.js
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { DataGrid } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
-import clsx from 'clsx';
 
 export default function RowMarginGrid() {
   const { data } = useDemoData({
@@ -17,34 +16,14 @@ export default function RowMarginGrid() {
     };
   }, []);
 
-  const getRowClassName = React.useCallback((params) => {
-    return clsx({
-      first: params.isFirstVisible,
-      last: params.isLastVisible,
-    });
-  }, []);
-
   return (
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         {...data}
         getRowSpacing={getRowSpacing}
-        getRowClassName={getRowClassName}
         sx={{
-          '& .MuiDataGrid-virtualScrollerRenderZone': {
-            display: 'flex', // Prevents margin collapsing
-            flexDirection: 'column',
-          },
           '& .MuiDataGrid-row': {
-            mt: '5px',
-            mb: '5px',
             bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#000' : '#efefef'),
-            '&.first': {
-              mt: 0,
-            },
-            '&.last': {
-              mb: 0,
-            },
           },
         }}
       />
diff --git a/docs/data/data-grid/rows/RowMarginGrid.tsx b/docs/data/data-grid/rows/RowMarginGrid.tsx
index d4ae0f41b981..0a8d8a6c0981 100644
--- a/docs/data/data-grid/rows/RowMarginGrid.tsx
+++ b/docs/data/data-grid/rows/RowMarginGrid.tsx
@@ -1,11 +1,6 @@
 import * as React from 'react';
-import {
-  DataGrid,
-  GridRowSpacingParams,
-  GridRowClassNameParams,
-} from '@mui/x-data-grid';
+import { DataGrid, GridRowSpacingParams } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
-import clsx from 'clsx';
 
 export default function RowMarginGrid() {
   const { data } = useDemoData({
@@ -21,34 +16,14 @@ export default function RowMarginGrid() {
     };
   }, []);
 
-  const getRowClassName = React.useCallback((params: GridRowClassNameParams) => {
-    return clsx({
-      first: params.isFirstVisible,
-      last: params.isLastVisible,
-    });
-  }, []);
-
   return (
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         {...data}
         getRowSpacing={getRowSpacing}
-        getRowClassName={getRowClassName}
         sx={{
-          '& .MuiDataGrid-virtualScrollerRenderZone': {
-            display: 'flex', // Prevents margin collapsing
-            flexDirection: 'column',
-          },
           '& .MuiDataGrid-row': {
-            mt: '5px',
-            mb: '5px',
             bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#000' : '#efefef'),
-            '&.first': {
-              mt: 0,
-            },
-            '&.last': {
-              mb: 0,
-            },
           },
         }}
       />
diff --git a/docs/data/data-grid/rows/RowMarginGrid.tsx.preview b/docs/data/data-grid/rows/RowMarginGrid.tsx.preview
new file mode 100644
index 000000000000..25598554ba89
--- /dev/null
+++ b/docs/data/data-grid/rows/RowMarginGrid.tsx.preview
@@ -0,0 +1,9 @@
+<DataGrid
+  {...data}
+  getRowSpacing={getRowSpacing}
+  sx={{
+    '& .MuiDataGrid-row': {
+      bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#000' : '#efefef'),
+    },
+  }}
+/>
\ No newline at end of file
diff --git a/docs/data/data-grid/rows/rows.md b/docs/data/data-grid/rows/rows.md
index a3e5a1d126b2..64c8887573e1 100644
--- a/docs/data/data-grid/rows/rows.md
+++ b/docs/data/data-grid/rows/rows.md
@@ -102,7 +102,7 @@ If you need some rows to have different row heights this can be achieved using t
 
 ## Row spacing
 
-You can use the `getRowSpacing` prop to specify the vertical space between rows.
+You can use the `getRowSpacing` prop to increase the spacing between rows.
 This prop is called with a [`GridRowSpacingParams`](/api/data-grid/grid-row-spacing-params/) object.
 
 ```tsx
@@ -114,12 +114,21 @@ const getRowSpacing = React.useCallback((params: GridRowSpacingParams) => {
 }, []);
 ```
 
-The value specified is only used internally to calculate which rows to render during scroll and for space allocation.
-This decision was taken to allow deep customization of the border styles.
-The same params from above are also available to the `getRowClassName` prop.
-Use it to add a custom class name to the rows and customize the border or margin with CSS, as shown in the complete demo below:
+{{"demo": "RowMarginGrid.js", "bg": "inline", "defaultCodeOpen": false}}
 
-{{"demo": "RowMarginGrid.js", "bg": "inline"}}
+By default, setting `getRowSpacing` will change the `marginXXX` CSS properties of each row.
+To add a border instead, set `rowSpacingType` to `"border"` and customize the color and style.
+
+```tsx
+<DataGrid
+  getRowSpacing={...}
+  rowSpacingType="border"
+  sx={{ '& .MuiDataGrid-row': { borderTopColor: 'yellow', borderTopStyle: 'solid' } }}
+/>
+```
+
+> ⚠ Adding a bottom margin or border to rows that also have a [detail panel](/components/data-grid/group-pivot/#master-detail) is not recommended.
+> As alternative, increase the top spacing of the next row to compensate.
 
 ## Styling rows
 
diff --git a/docs/pages/api-docs/data-grid/data-grid-pro.json b/docs/pages/api-docs/data-grid/data-grid-pro.json
index c100a4a877d8..140cc607d5fa 100644
--- a/docs/pages/api-docs/data-grid/data-grid-pro.json
+++ b/docs/pages/api-docs/data-grid/data-grid-pro.json
@@ -178,6 +178,10 @@
     },
     "rowGroupingModel": { "type": { "name": "arrayOf", "description": "Array&lt;string&gt;" } },
     "rowHeight": { "type": { "name": "number" }, "default": "52" },
+    "rowSpacingType": {
+      "type": { "name": "enum", "description": "'border'<br>&#124;&nbsp;'margin'" },
+      "default": "\"margin\""
+    },
     "rowsPerPageOptions": {
       "type": { "name": "arrayOf", "description": "Array&lt;number&gt;" },
       "default": "[25, 50, 100]"
diff --git a/docs/pages/api-docs/data-grid/data-grid.json b/docs/pages/api-docs/data-grid/data-grid.json
index f176909e94c0..3c85d9fdcca9 100644
--- a/docs/pages/api-docs/data-grid/data-grid.json
+++ b/docs/pages/api-docs/data-grid/data-grid.json
@@ -128,6 +128,10 @@
     "rowBuffer": { "type": { "name": "number" }, "default": "3" },
     "rowCount": { "type": { "name": "number" } },
     "rowHeight": { "type": { "name": "number" }, "default": "52" },
+    "rowSpacingType": {
+      "type": { "name": "enum", "description": "'border'<br>&#124;&nbsp;'margin'" },
+      "default": "\"margin\""
+    },
     "rowsPerPageOptions": {
       "type": { "name": "arrayOf", "description": "Array&lt;number&gt;" },
       "default": "[25, 50, 100]"
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 e36b79039bb1..5e98959854bc 100644
--- a/docs/pages/x/api/data-grid/data-grid-pro.json
+++ b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -178,6 +178,10 @@
     },
     "rowGroupingModel": { "type": { "name": "arrayOf", "description": "Array&lt;string&gt;" } },
     "rowHeight": { "type": { "name": "number" }, "default": "52" },
+    "rowSpacingType": {
+      "type": { "name": "enum", "description": "'border'<br>&#124;&nbsp;'margin'" },
+      "default": "\"margin\""
+    },
     "rowsPerPageOptions": {
       "type": { "name": "arrayOf", "description": "Array&lt;number&gt;" },
       "default": "[25, 50, 100]"
diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
index 18bb93a8d605..f7f0dda119b6 100644
--- a/docs/pages/x/api/data-grid/data-grid.json
+++ b/docs/pages/x/api/data-grid/data-grid.json
@@ -128,6 +128,10 @@
     "rowBuffer": { "type": { "name": "number" }, "default": "3" },
     "rowCount": { "type": { "name": "number" } },
     "rowHeight": { "type": { "name": "number" }, "default": "52" },
+    "rowSpacingType": {
+      "type": { "name": "enum", "description": "'border'<br>&#124;&nbsp;'margin'" },
+      "default": "\"margin\""
+    },
     "rowsPerPageOptions": {
       "type": { "name": "arrayOf", "description": "Array&lt;number&gt;" },
       "default": "[25, 50, 100]"
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json
index f735279ca9cb..f5a1a611bb12 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro-pt.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro-pt.json
@@ -112,6 +112,7 @@
     "rowGroupingModel": "Set the row grouping model of the grid.",
     "rowHeight": "Set the height in pixel of a row in the grid.",
     "rows": "Set of rows of type GridRowsProp.",
+    "rowSpacingType": "Sets the type of space between rows added by <code>getRowSpacing</code>.",
     "rowsPerPageOptions": "Select the pageSize dynamically using the component UI.",
     "rowThreshold": "Number of rows from the <code>rowBuffer</code> that can be visible before a new slice is rendered.",
     "scrollbarSize": "Override the height/width of the grid inner scrollbar.",
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json
index f735279ca9cb..f5a1a611bb12 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro-zh.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro-zh.json
@@ -112,6 +112,7 @@
     "rowGroupingModel": "Set the row grouping model of the grid.",
     "rowHeight": "Set the height in pixel of a row in the grid.",
     "rows": "Set of rows of type GridRowsProp.",
+    "rowSpacingType": "Sets the type of space between rows added by <code>getRowSpacing</code>.",
     "rowsPerPageOptions": "Select the pageSize dynamically using the component UI.",
     "rowThreshold": "Number of rows from the <code>rowBuffer</code> that can be visible before a new slice is rendered.",
     "scrollbarSize": "Override the height/width of the grid inner scrollbar.",
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro.json
index f735279ca9cb..f5a1a611bb12 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro.json
@@ -112,6 +112,7 @@
     "rowGroupingModel": "Set the row grouping model of the grid.",
     "rowHeight": "Set the height in pixel of a row in the grid.",
     "rows": "Set of rows of type GridRowsProp.",
+    "rowSpacingType": "Sets the type of space between rows added by <code>getRowSpacing</code>.",
     "rowsPerPageOptions": "Select the pageSize dynamically using the component UI.",
     "rowThreshold": "Number of rows from the <code>rowBuffer</code> that can be visible before a new slice is rendered.",
     "scrollbarSize": "Override the height/width of the grid inner scrollbar.",
diff --git a/docs/translations/api-docs/data-grid/data-grid-pt.json b/docs/translations/api-docs/data-grid/data-grid-pt.json
index 3ebd1aa428e2..ccbaf18b3e4e 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pt.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pt.json
@@ -84,6 +84,7 @@
     "rowCount": "Set the total number of rows, if it is different from the length of the value <code>rows</code> prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows.",
     "rowHeight": "Set the height in pixel of a row in the grid.",
     "rows": "Set of rows of type GridRowsProp.",
+    "rowSpacingType": "Sets the type of space between rows added by <code>getRowSpacing</code>.",
     "rowsPerPageOptions": "Select the pageSize dynamically using the component UI.",
     "rowThreshold": "Number of rows from the <code>rowBuffer</code> that can be visible before a new slice is rendered.",
     "scrollbarSize": "Override the height/width of the grid inner scrollbar.",
diff --git a/docs/translations/api-docs/data-grid/data-grid-zh.json b/docs/translations/api-docs/data-grid/data-grid-zh.json
index 3ebd1aa428e2..ccbaf18b3e4e 100644
--- a/docs/translations/api-docs/data-grid/data-grid-zh.json
+++ b/docs/translations/api-docs/data-grid/data-grid-zh.json
@@ -84,6 +84,7 @@
     "rowCount": "Set the total number of rows, if it is different from the length of the value <code>rows</code> prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows.",
     "rowHeight": "Set the height in pixel of a row in the grid.",
     "rows": "Set of rows of type GridRowsProp.",
+    "rowSpacingType": "Sets the type of space between rows added by <code>getRowSpacing</code>.",
     "rowsPerPageOptions": "Select the pageSize dynamically using the component UI.",
     "rowThreshold": "Number of rows from the <code>rowBuffer</code> that can be visible before a new slice is rendered.",
     "scrollbarSize": "Override the height/width of the grid inner scrollbar.",
diff --git a/docs/translations/api-docs/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid.json
index 3ebd1aa428e2..ccbaf18b3e4e 100644
--- a/docs/translations/api-docs/data-grid/data-grid.json
+++ b/docs/translations/api-docs/data-grid/data-grid.json
@@ -84,6 +84,7 @@
     "rowCount": "Set the total number of rows, if it is different from the length of the value <code>rows</code> prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows.",
     "rowHeight": "Set the height in pixel of a row in the grid.",
     "rows": "Set of rows of type GridRowsProp.",
+    "rowSpacingType": "Sets the type of space between rows added by <code>getRowSpacing</code>.",
     "rowsPerPageOptions": "Select the pageSize dynamically using the component UI.",
     "rowThreshold": "Number of rows from the <code>rowBuffer</code> that can be visible before a new slice is rendered.",
     "scrollbarSize": "Override the height/width of the grid inner scrollbar.",
diff --git a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
index 27cc562d3d55..1637cf1090a1 100644
--- a/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
+++ b/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
@@ -730,6 +730,11 @@ DataGridProRaw.propTypes = {
    * Set of rows of type [[GridRowsProp]].
    */
   rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * Sets the type of space between rows added by `getRowSpacing`.
+   * @default "margin"
+   */
+  rowSpacingType: PropTypes.oneOf(['border', 'margin']),
   /**
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]
diff --git a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx
index 46c5671f1040..da1792903bee 100644
--- a/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx
+++ b/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx
@@ -567,6 +567,11 @@ DataGridRaw.propTypes = {
    * Set of rows of type [[GridRowsProp]].
    */
   rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  /**
+   * Sets the type of space between rows added by `getRowSpacing`.
+   * @default "margin"
+   */
+  rowSpacingType: PropTypes.oneOf(['border', 'margin']),
   /**
    * Select the pageSize dynamically using the component UI.
    * @default [25, 50, 100]
diff --git a/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts b/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts
index ec55092fc5cb..280e7a297078 100644
--- a/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts
+++ b/packages/grid/x-data-grid/src/DataGrid/useDataGridProps.ts
@@ -67,6 +67,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES: DataGridPropsWithDefaultValues = {
   paginationMode: GridFeatureModeConstant.client,
   rowHeight: 52,
   rowsPerPageOptions: [25, 50, 100],
+  rowSpacingType: 'margin',
   showCellRightBorder: false,
   showColumnRightBorder: false,
   sortingOrder: ['asc' as const, 'desc' as const, null],
diff --git a/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx b/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx
index d1f8d31e12ad..bc5bad793fe6 100644
--- a/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx
+++ b/packages/grid/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx
@@ -24,6 +24,8 @@ const VirtualScrollerRenderZoneRoot = styled('div', {
   overridesResolver: (props, styles) => styles.virtualScrollerRenderZone,
 })({
   position: 'absolute',
+  display: 'flex', // Prevents margin collapsing when using `getRowSpacing`
+  flexDirection: 'column',
 });
 
 const GridVirtualScrollerRenderZone = React.forwardRef<
diff --git a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts
index 9fa762f0c2e2..7f66113030df 100644
--- a/packages/grid/x-data-grid/src/models/props/DataGridProps.ts
+++ b/packages/grid/x-data-grid/src/models/props/DataGridProps.ts
@@ -269,6 +269,11 @@ export interface DataGridPropsWithDefaultValues {
    * @default [25, 50, 100]
    */
   rowsPerPageOptions: number[];
+  /**
+   * Sets the type of space between rows added by `getRowSpacing`.
+   * @default "margin"
+   */
+  rowSpacingType: 'margin' | 'border';
   /**
    * If `true`, the right border of the cells are displayed.
    * @default false
diff --git a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx
index 288f087803ab..6849b25cb995 100644
--- a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx
+++ b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx
@@ -369,7 +369,7 @@ describe('<DataGrid /> - Rows', () => {
       );
     };
 
-    it('should call with the correct params', () => {
+    it('should be called with the correct params', () => {
       const getRowSpacing = stub().returns({});
       render(<TestCase getRowSpacing={getRowSpacing} pageSize={2} rowsPerPageOptions={[2]} />);
 
@@ -403,11 +403,7 @@ describe('<DataGrid /> - Rows', () => {
       });
     });
 
-    it('should consider the spacing when computing the content size', function test() {
-      if (isJSDOM) {
-        // Need layouting
-        this.skip();
-      }
+    it('should consider the spacing when computing the content size', () => {
       const spacingTop = 5;
       const spacingBottom = 10;
       const rowHeight = 50;
@@ -415,6 +411,7 @@ describe('<DataGrid /> - Rows', () => {
         <TestCase
           rowHeight={rowHeight}
           getRowSpacing={() => ({ top: spacingTop, bottom: spacingBottom })}
+          disableVirtualization
         />,
       );
       const virtualScrollerContent = document.querySelector('.MuiDataGrid-virtualScrollerContent');
@@ -425,11 +422,7 @@ describe('<DataGrid /> - Rows', () => {
       });
     });
 
-    it('should update the content size when getRowSpacing is removed', function test() {
-      if (isJSDOM) {
-        // Need layouting
-        this.skip();
-      }
+    it('should update the content size when getRowSpacing is removed', () => {
       const spacingTop = 5;
       const spacingBottom = 10;
       const rowHeight = 50;
@@ -437,6 +430,7 @@ describe('<DataGrid /> - Rows', () => {
         <TestCase
           rowHeight={rowHeight}
           getRowSpacing={() => ({ top: spacingTop, bottom: spacingBottom })}
+          disableVirtualization
         />,
       );
       const virtualScrollerContent = document.querySelector('.MuiDataGrid-virtualScrollerContent');
@@ -451,5 +445,36 @@ describe('<DataGrid /> - Rows', () => {
         height: `${rows.length * rowHeight}px`,
       });
     });
+
+    it('should set the row margin to the value returned by getRowSpacing if rowSpacingType is not defined', () => {
+      const spacingTop = 5;
+      const spacingBottom = 10;
+      render(
+        <TestCase
+          getRowSpacing={() => ({ top: spacingTop, bottom: spacingBottom })}
+          disableVirtualization
+        />,
+      );
+      expect(getRow(0)).toHaveInlineStyle({
+        marginTop: `${spacingTop}px`,
+        marginBottom: `${spacingBottom}px`,
+      });
+    });
+
+    it('should set the row border to the value returned by getRowSpacing if rowSpacingType=border', () => {
+      const borderTop = 5;
+      const borderBottom = 10;
+      render(
+        <TestCase
+          rowSpacingType="border"
+          getRowSpacing={() => ({ top: borderTop, bottom: borderBottom })}
+          disableVirtualization
+        />,
+      );
+      expect(getRow(0)).toHaveInlineStyle({
+        borderTopWidth: `${borderTop}px`,
+        borderBottomWidth: `${borderBottom}px`,
+      });
+    });
   });
 });

From 5aba750ac7d3d75c9fa6f930773b67ec2cfc1d6d Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Fri, 4 Mar 2022 17:43:01 -0300
Subject: [PATCH 18/32] Abstract params

---
 .../src/models/params/gridRowParams.ts        | 21 +++++++------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/grid/x-data-grid/src/models/params/gridRowParams.ts b/packages/grid/x-data-grid/src/models/params/gridRowParams.ts
index 8845812bc4f2..9e112f38d922 100644
--- a/packages/grid/x-data-grid/src/models/params/gridRowParams.ts
+++ b/packages/grid/x-data-grid/src/models/params/gridRowParams.ts
@@ -28,10 +28,7 @@ export interface GridRowParams<R extends GridRowModel = GridRowModel> {
   getValue: (id: GridRowId, field: string) => GridCellValue;
 }
 
-/**
- * Object passed as parameter in the row `getRowClassName` callback prop.
- */
-export interface GridRowClassNameParams extends GridRowParams {
+interface GridRowVisibilityParams {
   /**
    * Whether this row is the first visible or not.
    */
@@ -42,6 +39,11 @@ export interface GridRowClassNameParams extends GridRowParams {
   isLastVisible: boolean;
 }
 
+/**
+ * Object passed as parameter in the row `getRowClassName` callback prop.
+ */
+export interface GridRowClassNameParams extends GridRowParams, GridRowVisibilityParams {}
+
 /**
  * Object passed as parameter in the row `getRowHeight` callback prop.
  */
@@ -60,16 +62,7 @@ export type GridRowHeightReturnValue = number | null | undefined;
 /**
  * Object passed as parameter in the row `getRowSpacing` callback prop.
  */
-export interface GridRowSpacingParams extends GridRowEntry {
-  /**
-   * Whether this row is the first visible or not.
-   */
-  isFirstVisible: boolean;
-  /**
-   * Whether this row is the last visible or not.
-   */
-  isLastVisible: boolean;
-}
+export interface GridRowSpacingParams extends GridRowEntry, GridRowVisibilityParams {}
 
 /**
  * The getRowSpacing return value.

From ee1307a3597ac514e3ee1b6d021a10ae2b2658a7 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Fri, 4 Mar 2022 18:07:10 -0300
Subject: [PATCH 19/32] Rerun argos


From 8c8f3a31dbb55d8416c1ba08437eb28477ae0cff Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Mon, 7 Mar 2022 09:34:29 -0300
Subject: [PATCH 20/32] Remove 'as'

---
 .../grid/x-data-grid/src/hooks/features/rows/useGridRows.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts
index afa7fd388978..5c44eeab987c 100644
--- a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts
+++ b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts
@@ -152,10 +152,10 @@ export const useGridRows = (
 
   const lookup = React.useMemo(
     () =>
-      currentPage.rows.reduce((acc, { id }, index) => {
+      currentPage.rows.reduce<Record<GridRowId, number>>((acc, { id }, index) => {
         acc[id] = index;
         return acc;
-      }, {} as Record<GridRowId, number>),
+      }, {}),
     [currentPage.rows],
   );
 

From 0429feeb35a0157f40cbf2a50f6fb3068614ad0d Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Mon, 7 Mar 2022 09:39:19 -0300
Subject: [PATCH 21/32] Make getRowIndexRelativeToCurrentPage public

---
 docs/pages/api-docs/data-grid/grid-api.md                      | 1 +
 docs/pages/x/api/data-grid/grid-api.md                         | 1 +
 .../src/components/DataGridProVirtualScroller.tsx              | 2 +-
 .../grid/x-data-grid/src/hooks/features/rows/useGridRows.ts    | 2 +-
 .../x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts     | 2 +-
 packages/grid/x-data-grid/src/models/api/gridRowApi.ts         | 3 +--
 packages/grid/x-data-grid/src/models/api/gridSortApi.ts        | 2 +-
 7 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/docs/pages/api-docs/data-grid/grid-api.md b/docs/pages/api-docs/data-grid/grid-api.md
index be8e702d9fb1..a31d7fbe2685 100644
--- a/docs/pages/api-docs/data-grid/grid-api.md
+++ b/docs/pages/api-docs/data-grid/grid-api.md
@@ -43,6 +43,7 @@ import { GridApi } from '@mui/x-data-grid-pro';
 | <span class="prop-name">getRowElement</span>                                                                                                               | <span class="prop-type">(id: GridRowId) =&gt; HTMLDivElement \| null</span>                                                                                       | Gets the underlying DOM element for a row at the given `id`.                                                                                                                                        |
 | <span class="prop-name">getRowIdFromRowIndex</span>                                                                                                        | <span class="prop-type">(index: number) =&gt; GridRowId</span>                                                                                                    | Gets the `GridRowId` of a row at a specific index.<br />The index is based on the sorted but unfiltered row list.                                                                                   |
 | <span class="prop-name">getRowIndex</span>                                                                                                                 | <span class="prop-type">(id: GridRowId) =&gt; number</span>                                                                                                       | Gets the row index of a row with a given id.<br />The index is based on the sorted but unfiltered row list.                                                                                         |
+| <span class="prop-name">getRowIndexRelativeToCurrentPage</span>                                                                                            | <span class="prop-type">(id: GridRowId) =&gt; number</span>                                                                                                       | Gets the index of a row relative to the rows that are visible in the current page.                                                                                                                  |
 | <span class="prop-name">getRowMode</span>                                                                                                                  | <span class="prop-type">(id: GridRowId) =&gt; GridRowMode</span>                                                                                                  | Gets the mode of a row.                                                                                                                                                                             |
 | <span class="prop-name">getRowModels</span>                                                                                                                | <span class="prop-type">() =&gt; Map&lt;GridRowId, GridRowModel&gt;</span>                                                                                        | Gets the full set of rows as Map&lt;GridRowId, GridRowModel&gt;.                                                                                                                                    |
 | <span class="prop-name">getRowNode</span>                                                                                                                  | <span class="prop-type">(id: GridRowId) =&gt; GridRowTreeNodeConfig \| null</span>                                                                                | Gets the row node from the internal tree structure.                                                                                                                                                 |
diff --git a/docs/pages/x/api/data-grid/grid-api.md b/docs/pages/x/api/data-grid/grid-api.md
index be8e702d9fb1..a31d7fbe2685 100644
--- a/docs/pages/x/api/data-grid/grid-api.md
+++ b/docs/pages/x/api/data-grid/grid-api.md
@@ -43,6 +43,7 @@ import { GridApi } from '@mui/x-data-grid-pro';
 | <span class="prop-name">getRowElement</span>                                                                                                               | <span class="prop-type">(id: GridRowId) =&gt; HTMLDivElement \| null</span>                                                                                       | Gets the underlying DOM element for a row at the given `id`.                                                                                                                                        |
 | <span class="prop-name">getRowIdFromRowIndex</span>                                                                                                        | <span class="prop-type">(index: number) =&gt; GridRowId</span>                                                                                                    | Gets the `GridRowId` of a row at a specific index.<br />The index is based on the sorted but unfiltered row list.                                                                                   |
 | <span class="prop-name">getRowIndex</span>                                                                                                                 | <span class="prop-type">(id: GridRowId) =&gt; number</span>                                                                                                       | Gets the row index of a row with a given id.<br />The index is based on the sorted but unfiltered row list.                                                                                         |
+| <span class="prop-name">getRowIndexRelativeToCurrentPage</span>                                                                                            | <span class="prop-type">(id: GridRowId) =&gt; number</span>                                                                                                       | Gets the index of a row relative to the rows that are visible in the current page.                                                                                                                  |
 | <span class="prop-name">getRowMode</span>                                                                                                                  | <span class="prop-type">(id: GridRowId) =&gt; GridRowMode</span>                                                                                                  | Gets the mode of a row.                                                                                                                                                                             |
 | <span class="prop-name">getRowModels</span>                                                                                                                | <span class="prop-type">() =&gt; Map&lt;GridRowId, GridRowModel&gt;</span>                                                                                        | Gets the full set of rows as Map&lt;GridRowId, GridRowModel&gt;.                                                                                                                                    |
 | <span class="prop-name">getRowNode</span>                                                                                                                  | <span class="prop-type">(id: GridRowId) =&gt; GridRowTreeNodeConfig \| null</span>                                                                                | Gets the row node from the internal tree structure.                                                                                                                                                 |
diff --git a/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx b/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx
index 2d3333e75080..e0b4966a22f0 100644
--- a/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx
+++ b/packages/grid/x-data-grid-pro/src/components/DataGridProVirtualScroller.tsx
@@ -253,7 +253,7 @@ const DataGridProVirtualScroller = React.forwardRef<
       const content = detailPanelsContent[id];
 
       // Check if the id exists in the current page
-      const rowIndex = apiRef.current.unstable_getRowIndexRelativeToCurrentPage(id);
+      const rowIndex = apiRef.current.getRowIndexRelativeToCurrentPage(id);
       const exists = rowIndex !== undefined;
 
       if (React.isValidElement(content) && exists) {
diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts
index 5c44eeab987c..69bacb1a9c34 100644
--- a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts
+++ b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRows.ts
@@ -401,7 +401,7 @@ export const useGridRows = (
     updateRows,
     setRowChildrenExpansion,
     getRowNode,
-    unstable_getRowIndexRelativeToCurrentPage: getRowIndexRelativeToCurrentPage,
+    getRowIndexRelativeToCurrentPage,
   };
 
   useGridApiMethod(apiRef, rowApi, 'GridRowApi');
diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
index d6eb7f1429ea..09d7a5773839 100644
--- a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
+++ b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
@@ -75,7 +75,7 @@ export const useGridRowsMeta = (
         const initialHeights: Record<string, number> = { base: baseRowHeight };
 
         if (getRowSpacing) {
-          const index = apiRef.current.unstable_getRowIndexRelativeToCurrentPage(row.id);
+          const index = apiRef.current.getRowIndexRelativeToCurrentPage(row.id);
 
           const spacing = getRowSpacing({
             ...row,
diff --git a/packages/grid/x-data-grid/src/models/api/gridRowApi.ts b/packages/grid/x-data-grid/src/models/api/gridRowApi.ts
index fff1427381e7..d539bbda40bb 100644
--- a/packages/grid/x-data-grid/src/models/api/gridRowApi.ts
+++ b/packages/grid/x-data-grid/src/models/api/gridRowApi.ts
@@ -51,7 +51,6 @@ export interface GridRowApi {
    * Gets the index of a row relative to the rows that are visible in the current page.
    * @param {GridRowId} id The row id.
    * @returns {number} The index of the row.
-   * @ignore - do not document.
    */
-  unstable_getRowIndexRelativeToCurrentPage: (id: GridRowId) => number;
+  getRowIndexRelativeToCurrentPage: (id: GridRowId) => number;
 }
diff --git a/packages/grid/x-data-grid/src/models/api/gridSortApi.ts b/packages/grid/x-data-grid/src/models/api/gridSortApi.ts
index 4498777205f4..234c08b401d2 100644
--- a/packages/grid/x-data-grid/src/models/api/gridSortApi.ts
+++ b/packages/grid/x-data-grid/src/models/api/gridSortApi.ts
@@ -53,7 +53,7 @@ export interface GridSortApi {
    * The index is based on the sorted but unfiltered row list.
    * @param {GridRowId} id The `GridRowId` of the row.
    * @returns {number} The index of the row.
-   * @deprecated Use `unstable_getRowIndexRelativeToCurrentPage` instead.
+   * @deprecated Use `getRowIndexRelativeToCurrentPage` instead.
    */
   getRowIndex: (id: GridRowId) => number;
 }

From 187de11349dca27e141a968eac0953a2e07d0f80 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Mon, 7 Mar 2022 09:52:11 -0300
Subject: [PATCH 22/32] Use gridClasses

---
 docs/data/data-grid/rows/RowMarginGrid.js          | 4 ++--
 docs/data/data-grid/rows/RowMarginGrid.tsx         | 4 ++--
 docs/data/data-grid/rows/RowMarginGrid.tsx.preview | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/data/data-grid/rows/RowMarginGrid.js b/docs/data/data-grid/rows/RowMarginGrid.js
index 820c6f09a620..5d29d29db9e8 100644
--- a/docs/data/data-grid/rows/RowMarginGrid.js
+++ b/docs/data/data-grid/rows/RowMarginGrid.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGrid } from '@mui/x-data-grid';
+import { DataGrid, gridClasses } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 export default function RowMarginGrid() {
@@ -22,7 +22,7 @@ export default function RowMarginGrid() {
         {...data}
         getRowSpacing={getRowSpacing}
         sx={{
-          '& .MuiDataGrid-row': {
+          [`& .${gridClasses.row}`]: {
             bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#000' : '#efefef'),
           },
         }}
diff --git a/docs/data/data-grid/rows/RowMarginGrid.tsx b/docs/data/data-grid/rows/RowMarginGrid.tsx
index 0a8d8a6c0981..08694fb79ca0 100644
--- a/docs/data/data-grid/rows/RowMarginGrid.tsx
+++ b/docs/data/data-grid/rows/RowMarginGrid.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataGrid, GridRowSpacingParams } from '@mui/x-data-grid';
+import { DataGrid, GridRowSpacingParams, gridClasses } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 export default function RowMarginGrid() {
@@ -22,7 +22,7 @@ export default function RowMarginGrid() {
         {...data}
         getRowSpacing={getRowSpacing}
         sx={{
-          '& .MuiDataGrid-row': {
+          [`& .${gridClasses.row}`]: {
             bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#000' : '#efefef'),
           },
         }}
diff --git a/docs/data/data-grid/rows/RowMarginGrid.tsx.preview b/docs/data/data-grid/rows/RowMarginGrid.tsx.preview
index 25598554ba89..61047cac63c1 100644
--- a/docs/data/data-grid/rows/RowMarginGrid.tsx.preview
+++ b/docs/data/data-grid/rows/RowMarginGrid.tsx.preview
@@ -2,7 +2,7 @@
   {...data}
   getRowSpacing={getRowSpacing}
   sx={{
-    '& .MuiDataGrid-row': {
+    [`& .${gridClasses.row}`]: {
       bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#000' : '#efefef'),
     },
   }}

From 1e73cfd0077d47b75568bab4815f600babb79542 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Thu, 10 Mar 2022 09:51:21 +0100
Subject: [PATCH 23/32] Work

---
 .../data-grid/grid-row-class-name-params.md    | 18 ++++++++++--------
 .../data-grid/grid-row-spacing-params.md       | 14 ++++++++------
 .../data-grid/grid-row-class-name-params.md    | 18 ++++++++++--------
 .../x/api/data-grid/grid-row-spacing-params.md | 14 ++++++++------
 .../x-data-grid/src/components/GridRow.tsx     |  5 -----
 scripts/x-data-grid-pro.exports.json           |  1 -
 scripts/x-data-grid.exports.json               |  1 -
 7 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/docs/pages/api-docs/data-grid/grid-row-class-name-params.md b/docs/pages/api-docs/data-grid/grid-row-class-name-params.md
index 04093a7afcd4..d5a5d32f9829 100644
--- a/docs/pages/api-docs/data-grid/grid-row-class-name-params.md
+++ b/docs/pages/api-docs/data-grid/grid-row-class-name-params.md
@@ -12,11 +12,13 @@ import { GridRowClassNameParams } from '@mui/x-data-grid';
 
 ## Properties
 
-| Name                                          | Type                                                                              | Description                                                |
-| :-------------------------------------------- | :-------------------------------------------------------------------------------- | :--------------------------------------------------------- |
-| <span class="prop-name">columns</span>        | <span class="prop-type">GridColumns</span>                                        | All grid columns.                                          |
-| <span class="prop-name">getValue</span>       | <span class="prop-type">(id: GridRowId, field: string) =&gt; GridCellValue</span> | Get the cell value of a row and field.                     |
-| <span class="prop-name">id</span>             | <span class="prop-type">GridRowId</span>                                          | The grid row id.                                           |
-| <span class="prop-name">isFirstVisible</span> | <span class="prop-type">boolean</span>                                            | Whether this row is the first visible or not.              |
-| <span class="prop-name">isLastVisible</span>  | <span class="prop-type">boolean</span>                                            | Whether this row is the last visible or not.               |
-| <span class="prop-name">row</span>            | <span class="prop-type">R</span>                                                  | The row model of the row that the current cell belongs to. |
+| Name                                                      | Type                                                                              | Description                                                                                                                         |
+| :-------------------------------------------------------- | :-------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------- |
+| <span class="prop-name">columns</span>                    | <span class="prop-type">GridColumns</span>                                        | All grid columns.                                                                                                                   |
+| <span class="prop-name">getValue</span>                   | <span class="prop-type">(id: GridRowId, field: string) =&gt; GridCellValue</span> | Get the cell value of a row and field.                                                                                              |
+| <span class="prop-name">id</span>                         | <span class="prop-type">GridRowId</span>                                          | The grid row id.                                                                                                                    |
+| <span class="prop-name">indexRelatedToFilteredRows</span> | <span class="prop-type">number</span>                                             | Index of the row in the whole sorted and filtered dataset.                                                                          |
+| <span class="prop-name">indexRelativeToCurrentPage</span> | <span class="prop-type">number</span>                                             | Index of the row in the current page.<br />If the pagination is disabled, this value will be equal to the `fromFilteredRows` value. |
+| <span class="prop-name">isFirstVisible</span>             | <span class="prop-type">boolean</span>                                            | Whether this row is the first visible or not.                                                                                       |
+| <span class="prop-name">isLastVisible</span>              | <span class="prop-type">boolean</span>                                            | Whether this row is the last visible or not.                                                                                        |
+| <span class="prop-name">row</span>                        | <span class="prop-type">R</span>                                                  | The row model of the row that the current cell belongs to.                                                                          |
diff --git a/docs/pages/api-docs/data-grid/grid-row-spacing-params.md b/docs/pages/api-docs/data-grid/grid-row-spacing-params.md
index dfd2af391025..1b93ec317604 100644
--- a/docs/pages/api-docs/data-grid/grid-row-spacing-params.md
+++ b/docs/pages/api-docs/data-grid/grid-row-spacing-params.md
@@ -12,9 +12,11 @@ import { GridRowSpacingParams } from '@mui/x-data-grid';
 
 ## Properties
 
-| Name                                          | Type                                        | Description                                   |
-| :-------------------------------------------- | :------------------------------------------ | :-------------------------------------------- |
-| <span class="prop-name">id</span>             | <span class="prop-type">GridRowId</span>    | The row id.                                   |
-| <span class="prop-name">isFirstVisible</span> | <span class="prop-type">boolean</span>      | Whether this row is the first visible or not. |
-| <span class="prop-name">isLastVisible</span>  | <span class="prop-type">boolean</span>      | Whether this row is the last visible or not.  |
-| <span class="prop-name">model</span>          | <span class="prop-type">GridRowModel</span> | The row model.                                |
+| Name                                                      | Type                                        | Description                                                                                                                         |
+| :-------------------------------------------------------- | :------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------- |
+| <span class="prop-name">id</span>                         | <span class="prop-type">GridRowId</span>    | The row id.                                                                                                                         |
+| <span class="prop-name">indexRelatedToFilteredRows</span> | <span class="prop-type">number</span>       | Index of the row in the whole sorted and filtered dataset.                                                                          |
+| <span class="prop-name">indexRelativeToCurrentPage</span> | <span class="prop-type">number</span>       | Index of the row in the current page.<br />If the pagination is disabled, this value will be equal to the `fromFilteredRows` value. |
+| <span class="prop-name">isFirstVisible</span>             | <span class="prop-type">boolean</span>      | Whether this row is the first visible or not.                                                                                       |
+| <span class="prop-name">isLastVisible</span>              | <span class="prop-type">boolean</span>      | Whether this row is the last visible or not.                                                                                        |
+| <span class="prop-name">model</span>                      | <span class="prop-type">GridRowModel</span> | The row model.                                                                                                                      |
diff --git a/docs/pages/x/api/data-grid/grid-row-class-name-params.md b/docs/pages/x/api/data-grid/grid-row-class-name-params.md
index 04093a7afcd4..d5a5d32f9829 100644
--- a/docs/pages/x/api/data-grid/grid-row-class-name-params.md
+++ b/docs/pages/x/api/data-grid/grid-row-class-name-params.md
@@ -12,11 +12,13 @@ import { GridRowClassNameParams } from '@mui/x-data-grid';
 
 ## Properties
 
-| Name                                          | Type                                                                              | Description                                                |
-| :-------------------------------------------- | :-------------------------------------------------------------------------------- | :--------------------------------------------------------- |
-| <span class="prop-name">columns</span>        | <span class="prop-type">GridColumns</span>                                        | All grid columns.                                          |
-| <span class="prop-name">getValue</span>       | <span class="prop-type">(id: GridRowId, field: string) =&gt; GridCellValue</span> | Get the cell value of a row and field.                     |
-| <span class="prop-name">id</span>             | <span class="prop-type">GridRowId</span>                                          | The grid row id.                                           |
-| <span class="prop-name">isFirstVisible</span> | <span class="prop-type">boolean</span>                                            | Whether this row is the first visible or not.              |
-| <span class="prop-name">isLastVisible</span>  | <span class="prop-type">boolean</span>                                            | Whether this row is the last visible or not.               |
-| <span class="prop-name">row</span>            | <span class="prop-type">R</span>                                                  | The row model of the row that the current cell belongs to. |
+| Name                                                      | Type                                                                              | Description                                                                                                                         |
+| :-------------------------------------------------------- | :-------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------- |
+| <span class="prop-name">columns</span>                    | <span class="prop-type">GridColumns</span>                                        | All grid columns.                                                                                                                   |
+| <span class="prop-name">getValue</span>                   | <span class="prop-type">(id: GridRowId, field: string) =&gt; GridCellValue</span> | Get the cell value of a row and field.                                                                                              |
+| <span class="prop-name">id</span>                         | <span class="prop-type">GridRowId</span>                                          | The grid row id.                                                                                                                    |
+| <span class="prop-name">indexRelatedToFilteredRows</span> | <span class="prop-type">number</span>                                             | Index of the row in the whole sorted and filtered dataset.                                                                          |
+| <span class="prop-name">indexRelativeToCurrentPage</span> | <span class="prop-type">number</span>                                             | Index of the row in the current page.<br />If the pagination is disabled, this value will be equal to the `fromFilteredRows` value. |
+| <span class="prop-name">isFirstVisible</span>             | <span class="prop-type">boolean</span>                                            | Whether this row is the first visible or not.                                                                                       |
+| <span class="prop-name">isLastVisible</span>              | <span class="prop-type">boolean</span>                                            | Whether this row is the last visible or not.                                                                                        |
+| <span class="prop-name">row</span>                        | <span class="prop-type">R</span>                                                  | The row model of the row that the current cell belongs to.                                                                          |
diff --git a/docs/pages/x/api/data-grid/grid-row-spacing-params.md b/docs/pages/x/api/data-grid/grid-row-spacing-params.md
index dfd2af391025..1b93ec317604 100644
--- a/docs/pages/x/api/data-grid/grid-row-spacing-params.md
+++ b/docs/pages/x/api/data-grid/grid-row-spacing-params.md
@@ -12,9 +12,11 @@ import { GridRowSpacingParams } from '@mui/x-data-grid';
 
 ## Properties
 
-| Name                                          | Type                                        | Description                                   |
-| :-------------------------------------------- | :------------------------------------------ | :-------------------------------------------- |
-| <span class="prop-name">id</span>             | <span class="prop-type">GridRowId</span>    | The row id.                                   |
-| <span class="prop-name">isFirstVisible</span> | <span class="prop-type">boolean</span>      | Whether this row is the first visible or not. |
-| <span class="prop-name">isLastVisible</span>  | <span class="prop-type">boolean</span>      | Whether this row is the last visible or not.  |
-| <span class="prop-name">model</span>          | <span class="prop-type">GridRowModel</span> | The row model.                                |
+| Name                                                      | Type                                        | Description                                                                                                                         |
+| :-------------------------------------------------------- | :------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------- |
+| <span class="prop-name">id</span>                         | <span class="prop-type">GridRowId</span>    | The row id.                                                                                                                         |
+| <span class="prop-name">indexRelatedToFilteredRows</span> | <span class="prop-type">number</span>       | Index of the row in the whole sorted and filtered dataset.                                                                          |
+| <span class="prop-name">indexRelativeToCurrentPage</span> | <span class="prop-type">number</span>       | Index of the row in the current page.<br />If the pagination is disabled, this value will be equal to the `fromFilteredRows` value. |
+| <span class="prop-name">isFirstVisible</span>             | <span class="prop-type">boolean</span>      | Whether this row is the first visible or not.                                                                                       |
+| <span class="prop-name">isLastVisible</span>              | <span class="prop-type">boolean</span>      | Whether this row is the last visible or not.                                                                                        |
+| <span class="prop-name">model</span>                      | <span class="prop-type">GridRowModel</span> | The row model.                                                                                                                      |
diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx
index 187c75e4a306..ecce152da0a3 100644
--- a/packages/grid/x-data-grid/src/components/GridRow.tsx
+++ b/packages/grid/x-data-grid/src/components/GridRow.tsx
@@ -351,13 +351,8 @@ GridRow.propTypes = {
   /**
    * Index of the row in the whole sorted and filtered dataset.
    * If some rows above have expanded children, this index also take those children into account.
-   * @deprecated Use `props.indexes.fromFilteredRows` instead.
    */
   index: PropTypes.number.isRequired,
-  indexes: PropTypes.shape({
-    fromFilteredRows: PropTypes.number.isRequired,
-    fromPageRows: PropTypes.number.isRequired,
-  }).isRequired,
   isLastVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
   onClick: PropTypes.func,
diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json
index e78d8af92fae..dd32bde9d425 100644
--- a/scripts/x-data-grid-pro.exports.json
+++ b/scripts/x-data-grid-pro.exports.json
@@ -340,7 +340,6 @@
   { "name": "GridRowId", "kind": "TypeAlias" },
   { "name": "GridRowIdGetter", "kind": "TypeAlias" },
   { "name": "gridRowIdsSelector", "kind": "Variable" },
-  { "name": "GridRowIndexes", "kind": "Interface" },
   { "name": "GridRowMode", "kind": "TypeAlias" },
   { "name": "GridRowModel", "kind": "TypeAlias" },
   { "name": "GridRowModelUpdate", "kind": "Interface" },
diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json
index 4605ef2576b1..be962ae1a824 100644
--- a/scripts/x-data-grid.exports.json
+++ b/scripts/x-data-grid.exports.json
@@ -307,7 +307,6 @@
   { "name": "GridRowId", "kind": "TypeAlias" },
   { "name": "GridRowIdGetter", "kind": "TypeAlias" },
   { "name": "gridRowIdsSelector", "kind": "Variable" },
-  { "name": "GridRowIndexes", "kind": "Interface" },
   { "name": "GridRowMode", "kind": "TypeAlias" },
   { "name": "GridRowModel", "kind": "TypeAlias" },
   { "name": "GridRowModelUpdate", "kind": "Interface" },

From 37981a3beea4aa0b3bc9c9e8991827af50b6af95 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Thu, 10 Mar 2022 10:04:21 +0100
Subject: [PATCH 24/32] Fix

---
 .../data-grid/grid-row-class-name-params.md   | 20 +++++++++----------
 .../data-grid/grid-row-spacing-params.md      | 16 +++++++--------
 .../data-grid/grid-row-class-name-params.md   | 20 +++++++++----------
 .../api/data-grid/grid-row-spacing-params.md  | 16 +++++++--------
 .../x-data-grid/src/components/GridRow.tsx    |  2 +-
 .../hooks/features/rows/useGridRowsMeta.ts    |  2 +-
 .../src/models/params/gridRowParams.ts        |  5 +++--
 7 files changed, 41 insertions(+), 40 deletions(-)

diff --git a/docs/pages/api-docs/data-grid/grid-row-class-name-params.md b/docs/pages/api-docs/data-grid/grid-row-class-name-params.md
index d5a5d32f9829..62bfc0cc1836 100644
--- a/docs/pages/api-docs/data-grid/grid-row-class-name-params.md
+++ b/docs/pages/api-docs/data-grid/grid-row-class-name-params.md
@@ -12,13 +12,13 @@ import { GridRowClassNameParams } from '@mui/x-data-grid';
 
 ## Properties
 
-| Name                                                      | Type                                                                              | Description                                                                                                                         |
-| :-------------------------------------------------------- | :-------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------- |
-| <span class="prop-name">columns</span>                    | <span class="prop-type">GridColumns</span>                                        | All grid columns.                                                                                                                   |
-| <span class="prop-name">getValue</span>                   | <span class="prop-type">(id: GridRowId, field: string) =&gt; GridCellValue</span> | Get the cell value of a row and field.                                                                                              |
-| <span class="prop-name">id</span>                         | <span class="prop-type">GridRowId</span>                                          | The grid row id.                                                                                                                    |
-| <span class="prop-name">indexRelatedToFilteredRows</span> | <span class="prop-type">number</span>                                             | Index of the row in the whole sorted and filtered dataset.                                                                          |
-| <span class="prop-name">indexRelativeToCurrentPage</span> | <span class="prop-type">number</span>                                             | Index of the row in the current page.<br />If the pagination is disabled, this value will be equal to the `fromFilteredRows` value. |
-| <span class="prop-name">isFirstVisible</span>             | <span class="prop-type">boolean</span>                                            | Whether this row is the first visible or not.                                                                                       |
-| <span class="prop-name">isLastVisible</span>              | <span class="prop-type">boolean</span>                                            | Whether this row is the last visible or not.                                                                                        |
-| <span class="prop-name">row</span>                        | <span class="prop-type">R</span>                                                  | The row model of the row that the current cell belongs to.                                                                          |
+| Name                                                       | Type                                                                              | Description                                                                                                                                    |
+| :--------------------------------------------------------- | :-------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- |
+| <span class="prop-name">columns</span>                     | <span class="prop-type">GridColumns</span>                                        | All grid columns.                                                                                                                              |
+| <span class="prop-name">getValue</span>                    | <span class="prop-type">(id: GridRowId, field: string) =&gt; GridCellValue</span> | Get the cell value of a row and field.                                                                                                         |
+| <span class="prop-name">id</span>                          | <span class="prop-type">GridRowId</span>                                          | The grid row id.                                                                                                                               |
+| <span class="prop-name">indexRelativeToCurrentPage</span>  | <span class="prop-type">number</span>                                             | Index of the row in the current page.<br />If the pagination is disabled, this value will be equal to the `indexRelativeToExpandedRows` value. |
+| <span class="prop-name">indexRelativeToExpandedRows</span> | <span class="prop-type">number</span>                                             | Index of the row in the whole sorted and filtered dataset.<br />If some rows have children, this value only counts the expanded children.      |
+| <span class="prop-name">isFirstVisible</span>              | <span class="prop-type">boolean</span>                                            | Whether this row is the first visible or not.                                                                                                  |
+| <span class="prop-name">isLastVisible</span>               | <span class="prop-type">boolean</span>                                            | Whether this row is the last visible or not.                                                                                                   |
+| <span class="prop-name">row</span>                         | <span class="prop-type">R</span>                                                  | The row model of the row that the current cell belongs to.                                                                                     |
diff --git a/docs/pages/api-docs/data-grid/grid-row-spacing-params.md b/docs/pages/api-docs/data-grid/grid-row-spacing-params.md
index 1b93ec317604..fd5670123b7c 100644
--- a/docs/pages/api-docs/data-grid/grid-row-spacing-params.md
+++ b/docs/pages/api-docs/data-grid/grid-row-spacing-params.md
@@ -12,11 +12,11 @@ import { GridRowSpacingParams } from '@mui/x-data-grid';
 
 ## Properties
 
-| Name                                                      | Type                                        | Description                                                                                                                         |
-| :-------------------------------------------------------- | :------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------- |
-| <span class="prop-name">id</span>                         | <span class="prop-type">GridRowId</span>    | The row id.                                                                                                                         |
-| <span class="prop-name">indexRelatedToFilteredRows</span> | <span class="prop-type">number</span>       | Index of the row in the whole sorted and filtered dataset.                                                                          |
-| <span class="prop-name">indexRelativeToCurrentPage</span> | <span class="prop-type">number</span>       | Index of the row in the current page.<br />If the pagination is disabled, this value will be equal to the `fromFilteredRows` value. |
-| <span class="prop-name">isFirstVisible</span>             | <span class="prop-type">boolean</span>      | Whether this row is the first visible or not.                                                                                       |
-| <span class="prop-name">isLastVisible</span>              | <span class="prop-type">boolean</span>      | Whether this row is the last visible or not.                                                                                        |
-| <span class="prop-name">model</span>                      | <span class="prop-type">GridRowModel</span> | The row model.                                                                                                                      |
+| Name                                                       | Type                                        | Description                                                                                                                                    |
+| :--------------------------------------------------------- | :------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------- |
+| <span class="prop-name">id</span>                          | <span class="prop-type">GridRowId</span>    | The row id.                                                                                                                                    |
+| <span class="prop-name">indexRelativeToCurrentPage</span>  | <span class="prop-type">number</span>       | Index of the row in the current page.<br />If the pagination is disabled, this value will be equal to the `indexRelativeToExpandedRows` value. |
+| <span class="prop-name">indexRelativeToExpandedRows</span> | <span class="prop-type">number</span>       | Index of the row in the whole sorted and filtered dataset.<br />If some rows have children, this value only counts the expanded children.      |
+| <span class="prop-name">isFirstVisible</span>              | <span class="prop-type">boolean</span>      | Whether this row is the first visible or not.                                                                                                  |
+| <span class="prop-name">isLastVisible</span>               | <span class="prop-type">boolean</span>      | Whether this row is the last visible or not.                                                                                                   |
+| <span class="prop-name">model</span>                       | <span class="prop-type">GridRowModel</span> | The row model.                                                                                                                                 |
diff --git a/docs/pages/x/api/data-grid/grid-row-class-name-params.md b/docs/pages/x/api/data-grid/grid-row-class-name-params.md
index d5a5d32f9829..62bfc0cc1836 100644
--- a/docs/pages/x/api/data-grid/grid-row-class-name-params.md
+++ b/docs/pages/x/api/data-grid/grid-row-class-name-params.md
@@ -12,13 +12,13 @@ import { GridRowClassNameParams } from '@mui/x-data-grid';
 
 ## Properties
 
-| Name                                                      | Type                                                                              | Description                                                                                                                         |
-| :-------------------------------------------------------- | :-------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------- |
-| <span class="prop-name">columns</span>                    | <span class="prop-type">GridColumns</span>                                        | All grid columns.                                                                                                                   |
-| <span class="prop-name">getValue</span>                   | <span class="prop-type">(id: GridRowId, field: string) =&gt; GridCellValue</span> | Get the cell value of a row and field.                                                                                              |
-| <span class="prop-name">id</span>                         | <span class="prop-type">GridRowId</span>                                          | The grid row id.                                                                                                                    |
-| <span class="prop-name">indexRelatedToFilteredRows</span> | <span class="prop-type">number</span>                                             | Index of the row in the whole sorted and filtered dataset.                                                                          |
-| <span class="prop-name">indexRelativeToCurrentPage</span> | <span class="prop-type">number</span>                                             | Index of the row in the current page.<br />If the pagination is disabled, this value will be equal to the `fromFilteredRows` value. |
-| <span class="prop-name">isFirstVisible</span>             | <span class="prop-type">boolean</span>                                            | Whether this row is the first visible or not.                                                                                       |
-| <span class="prop-name">isLastVisible</span>              | <span class="prop-type">boolean</span>                                            | Whether this row is the last visible or not.                                                                                        |
-| <span class="prop-name">row</span>                        | <span class="prop-type">R</span>                                                  | The row model of the row that the current cell belongs to.                                                                          |
+| Name                                                       | Type                                                                              | Description                                                                                                                                    |
+| :--------------------------------------------------------- | :-------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- |
+| <span class="prop-name">columns</span>                     | <span class="prop-type">GridColumns</span>                                        | All grid columns.                                                                                                                              |
+| <span class="prop-name">getValue</span>                    | <span class="prop-type">(id: GridRowId, field: string) =&gt; GridCellValue</span> | Get the cell value of a row and field.                                                                                                         |
+| <span class="prop-name">id</span>                          | <span class="prop-type">GridRowId</span>                                          | The grid row id.                                                                                                                               |
+| <span class="prop-name">indexRelativeToCurrentPage</span>  | <span class="prop-type">number</span>                                             | Index of the row in the current page.<br />If the pagination is disabled, this value will be equal to the `indexRelativeToExpandedRows` value. |
+| <span class="prop-name">indexRelativeToExpandedRows</span> | <span class="prop-type">number</span>                                             | Index of the row in the whole sorted and filtered dataset.<br />If some rows have children, this value only counts the expanded children.      |
+| <span class="prop-name">isFirstVisible</span>              | <span class="prop-type">boolean</span>                                            | Whether this row is the first visible or not.                                                                                                  |
+| <span class="prop-name">isLastVisible</span>               | <span class="prop-type">boolean</span>                                            | Whether this row is the last visible or not.                                                                                                   |
+| <span class="prop-name">row</span>                         | <span class="prop-type">R</span>                                                  | The row model of the row that the current cell belongs to.                                                                                     |
diff --git a/docs/pages/x/api/data-grid/grid-row-spacing-params.md b/docs/pages/x/api/data-grid/grid-row-spacing-params.md
index 1b93ec317604..fd5670123b7c 100644
--- a/docs/pages/x/api/data-grid/grid-row-spacing-params.md
+++ b/docs/pages/x/api/data-grid/grid-row-spacing-params.md
@@ -12,11 +12,11 @@ import { GridRowSpacingParams } from '@mui/x-data-grid';
 
 ## Properties
 
-| Name                                                      | Type                                        | Description                                                                                                                         |
-| :-------------------------------------------------------- | :------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------- |
-| <span class="prop-name">id</span>                         | <span class="prop-type">GridRowId</span>    | The row id.                                                                                                                         |
-| <span class="prop-name">indexRelatedToFilteredRows</span> | <span class="prop-type">number</span>       | Index of the row in the whole sorted and filtered dataset.                                                                          |
-| <span class="prop-name">indexRelativeToCurrentPage</span> | <span class="prop-type">number</span>       | Index of the row in the current page.<br />If the pagination is disabled, this value will be equal to the `fromFilteredRows` value. |
-| <span class="prop-name">isFirstVisible</span>             | <span class="prop-type">boolean</span>      | Whether this row is the first visible or not.                                                                                       |
-| <span class="prop-name">isLastVisible</span>              | <span class="prop-type">boolean</span>      | Whether this row is the last visible or not.                                                                                        |
-| <span class="prop-name">model</span>                      | <span class="prop-type">GridRowModel</span> | The row model.                                                                                                                      |
+| Name                                                       | Type                                        | Description                                                                                                                                    |
+| :--------------------------------------------------------- | :------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------- |
+| <span class="prop-name">id</span>                          | <span class="prop-type">GridRowId</span>    | The row id.                                                                                                                                    |
+| <span class="prop-name">indexRelativeToCurrentPage</span>  | <span class="prop-type">number</span>       | Index of the row in the current page.<br />If the pagination is disabled, this value will be equal to the `indexRelativeToExpandedRows` value. |
+| <span class="prop-name">indexRelativeToExpandedRows</span> | <span class="prop-type">number</span>       | Index of the row in the whole sorted and filtered dataset.<br />If some rows have children, this value only counts the expanded children.      |
+| <span class="prop-name">isFirstVisible</span>              | <span class="prop-type">boolean</span>      | Whether this row is the first visible or not.                                                                                                  |
+| <span class="prop-name">isLastVisible</span>               | <span class="prop-type">boolean</span>      | Whether this row is the last visible or not.                                                                                                   |
+| <span class="prop-name">model</span>                       | <span class="prop-type">GridRowModel</span> | The row model.                                                                                                                                 |
diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx
index ecce152da0a3..6526900f89d1 100644
--- a/packages/grid/x-data-grid/src/components/GridRow.tsx
+++ b/packages/grid/x-data-grid/src/components/GridRow.tsx
@@ -219,7 +219,7 @@ function GridRow(props: GridRowProps) {
       ...apiRef.current.getRowParams(rowId),
       isFirstVisible: indexRelativeToCurrentPage === 0,
       isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
-      indexRelatedToFilteredRows: index,
+      indexRelativeToExpandedRows: index,
       indexRelativeToCurrentPage,
     };
 
diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
index e62ea9c76cee..224941450a05 100644
--- a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
+++ b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
@@ -83,7 +83,7 @@ export const useGridRowsMeta = (
             ...row,
             isFirstVisible: indexRelativeToCurrentPage === 0,
             isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
-            indexRelatedToFilteredRows:
+            indexRelativeToExpandedRows:
               indexRelativeToCurrentPage + currentPage.range!.firstRowIndex,
             indexRelativeToCurrentPage,
           });
diff --git a/packages/grid/x-data-grid/src/models/params/gridRowParams.ts b/packages/grid/x-data-grid/src/models/params/gridRowParams.ts
index f34f62f74dfd..dd2c6c73a7f0 100644
--- a/packages/grid/x-data-grid/src/models/params/gridRowParams.ts
+++ b/packages/grid/x-data-grid/src/models/params/gridRowParams.ts
@@ -39,11 +39,12 @@ interface GridRowVisibilityParams {
   isLastVisible: boolean;
   /**
    * Index of the row in the whole sorted and filtered dataset.
+   * If some rows have children, this value only counts the expanded children.
    */
-  indexRelatedToFilteredRows: number;
+  indexRelativeToExpandedRows: number;
   /**
    * Index of the row in the current page.
-   * If the pagination is disabled, this value will be equal to the `fromFilteredRows` value.
+   * If the pagination is disabled, this value will be equal to the `indexRelativeToExpandedRows` value.
    */
   indexRelativeToCurrentPage: number;
 }

From f70e677c95e7eeeb3320533c4b18308477d9ce33 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Fri, 11 Mar 2022 14:05:31 +0100
Subject: [PATCH 25/32] Work

---
 packages/grid/x-data-grid/src/components/GridRow.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx
index 6526900f89d1..75545a117a9d 100644
--- a/packages/grid/x-data-grid/src/components/GridRow.tsx
+++ b/packages/grid/x-data-grid/src/components/GridRow.tsx
@@ -27,7 +27,7 @@ import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelection
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GridRenderEditCellParams } from '../models';
 
-export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface GridRowProps {
   rowId: GridRowId;
   selected: boolean;
   /**
@@ -84,7 +84,7 @@ const EmptyCell = ({ width, height }: { width: number; height: number }) => {
   return <div className="MuiDataGrid-cell" style={style} />; // TODO change to .MuiDataGrid-emptyCell or .MuiDataGrid-rowFiller
 };
 
-function GridRow(props: GridRowProps) {
+function GridRow(props: React.HTMLAttributes<HTMLDivElement> & GridRowProps) {
   const {
     selected,
     rowId,
@@ -355,10 +355,6 @@ GridRow.propTypes = {
   index: PropTypes.number.isRequired,
   isLastVisible: PropTypes.bool,
   lastColumnToRender: PropTypes.number.isRequired,
-  onClick: PropTypes.func,
-  onDoubleClick: PropTypes.func,
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
   row: PropTypes.object.isRequired,
   rowHeight: PropTypes.number.isRequired,

From 8b95d8cec7093246f3eaac021fb51d9c655291c1 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Tue, 29 Mar 2022 12:57:02 +0200
Subject: [PATCH 26/32] Work

---
 docs/src/pages/components/.eslintrc.js               | 8 ++++++++
 packages/grid/x-data-grid/src/components/GridRow.tsx | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/pages/components/.eslintrc.js

diff --git a/docs/src/pages/components/.eslintrc.js b/docs/src/pages/components/.eslintrc.js
new file mode 100644
index 000000000000..4eb66e683b1f
--- /dev/null
+++ b/docs/src/pages/components/.eslintrc.js
@@ -0,0 +1,8 @@
+module.exports = {
+  rules: {
+    // useful for interactions feedback
+    'no-console': ['off', { allow: ['info'] }],
+    // not very friendly to prop forwarding
+    'react/jsx-handler-names': 'off',
+  },
+};
diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx
index 830c1160a2c5..12f5a83fd03e 100644
--- a/packages/grid/x-data-grid/src/components/GridRow.tsx
+++ b/packages/grid/x-data-grid/src/components/GridRow.tsx
@@ -25,7 +25,7 @@ import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
 import { findParentElementFromClassName } from '../utils/domUtils';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
-import { GridRenderEditCellParams } from '../models';
+import { GridRenderEditCellParams } from '../models/params/gridCellParams';
 
 export interface GridRowProps {
   rowId: GridRowId;

From 9d4d9807f3d8880a84a44bd095fb86f67cd71455 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Tue, 29 Mar 2022 12:59:56 +0200
Subject: [PATCH 27/32] Work

---
 .../x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
index 0569f021ce64..b1a6dea2d976 100644
--- a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
+++ b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
@@ -84,7 +84,7 @@ export const useGridRowsMeta = (
             isFirstVisible: indexRelativeToCurrentPage === 0,
             isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
             indexRelativeToExpandedRows:
-              indexRelativeToCurrentPage + currentPage.range!.firstRowIndex,
+              indexRelativeToCurrentPage + currentPage.range?.firstRowIndex!,
             indexRelativeToCurrentPage,
           });
 
@@ -115,7 +115,7 @@ export const useGridRowsMeta = (
       };
     });
     apiRef.current.forceUpdate();
-  }, [apiRef, currentPage.rows, currentPage.range, getRowSpacing, getRowHeight]);
+  }, [apiRef, currentPage.rows, currentPage.range?.firstRowIndex, getRowSpacing, getRowHeight]);
 
   const getTargetRowHeight = (rowId: GridRowId): number =>
     rowsHeightLookup.current[rowId]?.value || rowHeight;

From 4632d69a98ff78c8feb5e6b606f182829d0a1080 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Tue, 29 Mar 2022 13:11:58 +0200
Subject: [PATCH 28/32] Work

---
 .../grid/x-data-grid/src/tests/rows.DataGrid.test.tsx    | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx
index 7a9cf4a3554d..8e9c8f52b715 100644
--- a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx
+++ b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx
@@ -374,16 +374,19 @@ describe('<DataGrid /> - Rows', () => {
     it('should be called with the correct params', () => {
       const getRowSpacing = stub().returns({});
       render(<TestCase getRowSpacing={getRowSpacing} pageSize={2} rowsPerPageOptions={[2]} />);
-
       expect(getRowSpacing.args[0][0]).to.deep.equal({
         isFirstVisible: true,
         isLastVisible: false,
+        indexRelativeToExpandedRows: 0,
+        indexRelativeToCurrentPage: 0,
         id: 0,
         model: rows[0],
       });
       expect(getRowSpacing.args[1][0]).to.deep.equal({
         isFirstVisible: false,
         isLastVisible: true,
+        indexRelativeToExpandedRows: 1,
+        indexRelativeToCurrentPage: 1,
         id: 1,
         model: rows[1],
       });
@@ -394,12 +397,16 @@ describe('<DataGrid /> - Rows', () => {
       expect(getRowSpacing.args[0][0]).to.deep.equal({
         isFirstVisible: true,
         isLastVisible: false,
+        indexRelativeToExpandedRows: 2,
+        indexRelativeToCurrentPage: 0,
         id: 2,
         model: rows[2],
       });
       expect(getRowSpacing.args[1][0]).to.deep.equal({
         isFirstVisible: false,
         isLastVisible: true,
+        indexRelativeToExpandedRows: 3,
+        indexRelativeToCurrentPage: 1,
         id: 3,
         model: rows[3],
       });

From d551b175b1c78f5e770cbdf695e5fc258dc125df Mon Sep 17 00:00:00 2001
From: Flavien DELANGLE <flaviendelangle@gmail.com>
Date: Wed, 6 Apr 2022 09:42:10 +0200
Subject: [PATCH 29/32] Update docs/data/data-grid/style/style.md

Co-authored-by: Matheus Wichman <matheushw@outlook.com>
---
 docs/data/data-grid/style/style.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/data-grid/style/style.md b/docs/data/data-grid/style/style.md
index 792e9ee6d49e..b2aafda7da39 100644
--- a/docs/data/data-grid/style/style.md
+++ b/docs/data/data-grid/style/style.md
@@ -121,7 +121,7 @@ Choose between one of the following values: 'left' | 'right' | 'center'.
 
 The following demo illustrates how the rows of the grid can be stripped.
 
-{{"demo": "StripedGrid.js", "bg": "inline", "defaultCodeOpen": false}}
+{{"demo": "StripedGrid.js", "bg": "inline"}}
 
 ## Custom theme
 

From d6b13230094242f88e61f8b8c0defff80ae074dc Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Wed, 6 Apr 2022 09:44:42 +0200
Subject: [PATCH 30/32] Work

---
 docs/data/data-grid/style/style.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/data/data-grid/style/style.md b/docs/data/data-grid/style/style.md
index b2aafda7da39..907e95c7f972 100644
--- a/docs/data/data-grid/style/style.md
+++ b/docs/data/data-grid/style/style.md
@@ -125,7 +125,9 @@ The following demo illustrates how the rows of the grid can be stripped.
 
 ## Custom theme
 
-The following demo leverages the CSS customization API to match the Ant Design specification.
+You can use the `indexRelativeToCurrentPage` param passed to `getRowClassName` to apply alternating styles to the rows.
+
+The following demo illustrates how this can be achieved.
 
 {{"demo": "AntDesignGrid.js", "defaultCodeOpen": false}}
 

From ef7c98273d5fe7b8ed8f7842dbd853ccd74de078 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Wed, 6 Apr 2022 15:31:11 +0200
Subject: [PATCH 31/32] Remove expanded index

---
 .../data-grid/grid-row-class-name-params.md   | 19 +++++++++----------
 .../data-grid/grid-row-spacing-params.md      | 15 +++++++--------
 .../data-grid/grid-row-class-name-params.md   | 19 +++++++++----------
 .../api/data-grid/grid-row-spacing-params.md  | 15 +++++++--------
 .../x-data-grid/src/components/GridRow.tsx    |  1 -
 .../hooks/features/rows/useGridRowsMeta.ts    |  2 --
 .../src/models/params/gridRowParams.ts        |  7 +------
 .../src/tests/rows.DataGrid.test.tsx          |  4 ----
 8 files changed, 33 insertions(+), 49 deletions(-)

diff --git a/docs/pages/api-docs/data-grid/grid-row-class-name-params.md b/docs/pages/api-docs/data-grid/grid-row-class-name-params.md
index aaca0b966bee..dae66bcad724 100644
--- a/docs/pages/api-docs/data-grid/grid-row-class-name-params.md
+++ b/docs/pages/api-docs/data-grid/grid-row-class-name-params.md
@@ -12,13 +12,12 @@ import { GridRowClassNameParams } from '@mui/x-data-grid';
 
 ## Properties
 
-| Name                                                       | Type                                                                    | Description                                                                                                                                    |
-| :--------------------------------------------------------- | :---------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- |
-| <span class="prop-name">columns</span>                     | <span class="prop-type">GridColumns</span>                              | All grid columns.                                                                                                                              |
-| <span class="prop-name">getValue</span>                    | <span class="prop-type">(id: GridRowId, field: string) =&gt; any</span> | Get the cell value of a row and field.                                                                                                         |
-| <span class="prop-name">id</span>                          | <span class="prop-type">GridRowId</span>                                | The grid row id.                                                                                                                               |
-| <span class="prop-name">indexRelativeToCurrentPage</span>  | <span class="prop-type">number</span>                                   | Index of the row in the current page.<br />If the pagination is disabled, this value will be equal to the `indexRelativeToExpandedRows` value. |
-| <span class="prop-name">indexRelativeToExpandedRows</span> | <span class="prop-type">number</span>                                   | Index of the row in the whole sorted and filtered dataset.<br />If some rows have children, this value only counts the expanded children.      |
-| <span class="prop-name">isFirstVisible</span>              | <span class="prop-type">boolean</span>                                  | Whether this row is the first visible or not.                                                                                                  |
-| <span class="prop-name">isLastVisible</span>               | <span class="prop-type">boolean</span>                                  | Whether this row is the last visible or not.                                                                                                   |
-| <span class="prop-name">row</span>                         | <span class="prop-type">R</span>                                        | The row model of the row that the current cell belongs to.                                                                                     |
+| Name                                                      | Type                                                                    | Description                                                                                                                   |
+| :-------------------------------------------------------- | :---------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------- |
+| <span class="prop-name">columns</span>                    | <span class="prop-type">GridColumns</span>                              | All grid columns.                                                                                                             |
+| <span class="prop-name">getValue</span>                   | <span class="prop-type">(id: GridRowId, field: string) =&gt; any</span> | Get the cell value of a row and field.                                                                                        |
+| <span class="prop-name">id</span>                         | <span class="prop-type">GridRowId</span>                                | The grid row id.                                                                                                              |
+| <span class="prop-name">indexRelativeToCurrentPage</span> | <span class="prop-type">number</span>                                   | Index of the row in the current page.<br />If the pagination is disabled, it will be the index relative to all filtered rows. |
+| <span class="prop-name">isFirstVisible</span>             | <span class="prop-type">boolean</span>                                  | Whether this row is the first visible or not.                                                                                 |
+| <span class="prop-name">isLastVisible</span>              | <span class="prop-type">boolean</span>                                  | Whether this row is the last visible or not.                                                                                  |
+| <span class="prop-name">row</span>                        | <span class="prop-type">R</span>                                        | The row model of the row that the current cell belongs to.                                                                    |
diff --git a/docs/pages/api-docs/data-grid/grid-row-spacing-params.md b/docs/pages/api-docs/data-grid/grid-row-spacing-params.md
index dd0a52eebbfc..828bc621478a 100644
--- a/docs/pages/api-docs/data-grid/grid-row-spacing-params.md
+++ b/docs/pages/api-docs/data-grid/grid-row-spacing-params.md
@@ -12,11 +12,10 @@ import { GridRowSpacingParams } from '@mui/x-data-grid';
 
 ## Properties
 
-| Name                                                       | Type                                     | Description                                                                                                                                    |
-| :--------------------------------------------------------- | :--------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- |
-| <span class="prop-name">id</span>                          | <span class="prop-type">GridRowId</span> | The row id.                                                                                                                                    |
-| <span class="prop-name">indexRelativeToCurrentPage</span>  | <span class="prop-type">number</span>    | Index of the row in the current page.<br />If the pagination is disabled, this value will be equal to the `indexRelativeToExpandedRows` value. |
-| <span class="prop-name">indexRelativeToExpandedRows</span> | <span class="prop-type">number</span>    | Index of the row in the whole sorted and filtered dataset.<br />If some rows have children, this value only counts the expanded children.      |
-| <span class="prop-name">isFirstVisible</span>              | <span class="prop-type">boolean</span>   | Whether this row is the first visible or not.                                                                                                  |
-| <span class="prop-name">isLastVisible</span>               | <span class="prop-type">boolean</span>   | Whether this row is the last visible or not.                                                                                                   |
-| <span class="prop-name">model</span>                       | <span class="prop-type">R</span>         | The row model.                                                                                                                                 |
+| Name                                                      | Type                                     | Description                                                                                                                   |
+| :-------------------------------------------------------- | :--------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------- |
+| <span class="prop-name">id</span>                         | <span class="prop-type">GridRowId</span> | The row id.                                                                                                                   |
+| <span class="prop-name">indexRelativeToCurrentPage</span> | <span class="prop-type">number</span>    | Index of the row in the current page.<br />If the pagination is disabled, it will be the index relative to all filtered rows. |
+| <span class="prop-name">isFirstVisible</span>             | <span class="prop-type">boolean</span>   | Whether this row is the first visible or not.                                                                                 |
+| <span class="prop-name">isLastVisible</span>              | <span class="prop-type">boolean</span>   | Whether this row is the last visible or not.                                                                                  |
+| <span class="prop-name">model</span>                      | <span class="prop-type">R</span>         | The row model.                                                                                                                |
diff --git a/docs/pages/x/api/data-grid/grid-row-class-name-params.md b/docs/pages/x/api/data-grid/grid-row-class-name-params.md
index aaca0b966bee..dae66bcad724 100644
--- a/docs/pages/x/api/data-grid/grid-row-class-name-params.md
+++ b/docs/pages/x/api/data-grid/grid-row-class-name-params.md
@@ -12,13 +12,12 @@ import { GridRowClassNameParams } from '@mui/x-data-grid';
 
 ## Properties
 
-| Name                                                       | Type                                                                    | Description                                                                                                                                    |
-| :--------------------------------------------------------- | :---------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- |
-| <span class="prop-name">columns</span>                     | <span class="prop-type">GridColumns</span>                              | All grid columns.                                                                                                                              |
-| <span class="prop-name">getValue</span>                    | <span class="prop-type">(id: GridRowId, field: string) =&gt; any</span> | Get the cell value of a row and field.                                                                                                         |
-| <span class="prop-name">id</span>                          | <span class="prop-type">GridRowId</span>                                | The grid row id.                                                                                                                               |
-| <span class="prop-name">indexRelativeToCurrentPage</span>  | <span class="prop-type">number</span>                                   | Index of the row in the current page.<br />If the pagination is disabled, this value will be equal to the `indexRelativeToExpandedRows` value. |
-| <span class="prop-name">indexRelativeToExpandedRows</span> | <span class="prop-type">number</span>                                   | Index of the row in the whole sorted and filtered dataset.<br />If some rows have children, this value only counts the expanded children.      |
-| <span class="prop-name">isFirstVisible</span>              | <span class="prop-type">boolean</span>                                  | Whether this row is the first visible or not.                                                                                                  |
-| <span class="prop-name">isLastVisible</span>               | <span class="prop-type">boolean</span>                                  | Whether this row is the last visible or not.                                                                                                   |
-| <span class="prop-name">row</span>                         | <span class="prop-type">R</span>                                        | The row model of the row that the current cell belongs to.                                                                                     |
+| Name                                                      | Type                                                                    | Description                                                                                                                   |
+| :-------------------------------------------------------- | :---------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------- |
+| <span class="prop-name">columns</span>                    | <span class="prop-type">GridColumns</span>                              | All grid columns.                                                                                                             |
+| <span class="prop-name">getValue</span>                   | <span class="prop-type">(id: GridRowId, field: string) =&gt; any</span> | Get the cell value of a row and field.                                                                                        |
+| <span class="prop-name">id</span>                         | <span class="prop-type">GridRowId</span>                                | The grid row id.                                                                                                              |
+| <span class="prop-name">indexRelativeToCurrentPage</span> | <span class="prop-type">number</span>                                   | Index of the row in the current page.<br />If the pagination is disabled, it will be the index relative to all filtered rows. |
+| <span class="prop-name">isFirstVisible</span>             | <span class="prop-type">boolean</span>                                  | Whether this row is the first visible or not.                                                                                 |
+| <span class="prop-name">isLastVisible</span>              | <span class="prop-type">boolean</span>                                  | Whether this row is the last visible or not.                                                                                  |
+| <span class="prop-name">row</span>                        | <span class="prop-type">R</span>                                        | The row model of the row that the current cell belongs to.                                                                    |
diff --git a/docs/pages/x/api/data-grid/grid-row-spacing-params.md b/docs/pages/x/api/data-grid/grid-row-spacing-params.md
index dd0a52eebbfc..828bc621478a 100644
--- a/docs/pages/x/api/data-grid/grid-row-spacing-params.md
+++ b/docs/pages/x/api/data-grid/grid-row-spacing-params.md
@@ -12,11 +12,10 @@ import { GridRowSpacingParams } from '@mui/x-data-grid';
 
 ## Properties
 
-| Name                                                       | Type                                     | Description                                                                                                                                    |
-| :--------------------------------------------------------- | :--------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------- |
-| <span class="prop-name">id</span>                          | <span class="prop-type">GridRowId</span> | The row id.                                                                                                                                    |
-| <span class="prop-name">indexRelativeToCurrentPage</span>  | <span class="prop-type">number</span>    | Index of the row in the current page.<br />If the pagination is disabled, this value will be equal to the `indexRelativeToExpandedRows` value. |
-| <span class="prop-name">indexRelativeToExpandedRows</span> | <span class="prop-type">number</span>    | Index of the row in the whole sorted and filtered dataset.<br />If some rows have children, this value only counts the expanded children.      |
-| <span class="prop-name">isFirstVisible</span>              | <span class="prop-type">boolean</span>   | Whether this row is the first visible or not.                                                                                                  |
-| <span class="prop-name">isLastVisible</span>               | <span class="prop-type">boolean</span>   | Whether this row is the last visible or not.                                                                                                   |
-| <span class="prop-name">model</span>                       | <span class="prop-type">R</span>         | The row model.                                                                                                                                 |
+| Name                                                      | Type                                     | Description                                                                                                                   |
+| :-------------------------------------------------------- | :--------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------- |
+| <span class="prop-name">id</span>                         | <span class="prop-type">GridRowId</span> | The row id.                                                                                                                   |
+| <span class="prop-name">indexRelativeToCurrentPage</span> | <span class="prop-type">number</span>    | Index of the row in the current page.<br />If the pagination is disabled, it will be the index relative to all filtered rows. |
+| <span class="prop-name">isFirstVisible</span>             | <span class="prop-type">boolean</span>   | Whether this row is the first visible or not.                                                                                 |
+| <span class="prop-name">isLastVisible</span>              | <span class="prop-type">boolean</span>   | Whether this row is the last visible or not.                                                                                  |
+| <span class="prop-name">model</span>                      | <span class="prop-type">R</span>         | The row model.                                                                                                                |
diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx
index 12f5a83fd03e..ac3b74988cb6 100644
--- a/packages/grid/x-data-grid/src/components/GridRow.tsx
+++ b/packages/grid/x-data-grid/src/components/GridRow.tsx
@@ -219,7 +219,6 @@ function GridRow(props: React.HTMLAttributes<HTMLDivElement> & GridRowProps) {
       ...apiRef.current.getRowParams(rowId),
       isFirstVisible: indexRelativeToCurrentPage === 0,
       isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
-      indexRelativeToExpandedRows: index,
       indexRelativeToCurrentPage,
     };
 
diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
index b1a6dea2d976..3efc31ad1925 100644
--- a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
+++ b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
@@ -83,8 +83,6 @@ export const useGridRowsMeta = (
             ...row,
             isFirstVisible: indexRelativeToCurrentPage === 0,
             isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
-            indexRelativeToExpandedRows:
-              indexRelativeToCurrentPage + currentPage.range?.firstRowIndex!,
             indexRelativeToCurrentPage,
           });
 
diff --git a/packages/grid/x-data-grid/src/models/params/gridRowParams.ts b/packages/grid/x-data-grid/src/models/params/gridRowParams.ts
index 3bfbb43428c3..99129adbb822 100644
--- a/packages/grid/x-data-grid/src/models/params/gridRowParams.ts
+++ b/packages/grid/x-data-grid/src/models/params/gridRowParams.ts
@@ -36,14 +36,9 @@ interface GridRowVisibilityParams {
    * Whether this row is the last visible or not.
    */
   isLastVisible: boolean;
-  /**
-   * Index of the row in the whole sorted and filtered dataset.
-   * If some rows have children, this value only counts the expanded children.
-   */
-  indexRelativeToExpandedRows: number;
   /**
    * Index of the row in the current page.
-   * If the pagination is disabled, this value will be equal to the `indexRelativeToExpandedRows` value.
+   * If the pagination is disabled, it will be the index relative to all filtered rows.
    */
   indexRelativeToCurrentPage: number;
 }
diff --git a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx
index 8e9c8f52b715..6da1c5e0574c 100644
--- a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx
+++ b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx
@@ -377,7 +377,6 @@ describe('<DataGrid /> - Rows', () => {
       expect(getRowSpacing.args[0][0]).to.deep.equal({
         isFirstVisible: true,
         isLastVisible: false,
-        indexRelativeToExpandedRows: 0,
         indexRelativeToCurrentPage: 0,
         id: 0,
         model: rows[0],
@@ -385,7 +384,6 @@ describe('<DataGrid /> - Rows', () => {
       expect(getRowSpacing.args[1][0]).to.deep.equal({
         isFirstVisible: false,
         isLastVisible: true,
-        indexRelativeToExpandedRows: 1,
         indexRelativeToCurrentPage: 1,
         id: 1,
         model: rows[1],
@@ -397,7 +395,6 @@ describe('<DataGrid /> - Rows', () => {
       expect(getRowSpacing.args[0][0]).to.deep.equal({
         isFirstVisible: true,
         isLastVisible: false,
-        indexRelativeToExpandedRows: 2,
         indexRelativeToCurrentPage: 0,
         id: 2,
         model: rows[2],
@@ -405,7 +402,6 @@ describe('<DataGrid /> - Rows', () => {
       expect(getRowSpacing.args[1][0]).to.deep.equal({
         isFirstVisible: false,
         isLastVisible: true,
-        indexRelativeToExpandedRows: 3,
         indexRelativeToCurrentPage: 1,
         id: 3,
         model: rows[3],

From 0cac80d231999de2181ca5500c9ebc71fedcf893 Mon Sep 17 00:00:00 2001
From: delangle <flaviendelangle@gmail.com>
Date: Wed, 6 Apr 2022 17:31:40 +0200
Subject: [PATCH 32/32] Work

---
 .../grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
index 3efc31ad1925..c37064490155 100644
--- a/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
+++ b/packages/grid/x-data-grid/src/hooks/features/rows/useGridRowsMeta.ts
@@ -113,7 +113,7 @@ export const useGridRowsMeta = (
       };
     });
     apiRef.current.forceUpdate();
-  }, [apiRef, currentPage.rows, currentPage.range?.firstRowIndex, getRowSpacing, getRowHeight]);
+  }, [apiRef, currentPage.rows, getRowSpacing, getRowHeight]);
 
   const getTargetRowHeight = (rowId: GridRowId): number =>
     rowsHeightLookup.current[rowId]?.value || rowHeight;