From d9ac050aea0b9a03a959a67e6a71c923d5562351 Mon Sep 17 00:00:00 2001
From: Rom Grk <romgrk@users.noreply.github.com>
Date: Thu, 22 Feb 2024 04:39:36 -0500
Subject: [PATCH] [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>
---
 .../aggregation/AggregationRenderCell.js      |  1 +
 .../aggregation/AggregationRenderCell.tsx     |  1 +
 .../column-dimensions/ColumnAutosizing.js     |  7 ++-
 .../column-dimensions/ColumnAutosizing.tsx    |  7 ++-
 .../ColumnAutosizingAsync.js                  |  7 ++-
 .../ColumnAutosizingAsync.tsx                 | 11 +++-
 .../custom-columns/SparklineColumn.js         |  1 +
 .../custom-columns/SparklineColumn.tsx        |  1 +
 .../data-grid/demo/PopularFeaturesDemo.js     |  2 +
 .../data-grid/demo/PopularFeaturesDemo.tsx    |  2 +
 .../data-grid/editing/CustomEditComponent.js  |  1 +
 .../data-grid/editing/CustomEditComponent.tsx |  1 +
 .../migration-data-grid-v6.md                 |  5 +-
 .../x/api/data-grid/data-grid-premium.json    | 18 ++----
 docs/pages/x/api/data-grid/data-grid-pro.json | 18 ++----
 docs/pages/x/api/data-grid/data-grid.json     | 18 ++----
 .../x/api/data-grid/grid-actions-col-def.md   |  1 +
 docs/pages/x/api/data-grid/grid-col-def.md    |  1 +
 .../data-grid/grid-single-select-col-def.md   |  1 +
 .../data-grid-premium/data-grid-premium.json  | 13 ++--
 .../data-grid-pro/data-grid-pro.json          | 13 ++--
 .../data-grid/data-grid/data-grid.json        | 13 ++--
 .../src/columns/employees.columns.tsx         |  2 +
 .../src/renderer/renderProgress.tsx           | 18 ++++--
 .../columnResize/useGridColumnResize.tsx      |  5 +-
 .../src/tests/rowReorder.DataGridPro.test.tsx |  2 +-
 .../src/colDef/gridActionsColDef.tsx          |  1 +
 .../src/colDef/gridBooleanColDef.tsx          |  1 +
 .../colDef/gridCheckboxSelectionColDef.tsx    |  1 +
 .../components/GridScrollbarFillerCell.tsx    | 28 ++-------
 .../src/components/cell/GridCell.tsx          | 21 ++++---
 .../components/containers/GridRootStyles.ts   | 61 ++++++++++++++-----
 .../x-data-grid/src/constants/gridClasses.ts  | 39 +++++++++---
 .../src/models/colDef/gridColDef.ts           |  6 ++
 34 files changed, 193 insertions(+), 135 deletions(-)

diff --git a/docs/data/data-grid/aggregation/AggregationRenderCell.js b/docs/data/data-grid/aggregation/AggregationRenderCell.js
index 4f034261d423..1bf1c1bcc7b3 100644
--- 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
index 11f653668ba1..a0de64c3ee69 100644
--- 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
index 030c4d0534d9..3d46d27bbd9b 100644
--- 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
index 5f813676e7ee..841b6642113d 100644
--- 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
index 01490fbfceb2..b030e5f9c060 100644
--- 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
index 2140a5e5ae3b..d5a7cee379fb 100644
--- 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
index 3b6eb6b9016b..f2a38c1813cf 100644
--- 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
index b643d30d037d..cf646189b49f 100644
--- 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
index b30a71abeae7..3da89e7e926b 100644
--- 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
index 982e81055f7e..89912c4f12c4 100644
--- 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
index d5d5cd3596fd..bdacf3318440 100644
--- 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
index 63d036378717..d0fb1bde9c10 100644
--- 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
index e9077aa350d6..3ce5734605a1 100644
--- 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
index f9b71100e1c7..f6aab9649ea0 100644
--- 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
index d3e6c4e37e68..0ae775c41b77 100644
--- 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
index 2f5350870511..6daecb51bd8a 100644
--- 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
index 81fa4a45606a..3b414f0fddc2 100644
--- 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
index bee228483b21..23d345f3022e 100644
--- 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.                                                                                                                               |
diff --git a/docs/pages/x/api/data-grid/grid-single-select-col-def.md b/docs/pages/x/api/data-grid/grid-single-select-col-def.md
index 5a20d68d5cdb..dbfc1609b4f2 100644
--- a/docs/pages/x/api/data-grid/grid-single-select-col-def.md
+++ b/docs/pages/x/api/data-grid/grid-single-select-col-def.md
@@ -34,6 +34,7 @@ import { GridSingleSelectColDef } 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/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
index bab3316bffb2..c7931fb45627 100644
--- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
+++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
@@ -682,6 +682,10 @@
       "nodeName": "the cell element",
       "conditions": "the cell is in edit mode"
     },
+    "cell--flex": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the cell element in flex display mode"
+    },
     "cell--pinnedLeft": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the cell element",
@@ -735,11 +739,6 @@
     "cell--withLeftBorder": {
       "description": "Styles applied the cell if <code>showColumnVerticalBorder={true}</code>."
     },
-    "cell--withRenderer": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the cell element",
-      "conditions": "the cell has a custom renderer"
-    },
     "cell--withRightBorder": {
       "description": "Styles applied the cell if <code>showColumnVerticalBorder={true}</code>."
     },
@@ -747,10 +746,6 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the cell checkbox element"
     },
-    "cellContent": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the element that wraps the cell content"
-    },
     "cellEmpty": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the empty cell element"
diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
index 8597b34ba271..7e08ead8fa2d 100644
--- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
+++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
@@ -624,6 +624,10 @@
       "nodeName": "the cell element",
       "conditions": "the cell is in edit mode"
     },
+    "cell--flex": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the cell element in flex display mode"
+    },
     "cell--pinnedLeft": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the cell element",
@@ -677,11 +681,6 @@
     "cell--withLeftBorder": {
       "description": "Styles applied the cell if <code>showColumnVerticalBorder={true}</code>."
     },
-    "cell--withRenderer": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the cell element",
-      "conditions": "the cell has a custom renderer"
-    },
     "cell--withRightBorder": {
       "description": "Styles applied the cell if <code>showColumnVerticalBorder={true}</code>."
     },
@@ -689,10 +688,6 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the cell checkbox element"
     },
-    "cellContent": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the element that wraps the cell content"
-    },
     "cellEmpty": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the empty cell element"
diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
index 1bae2ca5a264..a805b4dea7ea 100644
--- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json
+++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
@@ -490,6 +490,10 @@
       "nodeName": "the cell element",
       "conditions": "the cell is in edit mode"
     },
+    "cell--flex": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the cell element in flex display mode"
+    },
     "cell--pinnedLeft": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the cell element",
@@ -543,11 +547,6 @@
     "cell--withLeftBorder": {
       "description": "Styles applied the cell if <code>showColumnVerticalBorder={true}</code>."
     },
-    "cell--withRenderer": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the cell element",
-      "conditions": "the cell has a custom renderer"
-    },
     "cell--withRightBorder": {
       "description": "Styles applied the cell if <code>showColumnVerticalBorder={true}</code>."
     },
@@ -555,10 +554,6 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the cell checkbox element"
     },
-    "cellContent": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the element that wraps the cell content"
-    },
     "cellEmpty": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the empty cell element"
diff --git a/packages/x-data-grid-generator/src/columns/employees.columns.tsx b/packages/x-data-grid-generator/src/columns/employees.columns.tsx
index 7a448ca9e007..1f4ea311b299 100644
--- a/packages/x-data-grid-generator/src/columns/employees.columns.tsx
+++ b/packages/x-data-grid-generator/src/columns/employees.columns.tsx
@@ -39,6 +39,7 @@ export const getEmployeeColumns = (): GridColDefGenerator[] => [
     field: 'avatar',
     headerName: 'Avatar',
     generateData: randomColor,
+    display: 'flex',
     renderCell: renderAvatar,
     valueGetter: (value, row) =>
       row.name == null || row.avatar == null ? null : { name: row.name, color: row.avatar },
@@ -72,6 +73,7 @@ export const getEmployeeColumns = (): GridColDefGenerator[] => [
     field: 'rating',
     headerName: 'Rating',
     generateData: randomRating,
+    display: 'flex',
     renderCell: renderRating,
     renderEditCell: renderEditRating,
     width: 180,
diff --git a/packages/x-data-grid-generator/src/renderer/renderProgress.tsx b/packages/x-data-grid-generator/src/renderer/renderProgress.tsx
index 5721af1ffdd0..bd293ed683c4 100644
--- a/packages/x-data-grid-generator/src/renderer/renderProgress.tsx
+++ b/packages/x-data-grid-generator/src/renderer/renderProgress.tsx
@@ -7,7 +7,13 @@ interface ProgressBarProps {
   value: number;
 }
 
-const Root = styled('div')(({ theme }) => ({
+const Center = styled('div')({
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const Element = styled('div')(({ theme }) => ({
   border: `1px solid ${(theme.vars || theme).palette.divider}`,
   position: 'relative',
   overflow: 'hidden',
@@ -42,7 +48,7 @@ const ProgressBar = React.memo(function ProgressBar(props: ProgressBarProps) {
   const valueInPercent = value * 100;
 
   return (
-    <Root>
+    <Element>
       <Value>{`${valueInPercent.toLocaleString()} %`}</Value>
       <Bar
         className={clsx({
@@ -52,7 +58,7 @@ const ProgressBar = React.memo(function ProgressBar(props: ProgressBarProps) {
         })}
         style={{ maxWidth: `${valueInPercent}%` }}
       />
-    </Root>
+    </Element>
   );
 });
 
@@ -67,5 +73,9 @@ export function renderProgress(params: GridRenderCellParams<any, number, any>) {
     return null;
   }
 
-  return <ProgressBar value={params.value} />;
+  return (
+    <Center>
+      <ProgressBar value={params.value} />
+    </Center>
+  );
 }
diff --git a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx
index eb0f0835cf81..fd09a1fcdcad 100644
--- a/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx
+++ b/packages/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx
@@ -214,10 +214,7 @@ function extractColumnWidths(
     const cells = findGridCells(apiRef.current, column.field);
 
     const widths = cells.map((cell) => {
-      const style = window.getComputedStyle(cell, null);
-      const paddingWidth = parseInt(style.paddingLeft, 10) + parseInt(style.paddingRight, 10);
-      const contentWidth = cell.firstElementChild?.getBoundingClientRect().width ?? 0;
-      return paddingWidth + contentWidth;
+      return cell.getBoundingClientRect().width ?? 0;
     });
 
     const filteredWidths = options.includeOutliers
diff --git a/packages/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx
index 3c56a545f6d0..481f269486ca 100644
--- a/packages/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx
+++ b/packages/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx
@@ -85,7 +85,7 @@ describe('<DataGridPro /> - Row reorder', () => {
 
     render(<Test />);
     expect(getRowsFieldContent('brand')).to.deep.equal(['Nike', 'Adidas', 'Puma']);
-    const rowReorderCell = getCell(0, 0).firstChild!;
+    const rowReorderCell = getCell(0, 0)!;
     fireEvent.dragStart(rowReorderCell);
     expect(rowReorderCell).not.to.have.class(gridClasses['row--dragging']);
   });
diff --git a/packages/x-data-grid/src/colDef/gridActionsColDef.tsx b/packages/x-data-grid/src/colDef/gridActionsColDef.tsx
index 5c27a57a0458..1a781ed893da 100644
--- a/packages/x-data-grid/src/colDef/gridActionsColDef.tsx
+++ b/packages/x-data-grid/src/colDef/gridActionsColDef.tsx
@@ -11,6 +11,7 @@ export const GRID_ACTIONS_COL_DEF: GridColTypeDef = {
   // @ts-ignore
   aggregable: false,
   width: 100,
+  display: 'flex',
   align: 'center',
   headerAlign: 'center',
   headerName: '',
diff --git a/packages/x-data-grid/src/colDef/gridBooleanColDef.tsx b/packages/x-data-grid/src/colDef/gridBooleanColDef.tsx
index a032fc6451d9..bc82a299f29c 100644
--- a/packages/x-data-grid/src/colDef/gridBooleanColDef.tsx
+++ b/packages/x-data-grid/src/colDef/gridBooleanColDef.tsx
@@ -33,6 +33,7 @@ const stringToBoolean = (value: string) => {
 export const GRID_BOOLEAN_COL_DEF: GridColTypeDef<boolean | null, any> = {
   ...GRID_STRING_COL_DEF,
   type: 'boolean',
+  display: 'flex',
   align: 'center',
   headerAlign: 'center',
   renderCell: renderBooleanCell,
diff --git a/packages/x-data-grid/src/colDef/gridCheckboxSelectionColDef.tsx b/packages/x-data-grid/src/colDef/gridCheckboxSelectionColDef.tsx
index 69ab4c9a5e34..85305b10a3e6 100644
--- a/packages/x-data-grid/src/colDef/gridCheckboxSelectionColDef.tsx
+++ b/packages/x-data-grid/src/colDef/gridCheckboxSelectionColDef.tsx
@@ -21,6 +21,7 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF: GridColDef = {
   disableReorder: true,
   disableExport: true,
   getApplyQuickFilterFn: undefined,
+  display: 'flex',
   valueGetter: (value, row, column, apiRef) => {
     const selectionLookup = selectedIdsLookupSelector(apiRef);
     const rowId = apiRef.current.getRowId(row);
diff --git a/packages/x-data-grid/src/components/GridScrollbarFillerCell.tsx b/packages/x-data-grid/src/components/GridScrollbarFillerCell.tsx
index 188a9d78c13b..fc2fd61381ad 100644
--- a/packages/x-data-grid/src/components/GridScrollbarFillerCell.tsx
+++ b/packages/x-data-grid/src/components/GridScrollbarFillerCell.tsx
@@ -1,30 +1,14 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { styled } from '@mui/material/styles';
-import { getDataGridUtilityClass as getClassName } from '../constants';
+import { gridClasses } from '../constants';
 
 const classes = {
-  root: getClassName('scrollbarFiller'),
-  header: getClassName('scrollbarFiller--header'),
-  borderTop: getClassName('scrollbarFiller--borderTop'),
-  pinnedRight: getClassName('scrollbarFiller--pinnedRight'),
+  root: gridClasses.scrollbarFiller,
+  header: gridClasses['scrollbarFiller--header'],
+  borderTop: gridClasses['scrollbarFiller--borderTop'],
+  pinnedRight: gridClasses['scrollbarFiller--pinnedRight'],
 };
 
-const Style = styled('div')({
-  minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
-  alignSelf: 'stretch',
-  [`&.${classes.borderTop}`]: {
-    borderTop: '1px solid var(--DataGrid-rowBorderColor)',
-  },
-  [`&.${classes.pinnedRight}`]: {
-    backgroundColor: 'var(--DataGrid-pinnedBackground)',
-  },
-  [`&.${classes.pinnedRight}:not(.${classes.header})`]: {
-    position: 'sticky',
-    right: 0,
-  },
-});
-
 function GridScrollbarFillerCell({
   header,
   borderTop = true,
@@ -35,7 +19,7 @@ function GridScrollbarFillerCell({
   pinnedRight?: boolean;
 }) {
   return (
-    <Style
+    <div
       role="presentation"
       className={clsx(
         classes.root,
diff --git a/packages/x-data-grid/src/components/cell/GridCell.tsx b/packages/x-data-grid/src/components/cell/GridCell.tsx
index 4bc9900993da..1746c60284c9 100644
--- a/packages/x-data-grid/src/components/cell/GridCell.tsx
+++ b/packages/x-data-grid/src/components/cell/GridCell.tsx
@@ -127,7 +127,6 @@ const useUtilityClasses = (ownerState: OwnerState) => {
       pinnedPosition === PinnedPosition.RIGHT && 'cell--pinnedRight',
       isSelectionMode && !isEditable && 'cell--selectionMode',
     ],
-    content: ['cellContent'],
   };
 
   return composeClasses(slots, getDataGridUtilityClass, classes);
@@ -231,6 +230,10 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>((props, ref) =>
     );
   }
 
+  if (column.display === 'flex') {
+    classNames.push(gridClasses['cell--flex']);
+  }
+
   if (getCellClassName) {
     classNames.push(getCellClassName(cellParamsWithAPI));
   }
@@ -387,13 +390,13 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>((props, ref) =>
   }
 
   let children: React.ReactNode;
-  if (editCellState == null && column.renderCell) {
+  let title: string | undefined;
+
+  if (editCellState === null && column.renderCell) {
     children = column.renderCell(cellParamsWithAPI);
-    classNames.push(gridClasses['cell--withRenderer']);
-    classNames.push(rootClasses?.['cell--withRenderer']);
   }
 
-  if (editCellState != null && column.renderEditCell) {
+  if (editCellState !== null && column.renderEditCell) {
     const updatedRow = apiRef.current.getRowWithUpdatedValues(rowId, column.field);
 
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -412,11 +415,8 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>((props, ref) =>
 
   if (children === undefined) {
     const valueString = valueToRender?.toString();
-    children = (
-      <div className={classes.content} title={valueString} role="presentation">
-        {valueString}
-      </div>
-    );
+    children = valueString;
+    title = valueString;
   }
 
   if (React.isValidElement(children) && canManageOwnFocus) {
@@ -440,6 +440,7 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>((props, ref) =>
       aria-colindex={colIndex + 1}
       aria-colspan={colSpan}
       style={style}
+      title={title}
       tabIndex={tabIndex}
       onClick={publish('cellClick', onClick)}
       onDoubleClick={publish('cellDoubleClick', onDoubleClick)}
diff --git a/packages/x-data-grid/src/components/containers/GridRootStyles.ts b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
index 85092f1f174d..9d27ab64cc29 100644
--- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -65,19 +65,16 @@ export const GridRootStyles = styled('div', {
     },
     { [`&.${c.autosizing}`]: styles.autosizing },
     { [`& .${c.editBooleanCell}`]: styles.editBooleanCell },
+    { [`& .${c.cell}`]: styles.cell },
     { [`& .${c['cell--editing']}`]: styles['cell--editing'] },
     { [`& .${c['cell--textCenter']}`]: styles['cell--textCenter'] },
     { [`& .${c['cell--textLeft']}`]: styles['cell--textLeft'] },
     { [`& .${c['cell--textRight']}`]: styles['cell--textRight'] },
-    // TODO v6: Remove
-    { [`& .${c['cell--withRenderer']}`]: styles['cell--withRenderer'] },
-    { [`& .${c.cell}`]: styles.cell },
     { [`& .${c['cell--rangeTop']}`]: styles['cell--rangeTop'] },
     { [`& .${c['cell--rangeBottom']}`]: styles['cell--rangeBottom'] },
     { [`& .${c['cell--rangeLeft']}`]: styles['cell--rangeLeft'] },
     { [`& .${c['cell--rangeRight']}`]: styles['cell--rangeRight'] },
     { [`& .${c['cell--withRightBorder']}`]: styles['cell--withRightBorder'] },
-    { [`& .${c.cellContent}`]: styles.cellContent },
     { [`& .${c.cellCheckbox}`]: styles.cellCheckbox },
     { [`& .${c.cellSkeleton}`]: styles.cellSkeleton },
     { [`& .${c.checkboxInput}`]: styles.checkboxInput },
@@ -231,9 +228,21 @@ export const GridRootStyles = styled('div', {
       [`& .${c.columnHeaderTitleContainerContent} > *`]: {
         overflow: 'visible !important',
       },
-      [`& .${c.cell} > *`]: {
+      '@media (hover: hover)': {
+        [`& .${c.iconButtonContainer}`]: {
+          width: '0 !important',
+          visibility: 'hidden !important',
+        },
+        [`& .${c.menuIcon}`]: {
+          width: '0 !important',
+          visibility: 'hidden !important',
+        },
+      },
+      [`& .${c.cell}`]: {
         overflow: 'visible !important',
         whiteSpace: 'nowrap',
+        minWidth: 'max-content !important',
+        maxWidth: 'max-content !important',
       },
       [`& .${c.groupingCriteriaCell}`]: {
         width: 'unset',
@@ -438,11 +447,10 @@ export const GridRootStyles = styled('div', {
 
     /* Cell styles */
     [`& .${c.cell}`]: {
-      display: 'flex',
-      alignItems: 'center',
       height: 'var(--height)',
       minWidth: 'var(--width)',
       maxWidth: 'var(--width)',
+      lineHeight: 'calc(var(--height) - 1px)', // -1px for the border
 
       '--width': '0px',
       '--height': '0px',
@@ -450,6 +458,9 @@ export const GridRootStyles = styled('div', {
       boxSizing: 'border-box',
       borderTop: `1px solid var(--rowBorderColor)`,
 
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
       '&.Mui-selected': selectedStyles,
     },
     [`& .${c['virtualScrollerContent--overflowed']} .${c['row--lastVisible']} .${c.cell}`]: {
@@ -458,9 +469,10 @@ export const GridRootStyles = styled('div', {
     [`&.${c['root--disableUserSelection']} .${c.cell}`]: {
       userSelect: 'none',
     },
-    [`& .${c.row}:not(.${c['row--dynamicHeight']}) > .${c.cell}`]: {
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
+    [`& .${c['row--dynamicHeight']} > .${c.cell}`]: {
+      overflow: 'initial',
+      whiteSpace: 'initial',
+      lineHeight: 'inherit',
     },
     [`& .${c.cellEmpty}`]: {
       padding: 0,
@@ -478,10 +490,6 @@ export const GridRootStyles = styled('div', {
         outlineOffset: '-1px',
       },
     },
-    [`& .${c.cellContent}`]: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    },
     [`& .${c['row--editing']}`]: {
       boxShadow: t.shadows[2],
     },
@@ -520,6 +528,7 @@ export const GridRootStyles = styled('div', {
     },
     [`& .${c.rowReorderCellContainer}`]: {
       padding: 0,
+      display: 'flex',
       alignItems: 'stretch',
     },
     [`.${c.withBorderColor}`]: {
@@ -539,13 +548,21 @@ export const GridRootStyles = styled('div', {
       borderRightWidth: '1px',
       borderRightStyle: 'solid',
     },
+    [`& .${c['cell--flex']}`]: {
+      display: 'flex',
+      alignItems: 'center',
+      lineHeight: 'inherit',
+    },
     [`& .${c['cell--textLeft']}`]: {
+      textAlign: 'left',
       justifyContent: 'flex-start',
     },
     [`& .${c['cell--textRight']}`]: {
+      textAlign: 'right',
       justifyContent: 'flex-end',
     },
     [`& .${c['cell--textCenter']}`]: {
+      textAlign: 'center',
       justifyContent: 'center',
     },
     [`& .${c['cell--pinnedLeft']}, & .${c['cell--pinnedRight']}`]: {
@@ -618,6 +635,22 @@ export const GridRootStyles = styled('div', {
       alignSelf: 'stretch',
       marginRight: t.spacing(2),
     },
+
+    /* ScrollbarFiller styles */
+    [`.${c.scrollbarFiller}`]: {
+      minWidth: 'calc(var(--DataGrid-hasScrollY) * var(--DataGrid-scrollbarSize))',
+      alignSelf: 'stretch',
+      [`&.${c['scrollbarFiller--borderTop']}`]: {
+        borderTop: '1px solid var(--DataGrid-rowBorderColor)',
+      },
+      [`&.${c['scrollbarFiller--pinnedRight']}`]: {
+        backgroundColor: 'var(--DataGrid-pinnedBackground)',
+      },
+      [`&.${c['scrollbarFiller--pinnedRight']}:not(.${c['scrollbarFiller--header']})`]: {
+        position: 'sticky',
+        right: 0,
+      },
+    },
   };
 
   return gridStyle;
diff --git a/packages/x-data-grid/src/constants/gridClasses.ts b/packages/x-data-grid/src/constants/gridClasses.ts
index f83194a44d63..60c304646eda 100644
--- a/packages/x-data-grid/src/constants/gridClasses.ts
+++ b/packages/x-data-grid/src/constants/gridClasses.ts
@@ -48,6 +48,10 @@ export interface GridClasses {
    * Styles applied to the cell element if the cell is in edit mode.
    */
   'cell--editing': string;
+  /**
+   * Styles applied to the cell element in flex display mode.
+   */
+  'cell--flex': string;
   /**
    * Styles applied to the cell element if `align="center"`.
    */
@@ -60,10 +64,6 @@ export interface GridClasses {
    * Styles applied to the cell element if `align="right"`.
    */
   'cell--textRight': string;
-  /**
-   * Styles applied to the cell element if the cell has a custom renderer.
-   */
-  'cell--withRenderer': string;
   /**
    * Styles applied to the cell element if it is at the top edge of a cell selection range.
    */
@@ -96,10 +96,6 @@ export interface GridClasses {
    * Styles applied to the cell element.
    */
   cell: string;
-  /**
-   * Styles applied to the element that wraps the cell content.
-   */
-  cellContent: string;
   /**
    * Styles applied to the cell checkbox element.
    */
@@ -534,6 +530,26 @@ export interface GridClasses {
    * Styles applied to the horizontal scrollbar.
    */
   'scrollbar--vertical': string;
+  /**
+   * @ignore - do not document.
+   * Styles applied to the scrollbar filler cell.
+   */
+  scrollbarFiller: string;
+  /**
+   * @ignore - do not document.
+   * Styles applied to the scrollbar filler cell, in header position.
+   */
+  'scrollbarFiller--header': string;
+  /**
+   * @ignore - do not document.
+   * Styles applied to the scrollbar filler cell, with a border top.
+   */
+  'scrollbarFiller--borderTop': string;
+  /**
+   * @ignore - do not document.
+   * Styles applied to the scrollbar filler cell.
+   */
+  'scrollbarFiller--pinnedRight': string;
   /**
    * Styles applied to the footer selected row count element.
    */
@@ -623,10 +639,10 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'booleanCell',
   'cell--editable',
   'cell--editing',
+  'cell--flex',
   'cell--textCenter',
   'cell--textLeft',
   'cell--textRight',
-  'cell--withRenderer',
   'cell--rangeTop',
   'cell--rangeBottom',
   'cell--rangeLeft',
@@ -635,7 +651,6 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'cell--pinnedRight',
   'cell--selectionMode',
   'cell',
-  'cellContent',
   'cellCheckbox',
   'cellEmpty',
   'cellSkeleton',
@@ -736,6 +751,10 @@ export const gridClasses = generateUtilityClasses<GridClassKey>('MuiDataGrid', [
   'scrollbar',
   'scrollbar--vertical',
   'scrollbar--horizontal',
+  'scrollbarFiller',
+  'scrollbarFiller--header',
+  'scrollbarFiller--borderTop',
+  'scrollbarFiller--pinnedRight',
   'selectedRowCount',
   'sortIcon',
   'toolbarContainer',
diff --git a/packages/x-data-grid/src/models/colDef/gridColDef.ts b/packages/x-data-grid/src/models/colDef/gridColDef.ts
index 2f221d6d347f..676f8b6eb5ee 100644
--- a/packages/x-data-grid/src/models/colDef/gridColDef.ts
+++ b/packages/x-data-grid/src/models/colDef/gridColDef.ts
@@ -196,6 +196,12 @@ export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel,
    * Class name that will be added in cells for that column.
    */
   cellClassName?: GridCellClassNamePropType<R, V>;
+  /**
+   * Display mode for the cell:
+   *  - 'text': For text-based cells (default)
+   *  - 'flex': For cells with HTMLElement children
+   */
+  display?: 'text' | 'flex';
   /**
    * Allows to override the component rendered as cell for this column.
    * @template R, V, F