Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[data grid] Performance: DOM changes #12013

Merged
merged 21 commits into from
Feb 22, 2024
+193 −135
Merged

[data grid] Performance: DOM changes #12013

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
ad9e8bf
perf: remove cellContent
romgrk Feb 9, 2024
f7c1fee
perf: remove emotion wrapper
romgrk Feb 9, 2024
c5e6102
fix: resizing
romgrk Feb 9, 2024
012266d
fix: resize styles
romgrk Feb 9, 2024
fbb071e
lint
romgrk Feb 9, 2024
64cba14
docs: update
romgrk Feb 9, 2024
7dabf06
fix: alignment
romgrk Feb 9, 2024
dd65a9a
test: fix reorder
romgrk Feb 9, 2024
bb5c5f6
fix: rating style
romgrk Feb 9, 2024
7f6ee6a
fix: styles
romgrk Feb 10, 2024
490d429
fix: styles
romgrk Feb 10, 2024
959f038
docs: api
romgrk Feb 10, 2024
aed570f
lint
romgrk Feb 10, 2024
169c302
fix: style
romgrk Feb 10, 2024
db15000
lint
romgrk Feb 13, 2024
b98f6e4
lint
romgrk Feb 19, 2024
a6d0251
Merge branch 'next' into perf-dom-changes
cherniavskii Feb 19, 2024
97b6101
docs:api
cherniavskii Feb 19, 2024
250de3c
doc: vertical centering
romgrk Feb 19, 2024
3fbffc2
Merge branch 'perf-dom-changes' of github.com:romgrk/mui-x into perf-…
romgrk Feb 19, 2024
37e88da
lint
romgrk Feb 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/data/data-grid/aggregation/AggregationRenderCell.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const COLUMNS = [
type: 'number',
width: 180,
availableAggregationFunctions: ['min', 'max', 'avg', 'size'],
display: 'flex',
// Imdb rating is on a scale from 0 to 10, the MUI rating component is on a scale from 0 to 5
renderCell: (params) => {
if (params.aggregation && !params.aggregation.hasCellUnit) {
Expand Down
1 change: 1 addition & 0 deletions docs/data/data-grid/aggregation/AggregationRenderCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const COLUMNS: GridColDef[] = [
type: 'number',
width: 180,
availableAggregationFunctions: ['min', 'max', 'avg', 'size'],
display: 'flex',
// Imdb rating is on a scale from 0 to 10, the MUI rating component is on a scale from 0 to 5
renderCell: (params) => {
if (params.aggregation && !params.aggregation.hasCellUnit) {
Expand Down
7 changes: 6 additions & 1 deletion docs/data/data-grid/column-dimensions/ColumnAutosizing.js
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the vertical centering is gone:

Can we keep it by default?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, I couldn't find a way to preserve that while satisfying the other constraints. CSS doesn't do vertical centering well unless it's in flex/grid mode. Vertical padding would mess up the space available, and the trick for text cells was to set the line-height to height (copied from ag-grid).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the trick for text cells was to set the line-height to height

In the linked demos, the cells impacted are text cells.
Should we add display: 'flex' then?
Also, could you mention this change in the migration guide?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, that's the one case I couldn't make work, but as I mention above, I don't feel it's necessarily wrong. Trying to fix it would introduce too much magic imho, so I'd leave that change as it is.

I've added a note to the guide.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And for the demo in particular, I also wouldn't add display: 'flex' because I'd rather demo the default behavior.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright, thanks for the clarification.

Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,12 @@ function useData(length) {
{ field: 'id', headerName: 'Brand ID' },
{ field: 'brand', headerName: 'Brand name' },
{ field: 'rep', headerName: 'Representative' },
{ field: 'rating', headerName: 'Rating', renderCell: renderRating },
{
field: 'rating',
headerName: 'Rating',
renderCell: renderRating,
display: 'flex',
},
];

return { rows, columns };
Expand Down
7 changes: 6 additions & 1 deletion docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,12 @@ function useData(length: number) {
{ field: 'id', headerName: 'Brand ID' },
{ field: 'brand', headerName: 'Brand name' },
{ field: 'rep', headerName: 'Representative' },
{ field: 'rating', headerName: 'Rating', renderCell: renderRating },
{
field: 'rating',
headerName: 'Rating',
renderCell: renderRating,
display: 'flex' as const,
},
];

return { rows, columns };
Expand Down
7 changes: 6 additions & 1 deletion docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,12 @@ const columns = [
{ field: 'id', headerName: 'Brand ID' },
{ field: 'brand', headerName: 'Brand name' },
{ field: 'rep', headerName: 'Representative' },
{ field: 'rating', headerName: 'Rating', renderCell: renderRating },
{
field: 'rating',
headerName: 'Rating',
renderCell: renderRating,
display: 'flex',
},
];

function renderRating(params) {
Expand Down
11 changes: 8 additions & 3 deletions docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Button from '@mui/material/Button';
import Rating from '@mui/material/Rating';
import Stack from '@mui/material/Stack';
import { useGridApiRef } from '@mui/x-data-grid';
import { DataGridPro, GridApiPro } from '@mui/x-data-grid-pro';
import { DataGridPro, GridApiPro, GridColDef } from '@mui/x-data-grid-pro';
import {
randomInt,
randomRating,
Expand All @@ -12,11 +12,16 @@ import {
import * as ReactDOM from 'react-dom';
import { GridData } from 'docsx/data/data-grid/virtualization/ColumnVirtualizationGrid';

const columns = [
const columns: GridColDef[] = [
{ field: 'id', headerName: 'Brand ID' },
{ field: 'brand', headerName: 'Brand name' },
{ field: 'rep', headerName: 'Representative' },
{ field: 'rating', headerName: 'Rating', renderCell: renderRating },
{
field: 'rating',
headerName: 'Rating',
renderCell: renderRating,
display: 'flex',
},
];

function renderRating(params: any) {
Expand Down
1 change: 1 addition & 0 deletions docs/data/data-grid/custom-columns/SparklineColumn.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const sparklineColumnType = {
sortable: false,
editable: false,
groupable: false,
display: 'flex',
renderCell: (params) => <GridSparklineCell {...params} />,
};

Expand Down
1 change: 1 addition & 0 deletions docs/data/data-grid/custom-columns/SparklineColumn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const sparklineColumnType: GridColTypeDef<number[]> = {
sortable: false,
editable: false,
groupable: false,
display: 'flex',
renderCell: (params) => <GridSparklineCell {...params} />,
};

Expand Down
2 changes: 2 additions & 0 deletions docs/data/data-grid/demo/PopularFeaturesDemo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,6 +368,7 @@ const columns = [
flex: 0.2,
minWidth: 100,
groupable: false,
display: 'flex',
renderCell: (params) => {
if (params.aggregation) {
return <CustomSizeAggregationFooter value={params.formattedValue} />;
Expand Down Expand Up @@ -430,6 +431,7 @@ const columns = [
flex: 0.3,
type: 'singleSelect',
valueOptions: ['Premium', 'Pro', 'Community'],
display: 'flex',
renderCell: (params) => {
if (params.aggregation) {
return <CustomSizeAggregationFooter value={params.formattedValue} />;
Expand Down
2 changes: 2 additions & 0 deletions docs/data/data-grid/demo/PopularFeaturesDemo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -383,6 +383,7 @@ const columns: GridColDef[] = [
flex: 0.2,
minWidth: 100,
groupable: false,
display: 'flex',
renderCell: (params) => {
if (params.aggregation) {
return <CustomSizeAggregationFooter value={params.formattedValue} />;
Expand Down Expand Up @@ -445,6 +446,7 @@ const columns: GridColDef[] = [
flex: 0.3,
type: 'singleSelect',
valueOptions: ['Premium', 'Pro', 'Community'],
display: 'flex',
renderCell: (params: GridRenderCellParams<any, string>) => {
if (params.aggregation) {
return <CustomSizeAggregationFooter value={params.formattedValue} />;
Expand Down
1 change: 1 addition & 0 deletions docs/data/data-grid/editing/CustomEditComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ const columns = [
{
field: 'rating',
headerName: 'Rating',
display: 'flex',
renderCell: renderRating,
renderEditCell: renderRatingEditInputCell,
editable: true,
Expand Down
1 change: 1 addition & 0 deletions docs/data/data-grid/editing/CustomEditComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ const columns: GridColDef[] = [
{
field: 'rating',
headerName: 'Rating',
display: 'flex',
renderCell: renderRating,
renderEditCell: renderRatingEditInputCell,
editable: true,
Expand Down
5 changes: 4 additions & 1 deletion docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ As a result, the following changes have been made:
- The main element now corresponds to the virtal scroller element.
- Headers are now contained in the virtual scroller.
- Pinned row and column sections are now contained in the virtual scroller.
- The cell inner wrapper `.MuiDataGrid-cellContent` has been removed.

<!-- ### Renamed props

Expand Down Expand Up @@ -460,10 +461,12 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access)
}
```

### CSS classes
### CSS classes and styling

- You can now style a row's hover state using just `:hover` instead of `.Mui-hovered`.
- The `.MuiDataGrid--pinnedColumns-(left\|right)` class for pinned columns has been removed.
- The `.MuiDataGrid-cell--withRenderer` class has been removed.
- The cell element isn't `display: flex` by default. You can use `cellClassName: gridClasses['cell--flex']` to restore the behavior.
romgrk marked this conversation as resolved.
Show resolved Hide resolved

### Changes to the public API

Expand Down
42 changes: 30 additions & 12 deletions docs/pages/x/api/data-grid/data-grid-premium.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -686,6 +686,12 @@
"description": "Styles applied to the cell element if the cell is in edit mode.",
"isGlobal": false
},
{
"key": "cell--flex",
"className": "MuiDataGridPremium-cell--flex",
"description": "Styles applied to the cell element in flex display mode.",
"isGlobal": false
},
{
"key": "cell--pinnedLeft",
"className": "MuiDataGridPremium-cell--pinnedLeft",
Expand Down Expand Up @@ -752,12 +758,6 @@
"description": "Styles applied the cell if `showColumnVerticalBorder={true}`.",
"isGlobal": false
},
{
"key": "cell--withRenderer",
"className": "MuiDataGridPremium-cell--withRenderer",
"description": "Styles applied to the cell element if the cell has a custom renderer.",
"isGlobal": false
},
{
"key": "cell--withRightBorder",
"className": "MuiDataGridPremium-cell--withRightBorder",
Expand All @@ -770,12 +770,6 @@
"description": "Styles applied to the cell checkbox element.",
"isGlobal": false
},
{
"key": "cellContent",
"className": "MuiDataGridPremium-cellContent",
"description": "Styles applied to the element that wraps the cell content.",
"isGlobal": false
},
{
"key": "cellEmpty",
"className": "MuiDataGridPremium-cellEmpty",
Expand Down Expand Up @@ -1436,6 +1430,30 @@
"description": "Styles applied to the horizontal scrollbar.",
"isGlobal": false
},
{
"key": "scrollbarFiller",
"className": "MuiDataGridPremium-scrollbarFiller",
"description": "",
"isGlobal": false
},
{
"key": "scrollbarFiller--borderTop",
"className": "MuiDataGridPremium-scrollbarFiller--borderTop",
"description": "",
"isGlobal": false
},
{
"key": "scrollbarFiller--header",
"className": "MuiDataGridPremium-scrollbarFiller--header",
"description": "",
"isGlobal": false
},
{
"key": "scrollbarFiller--pinnedRight",
"className": "MuiDataGridPremium-scrollbarFiller--pinnedRight",
"description": "",
"isGlobal": false
},
{
"key": "selectedRowCount",
"className": "MuiDataGridPremium-selectedRowCount",
Expand Down
42 changes: 30 additions & 12 deletions docs/pages/x/api/data-grid/data-grid-pro.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -625,6 +625,12 @@
"description": "Styles applied to the cell element if the cell is in edit mode.",
"isGlobal": false
},
{
"key": "cell--flex",
"className": "MuiDataGridPro-cell--flex",
"description": "Styles applied to the cell element in flex display mode.",
"isGlobal": false
},
{
"key": "cell--pinnedLeft",
"className": "MuiDataGridPro-cell--pinnedLeft",
Expand Down Expand Up @@ -691,12 +697,6 @@
"description": "Styles applied the cell if `showColumnVerticalBorder={true}`.",
"isGlobal": false
},
{
"key": "cell--withRenderer",
"className": "MuiDataGridPro-cell--withRenderer",
"description": "Styles applied to the cell element if the cell has a custom renderer.",
"isGlobal": false
},
{
"key": "cell--withRightBorder",
"className": "MuiDataGridPro-cell--withRightBorder",
Expand All @@ -709,12 +709,6 @@
"description": "Styles applied to the cell checkbox element.",
"isGlobal": false
},
{
"key": "cellContent",
"className": "MuiDataGridPro-cellContent",
"description": "Styles applied to the element that wraps the cell content.",
"isGlobal": false
},
{
"key": "cellEmpty",
"className": "MuiDataGridPro-cellEmpty",
Expand Down Expand Up @@ -1375,6 +1369,30 @@
"description": "Styles applied to the horizontal scrollbar.",
"isGlobal": false
},
{
"key": "scrollbarFiller",
cherniavskii marked this conversation as resolved.
Show resolved Hide resolved
"className": "MuiDataGridPro-scrollbarFiller",
"description": "",
"isGlobal": false
},
{
"key": "scrollbarFiller--borderTop",
"className": "MuiDataGridPro-scrollbarFiller--borderTop",
"description": "",
"isGlobal": false
},
{
"key": "scrollbarFiller--header",
"className": "MuiDataGridPro-scrollbarFiller--header",
"description": "",
"isGlobal": false
},
{
"key": "scrollbarFiller--pinnedRight",
"className": "MuiDataGridPro-scrollbarFiller--pinnedRight",
"description": "",
"isGlobal": false
},
{
"key": "selectedRowCount",
"className": "MuiDataGridPro-selectedRowCount",
Expand Down
42 changes: 30 additions & 12 deletions docs/pages/x/api/data-grid/data-grid.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -510,6 +510,12 @@
"description": "Styles applied to the cell element if the cell is in edit mode.",
"isGlobal": false
},
{
"key": "cell--flex",
"className": "MuiDataGrid-cell--flex",
"description": "Styles applied to the cell element in flex display mode.",
"isGlobal": false
},
{
"key": "cell--pinnedLeft",
"className": "MuiDataGrid-cell--pinnedLeft",
Expand Down Expand Up @@ -576,12 +582,6 @@
"description": "Styles applied the cell if `showColumnVerticalBorder={true}`.",
"isGlobal": false
},
{
"key": "cell--withRenderer",
"className": "MuiDataGrid-cell--withRenderer",
"description": "Styles applied to the cell element if the cell has a custom renderer.",
"isGlobal": false
},
{
"key": "cell--withRightBorder",
"className": "MuiDataGrid-cell--withRightBorder",
Expand All @@ -594,12 +594,6 @@
"description": "Styles applied to the cell checkbox element.",
"isGlobal": false
},
{
"key": "cellContent",
"className": "MuiDataGrid-cellContent",
"description": "Styles applied to the element that wraps the cell content.",
"isGlobal": false
},
{
"key": "cellEmpty",
"className": "MuiDataGrid-cellEmpty",
Expand Down Expand Up @@ -1260,6 +1254,30 @@
"description": "Styles applied to the horizontal scrollbar.",
"isGlobal": false
},
{
"key": "scrollbarFiller",
"className": "MuiDataGrid-scrollbarFiller",
"description": "",
"isGlobal": false
},
{
"key": "scrollbarFiller--borderTop",
"className": "MuiDataGrid-scrollbarFiller--borderTop",
"description": "",
"isGlobal": false
},
{
"key": "scrollbarFiller--header",
"className": "MuiDataGrid-scrollbarFiller--header",
"description": "",
"isGlobal": false
},
{
"key": "scrollbarFiller--pinnedRight",
"className": "MuiDataGrid-scrollbarFiller--pinnedRight",
"description": "",
"isGlobal": false
},
{
"key": "selectedRowCount",
"className": "MuiDataGrid-selectedRowCount",
Expand Down
1 change: 1 addition & 0 deletions docs/pages/x/api/data-grid/grid-actions-col-def.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import { GridActionsColDef } from '@mui/x-data-grid';
| <span class="prop-name optional">disableColumnMenu<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span> | <span class="prop-default">false</span> | If `true`, the column menu is disabled for this column. |
| <span class="prop-name optional">disableExport<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span> | <span class="prop-default">false</span> | If `true`, this column will not be included in exports. |
| <span class="prop-name optional">disableReorder<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span> | <span class="prop-default">false</span> | If `true`, this column cannot be reordered. |
| <span class="prop-name optional">display<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">'text' \| 'flex'</span> | | Display mode for the cell:<br /> - 'text': For text-based cells (default)<br /> - 'flex': For cells with HTMLElement children |
| <span class="prop-name optional">editable<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span> | <span class="prop-default">false</span> | If `true`, the cells of the column are editable. |
| <span class="prop-name">field</span> | <span class="prop-type">string</span> | | The column identifier. It's used to map with GridRowModel values. |
| <span class="prop-name optional">filterable<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span> | <span class="prop-default">true</span> | If `true`, the column is filterable. |
Expand Down
Loading
Loading