[DataGrid] Sticky headers

docs/data/data-grid/column-pinning/ControlPinnedColumns.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {
   DataGridPro,
   GridColDef,
-  GridPinnedColumns,
+  GridPinnedColumnFields,
   GridRowsProp,
 } from '@mui/x-data-grid-pro';
 import {
@@ -15,12 +15,12 @@ import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 
 export default function ControlPinnedColumns() {
-  const [pinnedColumns, setPinnedColumns] = React.useState<GridPinnedColumns>({
+  const [pinnedColumns, setPinnedColumns] = React.useState<GridPinnedColumnFields>({
     left: ['name'],
   });
 
   const handlePinnedColumnsChange = React.useCallback(
-    (updatedPinnedColumns: GridPinnedColumns) => {
+    (updatedPinnedColumns: GridPinnedColumnFields) => {
       setPinnedColumns(updatedPinnedColumns);
     },
     [],

docs/data/data-grid/events/events.json

@@ -273,8 +273,8 @@
   {
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "renderedRowsIntervalChange",
-    "description": "Fired when the rendered rows index interval changes. Called with a GridRenderedRowsIntervalChangeParams object.",
-    "params": "GridRenderedRowsIntervalChangeParams",
+    "description": "Fired when the rendered rows index interval changes. Called with a GridRenderContext object.",
+    "params": "GridRenderContext",
     "event": "MuiEvent<{}>"
   },
   {

docs/data/data-grid/master-detail/FullWidthDetailPanel.tsx

@@ -26,12 +26,12 @@ function DetailPanelContent({ row: rowProp }: { row: Customer }) {
   const apiRef = useGridApiContext();
   const [width, setWidth] = React.useState(() => {
     const dimensions = apiRef.current.getRootDimensions();
-    return dimensions!.viewportInnerSize.width;
+    return dimensions.viewportInnerSize.width;
   });
 
   const handleViewportInnerSizeChange = React.useCallback(() => {
     const dimensions = apiRef.current.getRootDimensions();
-    setWidth(dimensions!.viewportInnerSize.width);
+    setWidth(dimensions.viewportInnerSize.width);
   }, [apiRef]);
 
   React.useEffect(() => {

docs/data/data-grid/performance/GridVisualization.tsx

@@ -28,7 +28,7 @@ const TraceUpdates = React.forwardRef<any, any>((props, ref) => {
 
 const CellWithTracer = React.forwardRef((props, ref) => {
   return <TraceUpdates ref={ref} Component={GridCell} {...props} />;
-});
+}) as typeof GridCell;
 
 const slots = {
   cell: CellWithTracer,

docs/data/data-grid/style/StripedGrid.js

@@ -8,7 +8,7 @@ const ODD_OPACITY = 0.2;
 const StripedDataGrid = styled(DataGrid)(({ theme }) => ({
   [`& .${gridClasses.row}.even`]: {
     backgroundColor: theme.palette.grey[200],
-    '&:hover, &.Mui-hovered': {
+    '&:hover': {
       backgroundColor: alpha(theme.palette.primary.main, ODD_OPACITY),
       '@media (hover: none)': {
         backgroundColor: 'transparent',
@@ -19,7 +19,7 @@ const StripedDataGrid = styled(DataGrid)(({ theme }) => ({
         theme.palette.primary.main,
         ODD_OPACITY + theme.palette.action.selectedOpacity,
       ),
-      '&:hover, &.Mui-hovered': {
+      '&:hover': {
         backgroundColor: alpha(
           theme.palette.primary.main,
           ODD_OPACITY +

docs/data/data-grid/style/StripedGrid.tsx

@@ -8,7 +8,7 @@ const ODD_OPACITY = 0.2;
 const StripedDataGrid = styled(DataGrid)(({ theme }) => ({
   [`& .${gridClasses.row}.even`]: {
     backgroundColor: theme.palette.grey[200],
-    '&:hover, &.Mui-hovered': {
+    '&:hover': {
       backgroundColor: alpha(theme.palette.primary.main, ODD_OPACITY),
       '@media (hover: none)': {
         backgroundColor: 'transparent',
@@ -19,7 +19,7 @@ const StripedDataGrid = styled(DataGrid)(({ theme }) => ({
         theme.palette.primary.main,
         ODD_OPACITY + theme.palette.action.selectedOpacity,
       ),
-      '&:hover, &.Mui-hovered': {
+      '&:hover': {
         backgroundColor: alpha(
           theme.palette.primary.main,
           ODD_OPACITY +

docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md

@@ -69,6 +69,26 @@
 These changes were done for consistency, improve stability and make room for new features.
 Below are described the steps you need to make to migrate from v6 to v7.
 
+## XXX: To classify
+
+- type `GridPinnedColumns` => `GridPinnedColumnFields`, type `GridPinnedPosition` => `GridPinnedColumnPosition`
+  - column pinning api signature changes due to the changes above, but data format stays the same
+  - props `pinnedColumns`, `onPinnedColumnsChange`
+- `.Mui-hovered` => `:hover`
+- `.pinnedColumns-(left|right)` removed
+- `getRootDimensions()` now non-null
+- slot `GridColumnHeaders`, props removed: columnPositions, densityFactor, minColumnIndex
+- slot `GridRow`, props removed: containerWidth, position
+- api `mainElementRef` non-null
+- api `rootElementRef` non-null
+- api `virtualScrollerRef` non-null
+- event `renderedRowsIntervalChange`: params changed `GridRenderedRowsIntervalChangeParams` to `GridRenderContext`
+- type `GridRenderedRowsIntervalChangeParams` removed
+- type `GridRootContainerRef` removed
+- slot `GridRow` has typed props now
+- slot `headerFilterCell`, props removed: filterOperators
+- DOM changes
+
 <!-- ### Renamed props
 
 - -->

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -411,7 +411,7 @@
     "onPinnedColumnsChange": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(pinnedColumns: GridPinnedColumns, details: GridCallbackDetails) => void",
+        "type": "function(pinnedColumns: GridPinnedColumnFields, details: GridCallbackDetails) => void",
         "describedArgs": ["pinnedColumns", "details"]
       }
     },
@@ -690,6 +690,18 @@
       "description": "Styles applied to the cell element if the cell is in edit mode.",
       "isGlobal": false
     },
+    {
+      "key": "cell--pinnedLeft",
+      "className": "MuiDataGridPremium-cell--pinnedLeft",
+      "description": "Styles applied to the cell element if it is pinned to the left.",
+      "isGlobal": false
+    },
+    {
+      "key": "cell--pinnedRight",
+      "className": "MuiDataGridPremium-cell--pinnedRight",
+      "description": "Styles applied to the cell element if it is pinned to the right.",
+      "isGlobal": false
+    },
     {
       "key": "cell--rangeBottom",
       "className": "MuiDataGridPremium-cell--rangeBottom",
@@ -738,6 +750,12 @@
       "description": "Styles applied to the cell element if `align=\"right\"`.",
       "isGlobal": false
     },
+    {
+      "key": "cell--withLeftBorder",
+      "className": "MuiDataGridPremium-cell--withLeftBorder",
+      "description": "Styles applied the cell if `showColumnVerticalBorder={true}`.",
+      "isGlobal": false
+    },
     {
       "key": "cell--withRenderer",
       "className": "MuiDataGridPremium-cell--withRenderer",
@@ -762,6 +780,12 @@
       "description": "Styles applied to the element that wraps the cell content.",
       "isGlobal": false
     },
+    {
+      "key": "cellEmpty",
+      "className": "MuiDataGridPremium-cellEmpty",
+      "description": "Styles applied to the empty cell element.",
+      "isGlobal": false
+    },
     {
       "key": "cellSkeleton",
       "className": "MuiDataGridPremium-cellSkeleton",
@@ -960,6 +984,18 @@
       "description": "Styles applied to the columns panel row element.",
       "isGlobal": false
     },
+    {
+      "key": "container--bottom",
+      "className": "MuiDataGridPremium-container--bottom",
+      "description": "Styles applied to the bottom container.",
+      "isGlobal": false
+    },
+    {
+      "key": "container--top",
+      "className": "MuiDataGridPremium-container--top",
+      "description": "Styles applied to the top container.",
+      "isGlobal": false
+    },
     {
       "key": "detailPanel",
       "className": "MuiDataGridPremium-detailPanel",
@@ -1086,6 +1122,12 @@
       "description": "Styles applied to the main container element.",
       "isGlobal": false
     },
+    {
+      "key": "main--hasPinnedRight",
+      "className": "MuiDataGridPremium-main--hasPinnedRight",
+      "description": "Styles applied to the main container element when it has right pinned columns.",
+      "isGlobal": false
+    },
     {
       "key": "menu",
       "className": "MuiDataGridPremium-menu",
@@ -1194,18 +1236,6 @@
       "description": "Styles applied to the pinned columns.",
       "isGlobal": false
     },
-    {
-      "key": "pinnedColumns--left",
-      "className": "MuiDataGridPremium-pinnedColumns--left",
-      "description": "Styles applied to the left pinned columns.",
-      "isGlobal": false
-    },
-    {
-      "key": "pinnedColumns--right",
-      "className": "MuiDataGridPremium-pinnedColumns--right",
-      "description": "Styles applied to the right pinned columns.",
-      "isGlobal": false
-    },
     {
       "key": "pinnedRows",
       "className": "MuiDataGridPremium-pinnedRows",
@@ -1296,6 +1326,12 @@
       "description": "Styles applied to the row element if the row is in edit mode.",
       "isGlobal": false
     },
+    {
+      "key": "row--firstVisible",
+      "className": "MuiDataGridPremium-row--firstVisible",
+      "description": "Styles applied to the first visible row element on every page of the grid.",
+      "isGlobal": false
+    },
     {
       "key": "row--lastVisible",
       "className": "MuiDataGridPremium-row--lastVisible",
@@ -1350,6 +1386,24 @@
       "description": "Styles applied to the right scroll area element.",
       "isGlobal": false
     },
+    {
+      "key": "scrollbar",
+      "className": "MuiDataGridPremium-scrollbar",
+      "description": "Styles applied to the scrollbars.",
+      "isGlobal": false
+    },
+    {
+      "key": "scrollbar--horizontal",
+      "className": "MuiDataGridPremium-scrollbar--horizontal",
+      "description": "Styles applied to the horizontal scrollbar.",
+      "isGlobal": false
+    },
+    {
+      "key": "scrollbar--vertical",
+      "className": "MuiDataGridPremium-scrollbar--vertical",
+      "description": "Styles applied to the horizontal scrollbar.",
+      "isGlobal": false
+    },
     {
       "key": "selectedRowCount",
       "className": "MuiDataGridPremium-selectedRowCount",
@@ -1415,6 +1469,12 @@
       "className": "MuiDataGridPremium-withBorderColor",
       "description": "Styles applied to cells, column header and other elements that have border.\nSets border color only.",
       "isGlobal": false
+    },
+    {
+      "key": "withVerticalBorder",
+      "className": "MuiDataGridPremium-withVerticalBorder",
+      "description": "Styles applied the grid if `showColumnVerticalBorder={true}`.",
+      "isGlobal": false
     }
   ],
   "muiName": "MuiDataGridPremium",