[DataGridPro] Render pinned and non-pinned column headers in one row (#…

…12376)
mui · Mar 13, 2024 · 684fca7 · 684fca7
1 parent a85fb9a
commit 684fca7
Show file tree

Hide file tree

Showing 48 changed files with 799 additions and 1,251 deletions.
diff --git a/docs/data/migration/migration-data-grid-v6/ColDefChangesGridNoSnap.js b/docs/data/migration/migration-data-grid-v6/ColDefChangesGridNoSnap.js
@@ -21,6 +21,7 @@ const columns = [
     field: 'propsToControlProgrammatically',
     headerName: 'Props to control programmatically',
     minWidth: 300,
+    display: 'flex',
     renderCell: List,
   },
   {
@@ -33,7 +34,7 @@ const columns = [
     field: 'docs',
     headerName: 'Docs',
     renderCell: DocsLink,
-    width: 60,
+    width: 61,
     disableColumnMenu: true,
     sortable: false,
     resizable: false,
@@ -125,7 +126,7 @@ export default function ColDefChangesGridNoSnap() {
 
 function DocsLink(params) {
   return (
-    <IconButton href={params.value}>
+    <IconButton href={params.value} target="_blank">
       <LinkIcon />
     </IconButton>
   );
@@ -143,7 +144,9 @@ function List(params) {
   return (
     <ul style={{ paddingLeft: 5 }}>
       {params.value.split(', ').map((v) => (
-        <li key={v}>{v}</li>
+        <li key={v}>
+          <code>{v}</code>
+        </li>
       ))}
     </ul>
   );

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
@@ -478,6 +478,10 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access)
 - 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.
+- The `columnHeader--showColumnBorder` class was replaced by `columnHeader--withLeftBorder` and `columnHeader--withRightBorder`.
+- The `columnHeadersInner`, `columnHeadersInner--scrollable`, and `columnHeaderDropZone` classes were removed since the inner wrapper was removed in our effort to simplify the DOM structure and improve accessibility.
+- The `pinnedColumnHeaders`, `pinnedColumnHeaders--left`, and `pinnedColumnHeaders--right` classes were removed along with the element they were applied to.
+  The pinned column headers now use `position: 'sticky'` and are rendered in the same row element as the regular column headers.
 
 ### 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
@@ -1210,12 +1210,6 @@
       "description": "Styles applied to the selection checkbox element.",
       "isGlobal": false
     },
-    {
-      "key": "columnGroupHeader",
-      "className": "MuiDataGridPremium-columnGroupHeader",
-      "description": "Styles applied to the column group header element.",
-      "isGlobal": false
-    },
     {
       "key": "columnHeader",
       "className": "MuiDataGridPremium-columnHeader",
@@ -1277,9 +1271,15 @@
       "isGlobal": false
     },
     {
-      "key": "columnHeader--showColumnBorder",
-      "className": "MuiDataGridPremium-columnHeader--showColumnBorder",
-      "description": "Styles applied to the column group header cell when show column border.",
+      "key": "columnHeader--pinnedLeft",
+      "className": "MuiDataGridPremium-columnHeader--pinnedLeft",
+      "description": "",
+      "isGlobal": false
+    },
+    {
+      "key": "columnHeader--pinnedRight",
+      "className": "MuiDataGridPremium-columnHeader--pinnedRight",
+      "description": "",
       "isGlobal": false
     },
     {
@@ -1294,6 +1294,12 @@
       "description": "Styles applied to the column header if the column is sorted.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeader--withLeftBorder",
+      "className": "MuiDataGridPremium-columnHeader--withLeftBorder",
+      "description": "",
+      "isGlobal": false
+    },
     {
       "key": "columnHeader--withRightBorder",
       "className": "MuiDataGridPremium-columnHeader--withRightBorder",
@@ -1312,24 +1318,6 @@
       "description": "Styles applied to the column header's draggable container element.",
       "isGlobal": false
     },
-    {
-      "key": "columnHeaderDropZone",
-      "className": "MuiDataGridPremium-columnHeaderDropZone",
-      "description": "Styles applied to the column headers wrapper if a column is being dragged.",
-      "isGlobal": false
-    },
-    {
-      "key": "columnHeadersInner",
-      "className": "MuiDataGridPremium-columnHeadersInner",
-      "description": "Styles applied to the column headers's inner element.",
-      "isGlobal": false
-    },
-    {
-      "key": "columnHeadersInner--scrollable",
-      "className": "MuiDataGridPremium-columnHeadersInner--scrollable",
-      "description": "Styles applied to the column headers's inner element if there is a horizontal scrollbar.",
-      "isGlobal": false
-    },
     {
       "key": "columnHeaderTitle",
       "className": "MuiDataGridPremium-columnHeaderTitle",
@@ -1438,24 +1426,6 @@
       "description": "Styles applied to the root of the input component.",
       "isGlobal": false
     },
-    {
-      "key": "filler",
-      "className": "MuiDataGridPremium-filler",
-      "description": "Styles applied to the filler row.",
-      "isGlobal": false
-    },
-    {
-      "key": "filler--pinnedLeft",
-      "className": "MuiDataGridPremium-filler--pinnedLeft",
-      "description": "Styles applied to the filler row pinned left section.",
-      "isGlobal": false
-    },
-    {
-      "key": "filler--pinnedRight",
-      "className": "MuiDataGridPremium-filler--pinnedRight",
-      "description": "Styles applied to the filler row pinned right section.",
-      "isGlobal": false
-    },
     {
       "key": "filterForm",
       "className": "MuiDataGridPremium-filterForm",
@@ -1630,24 +1600,6 @@
       "description": "Styles applied to the paper element.",
       "isGlobal": false
     },
-    {
-      "key": "pinnedColumnHeaders",
-      "className": "MuiDataGridPremium-pinnedColumnHeaders",
-      "description": "Styles applied to the pinned column headers.",
-      "isGlobal": false
-    },
-    {
-      "key": "pinnedColumnHeaders--left",
-      "className": "MuiDataGridPremium-pinnedColumnHeaders--left",
-      "description": "Styles applied to the left pinned column headers.",
-      "isGlobal": false
-    },
-    {
-      "key": "pinnedColumnHeaders--right",
-      "className": "MuiDataGridPremium-pinnedColumnHeaders--right",
-      "description": "Styles applied to the right pinned column headers.",
-      "isGlobal": false
-    },
     {
       "key": "pinnedColumns",
       "className": "MuiDataGridPremium-pinnedColumns",

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -1131,12 +1131,6 @@
       "description": "Styles applied to the selection checkbox element.",
       "isGlobal": false
     },
-    {
-      "key": "columnGroupHeader",
-      "className": "MuiDataGridPro-columnGroupHeader",
-      "description": "Styles applied to the column group header element.",
-      "isGlobal": false
-    },
     {
       "key": "columnHeader",
       "className": "MuiDataGridPro-columnHeader",
@@ -1198,9 +1192,15 @@
       "isGlobal": false
     },
     {
-      "key": "columnHeader--showColumnBorder",
-      "className": "MuiDataGridPro-columnHeader--showColumnBorder",
-      "description": "Styles applied to the column group header cell when show column border.",
+      "key": "columnHeader--pinnedLeft",
+      "className": "MuiDataGridPro-columnHeader--pinnedLeft",
+      "description": "",
+      "isGlobal": false
+    },
+    {
+      "key": "columnHeader--pinnedRight",
+      "className": "MuiDataGridPro-columnHeader--pinnedRight",
+      "description": "",
       "isGlobal": false
     },
     {
@@ -1215,6 +1215,12 @@
       "description": "Styles applied to the column header if the column is sorted.",
       "isGlobal": false
     },
+    {
+      "key": "columnHeader--withLeftBorder",
+      "className": "MuiDataGridPro-columnHeader--withLeftBorder",
+      "description": "",
+      "isGlobal": false
+    },
     {
       "key": "columnHeader--withRightBorder",
       "className": "MuiDataGridPro-columnHeader--withRightBorder",
@@ -1233,24 +1239,6 @@
       "description": "Styles applied to the column header's draggable container element.",
       "isGlobal": false
     },
-    {
-      "key": "columnHeaderDropZone",
-      "className": "MuiDataGridPro-columnHeaderDropZone",
-      "description": "Styles applied to the column headers wrapper if a column is being dragged.",
-      "isGlobal": false
-    },
-    {
-      "key": "columnHeadersInner",
-      "className": "MuiDataGridPro-columnHeadersInner",
-      "description": "Styles applied to the column headers's inner element.",
-      "isGlobal": false
-    },
-    {
-      "key": "columnHeadersInner--scrollable",
-      "className": "MuiDataGridPro-columnHeadersInner--scrollable",
-      "description": "Styles applied to the column headers's inner element if there is a horizontal scrollbar.",
-      "isGlobal": false
-    },
     {
       "key": "columnHeaderTitle",
       "className": "MuiDataGridPro-columnHeaderTitle",
@@ -1359,24 +1347,6 @@
       "description": "Styles applied to the root of the input component.",
       "isGlobal": false
     },
-    {
-      "key": "filler",
-      "className": "MuiDataGridPro-filler",
-      "description": "Styles applied to the filler row.",
-      "isGlobal": false
-    },
-    {
-      "key": "filler--pinnedLeft",
-      "className": "MuiDataGridPro-filler--pinnedLeft",
-      "description": "Styles applied to the filler row pinned left section.",
-      "isGlobal": false
-    },
-    {
-      "key": "filler--pinnedRight",
-      "className": "MuiDataGridPro-filler--pinnedRight",
-      "description": "Styles applied to the filler row pinned right section.",
-      "isGlobal": false
-    },
     {
       "key": "filterForm",
       "className": "MuiDataGridPro-filterForm",
@@ -1551,24 +1521,6 @@
       "description": "Styles applied to the paper element.",
       "isGlobal": false
     },
-    {
-      "key": "pinnedColumnHeaders",
-      "className": "MuiDataGridPro-pinnedColumnHeaders",
-      "description": "Styles applied to the pinned column headers.",
-      "isGlobal": false
-    },
-    {
-      "key": "pinnedColumnHeaders--left",
-      "className": "MuiDataGridPro-pinnedColumnHeaders--left",
-      "description": "Styles applied to the left pinned column headers.",
-      "isGlobal": false
-    },
-    {
-      "key": "pinnedColumnHeaders--right",
-      "className": "MuiDataGridPro-pinnedColumnHeaders--right",
-      "description": "Styles applied to the right pinned column headers.",
-      "isGlobal": false
-    },
     {
       "key": "pinnedColumns",
       "className": "MuiDataGridPro-pinnedColumns",