@mui/x-data-grid 8.10.0 → 8.10.2

package/CHANGELOG.md

@@ -5,6 +5,188 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.10.2
+
+_Aug 20, 2025_
+
+We'd like to extend a big thank you to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌎 Improve Finnish (fi-FI) locale on the Data Grid
+
+Special thanks go out to the community members for their valuable contributions:
+@lauri-heinonen-2025-04, @Methuselah96, @sai6855, @wilcoschoneveld
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @cherniavskii, @flaviendelangle, @Janpot, @oliviertassinari, @rita-codes
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.10.2`
+
+- [DataGrid] Fix display for `<GridEditSingleSelect />` when `density='compact'` (#19249) @sai6855
+- [DataGrid] Fix column header sortable classname when using `disableColumnSorting` (#19222) @wilcoschoneveld
+- [l10n] Improve finnish (fi-FI) locale (#19163) @lauri-heinonen-2025-04
+
+#### `@mui/x-data-grid-pro@8.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-data-grid@8.10.2`, plus:
+
+- [DataGridPro] Fix quick filter not working in List View mode (#19254) @cherniavskii
+
+#### `@mui/x-data-grid-premium@8.10.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link "Premium plan")
+
+Same changes as in `@mui/x-data-grid-pro@8.10.2`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.10.2`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-date-pickers@8.10.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.10.2`
+
+Internal changes.
+
+#### `@mui/x-charts-pro@8.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-charts@8.10.2`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.10.2`
+
+- [tree view] Add `aria-hidden` to the Tree Item Checkbox (#19246) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-tree-view@8.10.2`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.10.2`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix links to the pyramid chart (#19250) @alexfauquette
+
+### Core
+
+- [internal] Avoid script for CI only @oliviertassinari
+- [internal] Fix `renovate.json` @oliviertassinari
+- [internal] Polish renovate config @oliviertassinari
+- [internal] Rename core to internal (#19203) @oliviertassinari
+- [internal] Update link to GitHub labels @oliviertassinari
+
+### Miscellaneous
+
+- [code-infra] Prepare for incoming `execa` update (#19229) @Janpot
+- [virtualizer] Fix type import (#19192) @Methuselah96
+- [virtualizer] Improve type export (#19192) @Methuselah96
+
+## 8.10.1
+
+_Aug 15, 2025_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Y-axes can now be grouped by category when using `band` and `point` scales.
+- 📚 Documentation improvements
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @bernardobelchior, @Janpot, @JCQuintas, @mnajdova, @oliviertassinari, @prakhargupta1, @romgrk
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.10.1`
+
+- [DataGrid] Fix scroll jumping (#19156) @romgrk
+- [DataGrid] Fix scroll restoration (#19182) @romgrk
+- [DataGrid] Fix "no row with id" error (#19193) @romgrk
+
+#### `@mui/x-data-grid-pro@8.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-data-grid@8.10.1`.
+
+#### `@mui/x-data-grid-premium@8.10.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link "Premium plan")
+
+Same changes as in `@mui/x-data-grid-pro@8.10.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.10.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.10.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-date-pickers@8.10.0`.
+
+### Charts
+
+- Axes can now be grouped by category when using `band` and `point` scales
+
+  <img width="643" height="455" alt="Bar chart with y-axis grouped per categories" src="https://github.com/user-attachments/assets/59044afe-bcc5-4152-8bf1-225db0635025" />
+
+#### `@mui/x-charts@8.10.1`
+
+- [charts] Allow y-axis to be grouped (#19081) @JCQuintas
+- [charts] Fix default axis highlight for axes without data attribute (#18985) @alexfauquette
+- [charts] Fix tooltip mark unexpected wrapping in mobile (#19122) @bernardobelchior
+- [charts] Prevent overflow on charts tooltip (#19123) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-charts@8.10.1`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.10.1`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+
+Same changes as in `@mui/x-tree-view@8.10.1`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.10.1`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add all planned charts on the overview page (#19077) @prakhargupta1
+- [docs] Add future charts components link in the sidebar (#19140) @prakhargupta1
+- [docs] Fix Heatmap docs duplicate text (#19138) @JCQuintas
+- [docs] Remove preview from Toolbar & Funnel (#19131) @mnajdova
+- [docs] Reproduce npm sparkline (#19089) @alexfauquette
+
+### Core
+
+- [core] Fix licensing model name (#19025) @oliviertassinari
+- [core] Fix usage of `:catalog` for `@babel/runtime` (#19028) @oliviertassinari
+- [core] Refactor virtualizer API (#18995) @romgrk
+
+### Miscellaneous
+
+- [code-infra] Remove namespaces (#19071) @Janpot
+- [code-infra] Fix `fs-extra` removal from `formattedTSDemos` script (#19132) @bernardobelchior
+- [code-infra] Remove unused code and dependency (#19139) @bernardobelchior
+- [code-infra] Replace `fs-extra` with `node:fs` where possible (#19127) @bernardobelchior
+- [internal] Edit, keep `lockFileMaintenance` simple @oliviertassinari
+- [internal] Fix writing style action name @oliviertassinari
+- [internal] Make it clear that `lockFileMaintenance` is enabled @oliviertassinari
+- [support-infra] Remove default issue label (#19104) @oliviertassinari
+
 ## 8.10.0
 
 _Aug 8, 2025_

package/components/GridRow.js

@@ -200,6 +200,11 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     }
     return rowStyle;
   }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
+
+  // HACK: Sometimes, the rowNode has already been removed from the state but the row is still rendered.
+  if (!rowNode) {
+    return null;
+  }
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
   const ariaAttributes = getRowAriaAttributes(rowNode, index);
   if (typeof rootProps.getRowClassName === 'function') {
@@ -211,11 +216,6 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-
-  // XXX: fix this properly
-  if (!rowNode) {
-    return null;
-  }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = _constants.PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -26,6 +26,9 @@ var _constants = require("../../internals/constants");
 var _utils = require("../../internals/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
+  const {
+    disableColumnSorting
+  } = (0, _useGridRootProps.useGridRootProps)();
   const {
     colDef,
     classes,
@@ -38,12 +41,13 @@ const useUtilityClasses = ownerState => {
     isLastUnpinned,
     isSiblingFocused
   } = ownerState;
+  const isColumnSortable = colDef.sortable && !disableColumnSorting;
   const isColumnSorted = sortDirection != null;
   const isColumnFiltered = filterItemsCounter != null && filterItemsCounter > 0;
   // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
   const isColumnNumeric = colDef.type === 'number';
   const slots = {
-    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', colDef.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === _constants.PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === _constants.PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight',
+    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', isColumnSortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === _constants.PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === _constants.PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight',
     // TODO: Remove classes below and restore `:has` selectors when they are supported in jsdom
     // See https://github.com/mui/mui-x/pull/14559
     isLastUnpinned && 'columnHeader--lastUnpinned', isSiblingFocused && 'columnHeader--siblingFocused'],

package/components/containers/GridRootStyles.js

@@ -689,6 +689,11 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         outlineOffset: focusOutlineWidth * -1
       }
     },
+    [`& .${_gridClasses.gridClasses['cell--editing']}`]: {
+      '& .MuiInputBase-root': {
+        height: '100%'
+      }
+    },
     [`& .${_gridClasses.gridClasses['row--editing']}`]: {
       boxShadow: _cssVariables.vars.shadows.base
     },

package/components/virtualization/GridVirtualScroller.js

@@ -90,7 +90,6 @@ function GridVirtualScroller(props) {
     getContainerProps,
     getScrollerProps,
     getContentProps,
-    getRenderZoneProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
     getRows,
@@ -119,11 +118,12 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })]
       }), getOverlay(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, (0, _extends2.default)({}, getRenderZoneProps(), {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, {
+          role: "rowgroup",
           children: [rows, /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller
           })]
-        }))
+        })
       })), hasBottomFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {
         rowsLength: rows.length
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.bottomContainer, {

package/esm/DataGrid/index.js

@@ -1,2 +1,2 @@
-import "../index.css";
+import '../index.css';
 export * from "./DataGrid.js";

package/esm/components/GridRow.js

@@ -193,6 +193,11 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     }
     return rowStyle;
   }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
+
+  // HACK: Sometimes, the rowNode has already been removed from the state but the row is still rendered.
+  if (!rowNode) {
+    return null;
+  }
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
   const ariaAttributes = getRowAriaAttributes(rowNode, index);
   if (typeof rootProps.getRowClassName === 'function') {
@@ -204,11 +209,6 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-
-  // XXX: fix this properly
-  if (!rowNode) {
-    return null;
-  }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {

package/esm/components/columnHeaders/GridColumnHeaderItem.js

@@ -19,6 +19,9 @@ import { PinnedColumnPosition } from "../../internals/constants.js";
 import { attachPinnedStyle } from "../../internals/utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
+  const {
+    disableColumnSorting
+  } = useGridRootProps();
   const {
     colDef,
     classes,
@@ -31,12 +34,13 @@ const useUtilityClasses = ownerState => {
     isLastUnpinned,
     isSiblingFocused
   } = ownerState;
+  const isColumnSortable = colDef.sortable && !disableColumnSorting;
   const isColumnSorted = sortDirection != null;
   const isColumnFiltered = filterItemsCounter != null && filterItemsCounter > 0;
   // todo refactor to a prop on col isNumeric or ?? ie: coltype===price wont work
   const isColumnNumeric = colDef.type === 'number';
   const slots = {
-    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', colDef.sortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight',
+    root: ['columnHeader', colDef.headerAlign === 'left' && 'columnHeader--alignLeft', colDef.headerAlign === 'center' && 'columnHeader--alignCenter', colDef.headerAlign === 'right' && 'columnHeader--alignRight', isColumnSortable && 'columnHeader--sortable', isDragging && 'columnHeader--moving', isColumnSorted && 'columnHeader--sorted', isColumnFiltered && 'columnHeader--filtered', isColumnNumeric && 'columnHeader--numeric', 'withBorderColor', showRightBorder && 'columnHeader--withRightBorder', showLeftBorder && 'columnHeader--withLeftBorder', pinnedPosition === PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft', pinnedPosition === PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight',
     // TODO: Remove classes below and restore `:has` selectors when they are supported in jsdom
     // See https://github.com/mui/mui-x/pull/14559
     isLastUnpinned && 'columnHeader--lastUnpinned', isSiblingFocused && 'columnHeader--siblingFocused'],

package/esm/components/containers/GridRootStyles.js

@@ -683,6 +683,11 @@ export const GridRootStyles = styled('div', {
         outlineOffset: focusOutlineWidth * -1
       }
     },
+    [`& .${c['cell--editing']}`]: {
+      '& .MuiInputBase-root': {
+        height: '100%'
+      }
+    },
     [`& .${c['row--editing']}`]: {
       boxShadow: vars.shadows.base
     },

package/esm/components/virtualization/GridVirtualScroller.js

@@ -82,7 +82,6 @@ function GridVirtualScroller(props) {
     getContainerProps,
     getScrollerProps,
     getContentProps,
-    getRenderZoneProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
     getRows,
@@ -111,11 +110,12 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })]
       }), getOverlay(), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
-        children: /*#__PURE__*/_jsxs(RenderZone, _extends({}, getRenderZoneProps(), {
+        children: /*#__PURE__*/_jsxs(RenderZone, {
+          role: "rowgroup",
           children: [rows, /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller
           })]
-        }))
+        })
       })), hasBottomFiller && /*#__PURE__*/_jsx(SpaceFiller, {
         rowsLength: rows.length
       }), /*#__PURE__*/_jsx(rootProps.slots.bottomContainer, {

package/esm/hooks/core/useGridVirtualizer.js

@@ -1,14 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useLazyRef from '@mui/utils/useLazyRef';
 import useEventCallback from '@mui/utils/useEventCallback';
 import { useRtl } from '@mui/system/RtlProvider';
 import { roundToDecimalPlaces } from '@mui/x-internals/math';
+import { lruMemoize } from '@mui/x-internals/lruMemoize';
 import { useStoreEffect } from '@mui/x-internals/store';
-import { useVirtualizer } from '@mui/x-virtualizer';
+import { useVirtualizer, Dimensions } from '@mui/x-virtualizer';
 import { useFirstRender } from "../utils/useFirstRender.js";
 import { createSelector } from "../../utils/createSelector.js";
 import { useGridSelector } from "../utils/useGridSelector.js";
-import { gridContentHeightSelector, gridHasFillerSelector, gridVerticalScrollbarWidthSelector } from "../features/dimensions/gridDimensionsSelectors.js";
+import { gridHasFillerSelector, gridVerticalScrollbarWidthSelector } from "../features/dimensions/gridDimensionsSelectors.js";
 import { gridDensityFactorSelector } from "../features/density/index.js";
 import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridHasColSpanSelector } from "../features/columns/gridColumnsSelector.js";
 import { gridPinnedRowsSelector, gridRowCountSelector } from "../features/rows/gridRowsSelector.js";
@@ -31,6 +33,18 @@ const columnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSel
   return roundToDecimalPlaces(positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth, 1);
 });
 
+/** Translates virtualizer state to grid state */
+const addGridDimensionsCreator = () => lruMemoize((dimensions, headerHeight, groupHeaderHeight, headerFilterHeight, headersTotalHeight) => {
+  return _extends({}, dimensions, {
+    headerHeight,
+    groupHeaderHeight,
+    headerFilterHeight,
+    headersTotalHeight
+  });
+}, {
+  maxSize: 1
+});
+
 /**
  * Virtualizer setup
  */
@@ -46,9 +60,6 @@ export function useGridVirtualizer(apiRef, rootProps) {
   const isRowSelected = id => rowSelectionManager.has(id) && apiRef.current.isRowSelectable(id);
   const currentPage = useGridVisibleRows(apiRef);
   const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
-
-  /* TODO: extract dimensions code */
-  const contentHeight = useGridSelector(apiRef, gridContentHeightSelector);
   const verticalScrollbarWidth = useGridSelector(apiRef, gridVerticalScrollbarWidthSelector);
   const hasFiller = useGridSelector(apiRef, gridHasFillerSelector);
   const {
@@ -67,16 +78,17 @@ export function useGridVirtualizer(apiRef, rootProps) {
   const headersTotalHeight = getTotalHeaderHeight(apiRef, rootProps);
   const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
   const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
-  const dimensions = {
+  const dimensionsParams = {
     rowHeight,
     headerHeight,
-    groupHeaderHeight,
-    headerFilterHeight,
     columnsTotalWidth,
-    headersTotalHeight,
     leftPinnedWidth,
-    rightPinnedWidth
+    rightPinnedWidth,
+    topPinnedHeight: headersTotalHeight,
+    bottomPinnedHeight: 0,
+    scrollbarSize: rootProps.scrollbarSize
   };
+  const addGridDimensions = useLazyRef(addGridDimensionsCreator).current;
 
   // </DIMENSIONS>
 
@@ -93,32 +105,42 @@ export function useGridVirtualizer(apiRef, rootProps) {
 
   const focusedVirtualCell = useGridSelector(apiRef, gridFocusedVirtualCellSelector);
   const virtualizer = useVirtualizer({
-    scrollbarSize: rootProps.scrollbarSize,
-    dimensions,
+    refs: {
+      container: apiRef.current.mainElementRef,
+      scroller: apiRef.current.virtualScrollerRef,
+      scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
+      scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
+    },
+    dimensions: dimensionsParams,
+    virtualization: {
+      isRtl,
+      rowBufferPx: rootProps.rowBufferPx,
+      columnBufferPx: rootProps.columnBufferPx
+    },
+    colspan: {
+      enabled: hasColSpan,
+      getColspan: (rowId, column) => {
+        if (typeof column.colSpan === 'function') {
+          const row = apiRef.current.getRow(rowId);
+          const value = apiRef.current.getRowValue(row, column);
+          return column.colSpan(value, row, column, apiRef) ?? 0;
+        }
+        return column.colSpan ?? 1;
+      }
+    },
     initialState: {
       scroll: rootProps.initialState?.scroll,
-      dimensions: apiRef.current.state.dimensions,
       rowSpanning: apiRef.current.state.rowSpanning,
       virtualization: apiRef.current.state.virtualization
     },
-    isRtl,
     rows: currentPage.rows,
     range: currentPage.range,
-    rowIdToIndexMap: currentPage.rowIdToIndexMap,
     rowCount,
     columns: visibleColumns,
     pinnedRows,
     pinnedColumns,
-    refs: {
-      container: apiRef.current.mainElementRef,
-      scroller: apiRef.current.virtualScrollerRef,
-      scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
-      scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
-    },
-    hasColSpan,
-    contentHeight,
-    minimalContentHeight,
     autoHeight,
+    minimalContentHeight,
     getRowHeight: React.useMemo(() => {
       if (!getRowHeight) {
         return undefined;
@@ -130,14 +152,20 @@ export function useGridVirtualizer(apiRef, rootProps) {
     getEstimatedRowHeight: React.useMemo(() => getEstimatedRowHeight ? rowEntry => getEstimatedRowHeight(_extends({}, rowEntry, {
       densityFactor: density
     })) : undefined, [getEstimatedRowHeight, density]),
-    getRowSpacing: React.useMemo(() => getRowSpacing ? (rowEntry, visibility) => getRowSpacing(_extends({}, rowEntry, visibility, {
-      indexRelativeToCurrentPage: apiRef.current.getRowIndexRelativeToVisibleRows(rowEntry.id)
-    })) : undefined, [apiRef, getRowSpacing]),
+    getRowSpacing: React.useMemo(() => getRowSpacing ? rowEntry => {
+      const indexRelativeToCurrentPage = currentPage.rowIdToIndexMap.get(rowEntry.id) ?? -1;
+      const visibility = {
+        isFirstVisible: indexRelativeToCurrentPage === 0,
+        isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+        indexRelativeToCurrentPage
+      };
+      return getRowSpacing(_extends({}, rowEntry, visibility, {
+        indexRelativeToCurrentPage: apiRef.current.getRowIndexRelativeToVisibleRows(rowEntry.id)
+      }));
+    } : undefined, [apiRef, getRowSpacing, currentPage.rows, currentPage.rowIdToIndexMap]),
     applyRowHeight: useEventCallback((entry, row) => apiRef.current.unstable_applyPipeProcessors('rowHeight', entry, row)),
     virtualizeColumnsWithAutoRowHeight: rootProps.virtualizeColumnsWithAutoRowHeight,
     focusedVirtualCell: useEventCallback(() => focusedVirtualCell),
-    rowBufferPx: rootProps.rowBufferPx,
-    columnBufferPx: rootProps.columnBufferPx,
     resizeThrottleMs: rootProps.resizeThrottleMs,
     onResize: useEventCallback(size => apiRef.current.publishEvent('resize', size)),
     onWheel: useEventCallback(event => {
@@ -157,14 +185,6 @@ export function useGridVirtualizer(apiRef, rootProps) {
       });
     },
     scrollReset,
-    getColspan: (rowId, column) => {
-      if (typeof column.colSpan === 'function') {
-        const row = apiRef.current.getRow(rowId);
-        const value = apiRef.current.getRowValue(row, column);
-        return column.colSpan(value, row, column, apiRef) ?? 0;
-      }
-      return column.colSpan ?? 0;
-    },
     renderRow: params => /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
       row: params.model,
       rowId: params.id,
@@ -174,7 +194,7 @@ export function useGridVirtualizer(apiRef, rootProps) {
       columnsTotalWidth: columnsTotalWidth,
       rowHeight: params.baseRowHeight,
       pinnedColumns: pinnedColumns,
-      visibleColumns: params.columns,
+      visibleColumns: visibleColumns,
       firstColumnIndex: params.firstColumnIndex,
       lastColumnIndex: params.lastColumnIndex,
       focusedColumnIndex: params.focusedColumnIndex,
@@ -196,16 +216,16 @@ export function useGridVirtualizer(apiRef, rootProps) {
   //
   // TODO(v9): Remove this
   useFirstRender(() => {
-    apiRef.current.store.state.dimensions = virtualizer.store.state.dimensions;
+    apiRef.current.store.state.dimensions = addGridDimensions(virtualizer.store.state.dimensions, headerHeight, groupHeaderHeight, headerFilterHeight, headersTotalHeight);
     apiRef.current.store.state.rowsMeta = virtualizer.store.state.rowsMeta;
     apiRef.current.store.state.virtualization = virtualizer.store.state.virtualization;
   });
+  useStoreEffect(virtualizer.store, Dimensions.selectors.dimensions, (_, dimensions) => {
+    apiRef.current.setState(gridState => _extends({}, gridState, {
+      dimensions: addGridDimensions(dimensions, headerHeight, groupHeaderHeight, headerFilterHeight, headersTotalHeight)
+    }));
+  });
   useStoreEffect(virtualizer.store, identity, (_, state) => {
-    if (state.dimensions !== apiRef.current.state.dimensions) {
-      apiRef.current.setState(gridState => _extends({}, gridState, {
-        dimensions: state.dimensions
-      }));
-    }
     if (state.rowsMeta !== apiRef.current.state.rowsMeta) {
       apiRef.current.setState(gridState => _extends({}, gridState, {
         rowsMeta: state.rowsMeta

package/esm/hooks/features/dataSource/cache.js

@@ -6,9 +6,6 @@ export class GridDataSourceCacheDefault {
     ttl = 300_000,
     getKey = getKeyDefault
   }) {
-    this.cache = void 0;
-    this.ttl = void 0;
-    this.getKey = void 0;
     this.cache = {};
     this.ttl = ttl;
     this.getKey = getKey;

package/esm/hooks/features/dataSource/gridDataSourceError.js

@@ -1,30 +1,30 @@
 export class GridGetRowsError extends Error {
+  /**
+   * The parameters used in the failed request
+   */
+
+  /**
+   * The original error that caused this error
+   */
+
   constructor(options) {
     super(options.message);
-    /**
-     * The parameters used in the failed request
-     */
-    this.params = void 0;
-    /**
-     * The original error that caused this error
-     */
-    this.cause = void 0;
     this.name = 'GridGetRowsError';
     this.params = options.params;
     this.cause = options.cause;
   }
 }
 export class GridUpdateRowError extends Error {
+  /**
+   * The parameters used in the failed request
+   */
+
+  /**
+   * The original error that caused this error
+   */
+
   constructor(options) {
     super(options.message);
-    /**
-     * The parameters used in the failed request
-     */
-    this.params = void 0;
-    /**
-     * The original error that caused this error
-     */
-    this.cause = void 0;
     this.name = 'GridUpdateRowError';
     this.params = options.params;
     this.cause = options.cause;