Merge branch 'master' into speed-test-unit

mui · Mar 9, 2022 · 1628ce6 · 1628ce6
2 parents 515c3b0 + 1ac64ba
commit 1628ce6
Show file tree

Hide file tree

Showing 43 changed files with 624 additions and 64 deletions.
diff --git a/docs/data/data-grid/rows/RowMarginGrid.js b/docs/data/data-grid/rows/RowMarginGrid.js
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { DataGrid, gridClasses } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import { grey } from '@mui/material/colors';
+
+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,
+    };
+  }, []);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        getRowSpacing={getRowSpacing}
+        sx={{
+          [`& .${gridClasses.row}`]: {
+            bgcolor: (theme) =>
+              theme.palette.mode === 'light' ? grey[200] : grey[800],
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/rows/RowMarginGrid.tsx b/docs/data/data-grid/rows/RowMarginGrid.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { DataGrid, GridRowSpacingParams, gridClasses } from '@mui/x-data-grid';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import { grey } from '@mui/material/colors';
+
+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,
+    };
+  }, []);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid
+        {...data}
+        getRowSpacing={getRowSpacing}
+        sx={{
+          [`& .${gridClasses.row}`]: {
+            bgcolor: (theme) =>
+              theme.palette.mode === 'light' ? grey[200] : grey[800],
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/rows/RowMarginGrid.tsx.preview b/docs/data/data-grid/rows/RowMarginGrid.tsx.preview
@@ -0,0 +1,10 @@
+<DataGrid
+  {...data}
+  getRowSpacing={getRowSpacing}
+  sx={{
+    [`& .${gridClasses.row}`]: {
+      bgcolor: (theme) =>
+        theme.palette.mode === 'light' ? grey[200] : grey[800],
+    },
+  }}
+/>
diff --git a/docs/data/data-grid/rows/rows.md b/docs/data/data-grid/rows/rows.md
@@ -100,6 +100,37 @@ If you need some rows to have different row heights this can be achieved using t
 > <DataGridPro getRowHeight={handleGetRowHeight} />
 > ```
 
+## Row spacing
+
+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
+const getRowSpacing = React.useCallback((params: GridRowSpacingParams) => {
+  return {
+    top: params.isFirstVisible ? 0 : 5,
+    bottom: params.isLastVisible ? 0 : 5,
+  };
+}, []);
+```
+
+{{"demo": "RowMarginGrid.js", "bg": "inline", "defaultCodeOpen": false}}
+
+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 because the detail panel relays on the bottom margin to work.
+> As an alternative, only use the top spacing to define the space between rows.
+> It will be easier to always increase the next row spacing not matter if the detail panel is expanded or not, but you can use `gridDetailPanelExpandedRowIdsSelector` to only do when open.
+
 ## Styling rows
 
 You can check the [styling rows](/components/data-grid/style/#styling-rows) section for more information.

diff --git 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" },
@@ -177,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
@@ -58,6 +58,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" } },
@@ -130,6 +131,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/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/api-docs/data-grid/grid-row-class-name-params.js 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
@@ -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. |
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
@@ -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
@@ -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 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/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/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" },
@@ -177,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
@@ -58,6 +58,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" } },
@@ -130,6 +131,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/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/docs/pages/x/api/data-grid/grid-row-class-name-params.js b/docs/pages/x/api/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} />;
+}