[DataGrid] Add support for margin between rows

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

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

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} />;
+}

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 prop.</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. |

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} />;
+}

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 prop.</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. |

docs/scripts/api/buildInterfacesDocumentation.ts

@@ -52,6 +52,8 @@ const INTERFACES_WITH_DEDICATED_PAGES = [
   // Params
   'GridCellParams',
   'GridRowParams',
+  'GridRowClassNameParams',
+  'GridRowSpacingParams',
 
   // Others
   'GridColDef',

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>
+  );
+}

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>
+  );
+}

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.

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 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.",

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 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.",

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 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.",