Skip to content

Commit 1ac64ba

Browse files
m4theushwm4theushw
authored
[DataGrid] Add support for margin between rows (mui#3848)
1 parent 5551732 commit 1ac64ba

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+624
-64
lines changed

‎docs/data/data-grid/rows/RowMarginGrid.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import * as React from 'react';
2+
import { DataGrid, gridClasses } from '@mui/x-data-grid';
3+
import { useDemoData } from '@mui/x-data-grid-generator';
4+
import { grey } from '@mui/material/colors';
5+
6+
export default function RowMarginGrid() {
7+
const { data } = useDemoData({
8+
dataSet: 'Commodity',
9+
rowLength: 200,
10+
maxColumns: 6,
11+
});
12+
13+
const getRowSpacing = React.useCallback((params) => {
14+
return {
15+
top: params.isFirstVisible ? 0 : 5,
16+
bottom: params.isLastVisible ? 0 : 5,
17+
};
18+
}, []);
19+
20+
return (
21+
<div style={{ height: 400, width: '100%' }}>
22+
<DataGrid
23+
{...data}
24+
getRowSpacing={getRowSpacing}
25+
sx={{
26+
[`& .${gridClasses.row}`]: {
27+
bgcolor: (theme) =>
28+
theme.palette.mode === 'light' ? grey[200] : grey[800],
29+
},
30+
}}
31+
/>
32+
</div>
33+
);
34+
}

‎docs/data/data-grid/rows/RowMarginGrid.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import * as React from 'react';
2+
import { DataGrid, GridRowSpacingParams, gridClasses } from '@mui/x-data-grid';
3+
import { useDemoData } from '@mui/x-data-grid-generator';
4+
import { grey } from '@mui/material/colors';
5+
6+
export default function RowMarginGrid() {
7+
const { data } = useDemoData({
8+
dataSet: 'Commodity',
9+
rowLength: 200,
10+
maxColumns: 6,
11+
});
12+
13+
const getRowSpacing = React.useCallback((params: GridRowSpacingParams) => {
14+
return {
15+
top: params.isFirstVisible ? 0 : 5,
16+
bottom: params.isLastVisible ? 0 : 5,
17+
};
18+
}, []);
19+
20+
return (
21+
<div style={{ height: 400, width: '100%' }}>
22+
<DataGrid
23+
{...data}
24+
getRowSpacing={getRowSpacing}
25+
sx={{
26+
[`& .${gridClasses.row}`]: {
27+
bgcolor: (theme) =>
28+
theme.palette.mode === 'light' ? grey[200] : grey[800],
29+
},
30+
}}
31+
/>
32+
</div>
33+
);
34+
}

‎docs/data/data-grid/rows/RowMarginGrid.tsx.preview‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<DataGrid
2+
{...data}
3+
getRowSpacing={getRowSpacing}
4+
sx={{
5+
[`& .${gridClasses.row}`]: {
6+
bgcolor: (theme) =>
7+
theme.palette.mode === 'light' ? grey[200] : grey[800],
8+
},
9+
}}
10+
/>

‎docs/data/data-grid/rows/rows.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,37 @@ If you need some rows to have different row heights this can be achieved using t
100100
> <DataGridPro getRowHeight={handleGetRowHeight} />
101101
> ```
102102
103+
## Row spacing
104+
105+
You can use the `getRowSpacing` prop to increase the spacing between rows.
106+
This prop is called with a [`GridRowSpacingParams`](/api/data-grid/grid-row-spacing-params/) object.
107+
108+
```tsx
109+
const getRowSpacing = React.useCallback((params: GridRowSpacingParams) => {
110+
return {
111+
top: params.isFirstVisible ? 0 : 5,
112+
bottom: params.isLastVisible ? 0 : 5,
113+
};
114+
}, []);
115+
```
116+
117+
{{"demo": "RowMarginGrid.js", "bg": "inline", "defaultCodeOpen": false}}
118+
119+
By default, setting `getRowSpacing` will change the `marginXXX` CSS properties of each row.
120+
To add a border instead, set `rowSpacingType` to `"border"` and customize the color and style.
121+
122+
```tsx
123+
<DataGrid
124+
getRowSpacing={...}
125+
rowSpacingType="border"
126+
sx={{ '& .MuiDataGrid-row': { borderTopColor: 'yellow', borderTopStyle: 'solid' } }}
127+
/>
128+
```
129+
130+
> ⚠ 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.
131+
> As an alternative, only use the top spacing to define the space between rows.
132+
> 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.
133+
103134
## Styling rows
104135

105136
You can check the [styling rows](/components/data-grid/style/#styling-rows) section for more information.

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080
"getRowClassName": { "type": { "name": "func" } },
8181
"getRowHeight": { "type": { "name": "func" } },
8282
"getRowId": { "type": { "name": "func" } },
83+
"getRowSpacing": { "type": { "name": "func" } },
8384
"getTreeDataPath": { "type": { "name": "func" } },
8485
"groupingColDef": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;object" } },
8586
"headerHeight": { "type": { "name": "number" }, "default": "56" },
@@ -177,6 +178,10 @@
177178
},
178179
"rowGroupingModel": { "type": { "name": "arrayOf", "description": "Array&lt;string&gt;" } },
179180
"rowHeight": { "type": { "name": "number" }, "default": "52" },
181+
"rowSpacingType": {
182+
"type": { "name": "enum", "description": "'border'<br>&#124;&nbsp;'margin'" },
183+
"default": "\"margin\""
184+
},
180185
"rowsPerPageOptions": {
181186
"type": { "name": "arrayOf", "description": "Array&lt;number&gt;" },
182187
"default": "[25, 50, 100]"

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
"getRowClassName": { "type": { "name": "func" } },
5959
"getRowHeight": { "type": { "name": "func" } },
6060
"getRowId": { "type": { "name": "func" } },
61+
"getRowSpacing": { "type": { "name": "func" } },
6162
"headerHeight": { "type": { "name": "number" }, "default": "56" },
6263
"hideFooter": { "type": { "name": "bool" } },
6364
"hideFooterPagination": { "type": { "name": "bool" } },
@@ -130,6 +131,10 @@
130131
"rowBuffer": { "type": { "name": "number" }, "default": "3" },
131132
"rowCount": { "type": { "name": "number" } },
132133
"rowHeight": { "type": { "name": "number" }, "default": "52" },
134+
"rowSpacingType": {
135+
"type": { "name": "enum", "description": "'border'<br>&#124;&nbsp;'margin'" },
136+
"default": "\"margin\""
137+
},
133138
"rowsPerPageOptions": {
134139
"type": { "name": "arrayOf", "description": "Array&lt;number&gt;" },
135140
"default": "[25, 50, 100]"

‎docs/pages/api-docs/data-grid/grid-api.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ import { GridApi } from '@mui/x-data-grid-pro';
4343
| <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`. |
4444
| <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. |
4545
| <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. |
46+
| <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. |
4647
| <span class="prop-name">getRowMode</span> | <span class="prop-type">(id: GridRowId) =&gt; GridRowMode</span> | Gets the mode of a row. |
4748
| <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;. |
4849
| <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. |

‎docs/pages/api-docs/data-grid/grid-row-class-name-params.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as React from 'react';
2+
import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs';
3+
import { demos, docs, demoComponents } from './grid-row-class-name-params.md?@mui/markdown';
4+
5+
export default function Page() {
6+
return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
7+
}

‎docs/pages/api-docs/data-grid/grid-row-class-name-params.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# GridRowClassNameParams Interface
2+
3+
<p class="description">Object passed as parameter in the row `getRowClassName` callback prop.</p>
4+
5+
## Import
6+
7+
```js
8+
import { GridRowClassNameParams } from '@mui/x-data-grid-pro';
9+
// or
10+
import { GridRowClassNameParams } from '@mui/x-data-grid';
11+
```
12+
13+
## Properties
14+
15+
| Name | Type | Description |
16+
| :-------------------------------------------- | :-------------------------------------------------------------------------------- | :--------------------------------------------------------- |
17+
| <span class="prop-name">columns</span> | <span class="prop-type">GridColumns</span> | All grid columns. |
18+
| <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. |
19+
| <span class="prop-name">id</span> | <span class="prop-type">GridRowId</span> | The grid row id. |
20+
| <span class="prop-name">isFirstVisible</span> | <span class="prop-type">boolean</span> | Whether this row is the first visible or not. |
21+
| <span class="prop-name">isLastVisible</span> | <span class="prop-type">boolean</span> | Whether this row is the last visible or not. |
22+
| <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‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as React from 'react';
2+
import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs';
3+
import { demos, docs, demoComponents } from './grid-row-spacing-params.md?@mui/markdown';
4+
5+
export default function Page() {
6+
return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
7+
}

0 commit comments

Comments
 (0)