[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/filtering/CustomHeaderFilterDataGridPro.js

@@ -62,7 +62,11 @@ function CustomHeaderFilter(props) {
 
  return (
  <Stack
- sx={{ outline: hasFocus ? 'solid #1976d2 1px' : '' }}
+ sx={{
+ outline: hasFocus ? 'solid #1976d2 1px' : '',
+ outlineOffset: hasFocus ? -2 : 0,
+ borderTop: `1px solid var(--DataGrid-rowBorderColor)`,
+ }}
  tabIndex={tabIndex}
  ref={cellRef}
  data-field={colDef.field}

docs/data/data-grid/filtering/CustomHeaderFilterDataGridPro.tsx

@@ -69,7 +69,11 @@ function CustomHeaderFilter(props: GridHeaderFilterCellProps) {
 
  return (
  <Stack
- sx={{ outline: hasFocus ? 'solid #1976d2 1px' : '' }}
+ sx={{
+ outline: hasFocus ? 'solid #1976d2 1px' : '',
+ outlineOffset: hasFocus ? -2 : 0,
+ borderTop: `1px solid var(--DataGrid-rowBorderColor)`,
+ }}
  tabIndex={tabIndex}
  ref={cellRef}
  data-field={colDef.field}

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,14 @@
 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.
 
+### DOM changes
+
+The layout of the grid has been substantially altered to use CSS sticky positioned elements. 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.
+
 <!-- ### Renamed props
 
 - -->
@@ -138,6 +146,9 @@
  <DataGrid columns={columns} />;
  ```
 
+- The type `GridPinnedColumns` has been renamed to `GridPinnedColumnFields`.
+- The type `GridPinnedPosition` has been renamed to `GridPinnedColumnPosition`.
+
 <!-- ### Rows
 
 - -->
@@ -281,17 +292,28 @@
  }
 ```
 
-<!-- ### CSS classes
+### CSS classes
 
 - Some CSS classes were removed or renamed
 
- | MUI X v6 classes | MUI X v7 classes | Note |
- | :--------------- | :--------------- | :--- |
- | |   | |
- |  |   | | -->
+ | MUI X v6 classes  | MUI X v7 classes | Note  |
+ | :------------------------------------------ | :--------------- | :--------------------- | --- |
+ | `.Mui-hovered` | `:hover`  | For rows  |
+ | `.MuiDataGrid--pinnedColumns-(left\|right)` | Removed | Not applicable anymore | --> |
 
-<!-- ### Removals from the public API
+### Changes to the public API
 
-- -->
+- The method `getRootDimensions()` now returns a non-null value.
+- The field `mainElementRef` is now always non-null.
+- The field `rootElementRef` is now always non-null.
+- The field `virtualScrollerRef` is now always non-null.
+- The event `renderedRowsIntervalChange` params changed from `GridRenderedRowsIntervalChangeParams` to `GridRenderContext`, and the former has been removed.
+
+### Changes to slots
+
+- The slot `columnHeaders` has had these props removed: `columnPositions`, `densityFactor`, `minColumnIndex`.
+- The slot `row` has had these props removed: `containerWidth`, `position`.
+- The slot `row` has typed props now.
+- The slot `headerFilterCell` has had these props removed: `filterOperators`.
 
 <!-- ### Rename `components` to `slots` -->

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

@@ -412,7 +412,7 @@
  "onPinnedColumnsChange": {
  "type": { "name": "func" },
  "signature": {
- "type": "function(pinnedColumns: GridPinnedColumns, details: GridCallbackDetails) => void",
+ "type": "function(pinnedColumns: GridPinnedColumnFields, details: GridCallbackDetails) => void",
  "describedArgs": ["pinnedColumns", "details"]
  }
  },
@@ -691,6 +691,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",
@@ -739,6 +751,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",
@@ -763,6 +781,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",
@@ -961,6 +985,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",
@@ -997,6 +1033,24 @@
  "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",
@@ -1087,6 +1141,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",
@@ -1195,18 +1255,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",
@@ -1297,6 +1345,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",
@@ -1351,6 +1405,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",
@@ -1416,6 +1488,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",