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

Jump to bottom

[data grid] Performance: DOM changes #12013

Merged
merged 21 commits into from
Feb 22, 2024
Merged

[data grid] Performance: DOM changes #12013

Show file tree
Hide file tree
Changes from all 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
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 add `display: 'flex'` on the column definition to restore the behavior. This also means cells aren't vertically centered by default anymore, so if you have dynamic row height, you might want to set the `display: 'flex'` for all non-dynamic columns.

### Changes to the public API

Expand Down
18 changes: 6 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 @@ -679,6 +679,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 @@ -745,12 +751,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 @@ -763,12 +763,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
18 changes: 6 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 @@ -618,6 +618,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 @@ -684,12 +690,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 @@ -702,12 +702,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
18 changes: 6 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 @@ -503,6 +503,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 @@ -569,12 +575,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 @@ -587,12 +587,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
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
1 change: 1 addition & 0 deletions docs/pages/x/api/data-grid/grid-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 { GridColDef } 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