[data grid] Performance: DOM changes (#12013)

Signed-off-by: Rom Grk <romgrk@users.noreply.github.com> Co-authored-by: Olivier Tassinari <olivier.tassinari@gmail.com> Co-authored-by: Andrew Cherniavskyi <andrew@mui.com>
mui · Feb 22, 2024 · d9ac050 · d9ac050
1 parent 8e90e7d
commit d9ac050
Show file tree

Hide file tree

Showing 34 changed files with 193 additions and 135 deletions.
diff --git a/docs/data/data-grid/aggregation/AggregationRenderCell.js b/docs/data/data-grid/aggregation/AggregationRenderCell.js
@@ -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) {

diff --git a/docs/data/data-grid/aggregation/AggregationRenderCell.tsx b/docs/data/data-grid/aggregation/AggregationRenderCell.tsx
@@ -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) {

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizing.js b/docs/data/data-grid/column-dimensions/ColumnAutosizing.js
@@ -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 };

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx b/docs/data/data-grid/column-dimensions/ColumnAutosizing.tsx
@@ -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 };

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.js
@@ -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) {

diff --git a/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx b/docs/data/data-grid/column-dimensions/ColumnAutosizingAsync.tsx
@@ -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,
@@ -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) {

diff --git a/docs/data/data-grid/custom-columns/SparklineColumn.js b/docs/data/data-grid/custom-columns/SparklineColumn.js
@@ -24,6 +24,7 @@ const sparklineColumnType = {
  sortable: false,
  editable: false,
  groupable: false,
+ display: 'flex',
  renderCell: (params) => <GridSparklineCell {...params} />,
 };
 

diff --git a/docs/data/data-grid/custom-columns/SparklineColumn.tsx b/docs/data/data-grid/custom-columns/SparklineColumn.tsx
@@ -36,6 +36,7 @@ const sparklineColumnType: GridColTypeDef<number[]> = {
  sortable: false,
  editable: false,
  groupable: false,
+ display: 'flex',
  renderCell: (params) => <GridSparklineCell {...params} />,
 };
 

diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.js b/docs/data/data-grid/demo/PopularFeaturesDemo.js
@@ -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} />;
@@ -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} />;

diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx
@@ -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} />;
@@ -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} />;

diff --git a/docs/data/data-grid/editing/CustomEditComponent.js b/docs/data/data-grid/editing/CustomEditComponent.js
@@ -58,6 +58,7 @@ const columns = [
  {
  field: 'rating',
  headerName: 'Rating',
+ display: 'flex',
  renderCell: renderRating,
  renderEditCell: renderRatingEditInputCell,
  editable: true,

diff --git a/docs/data/data-grid/editing/CustomEditComponent.tsx b/docs/data/data-grid/editing/CustomEditComponent.tsx
@@ -65,6 +65,7 @@ const columns: GridColDef[] = [
  {
  field: 'rating',
  headerName: 'Rating',
+ display: 'flex',
  renderCell: renderRating,
  renderEditCell: renderRatingEditInputCell,
  editable: true,

diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md
@@ -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
 
@@ -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
 

diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -1113,6 +1113,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",
@@ -1179,12 +1185,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",
@@ -1197,12 +1197,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",

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -1034,6 +1034,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",
@@ -1100,12 +1106,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",
@@ -1118,12 +1118,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",

diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -895,6 +895,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",
@@ -961,12 +967,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",
@@ -979,12 +979,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",

diff --git a/docs/pages/x/api/data-grid/grid-actions-col-def.md b/docs/pages/x/api/data-grid/grid-actions-col-def.md
@@ -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. |

diff --git a/docs/pages/x/api/data-grid/grid-col-def.md b/docs/pages/x/api/data-grid/grid-col-def.md
@@ -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. |