@mui/x-data-grid 9.0.0-beta.0 → 9.0.0-rc.0

package/CHANGELOG.md

@@ -1,5 +1,159 @@
 # Changelog
 
+## 9.0.0-rc.0
+
+<!-- generated comparing v9.0.0-beta.0..master -->
+
+_Apr 7, 2026_
+
+We'd like to extend a big thank you to the 18 contributors who made this release possible.
+
+Special thanks go out to these community members for their valuable contributions:
+@mixelburg, @sibananda485, @youjin-hong
+
+The following team members contributed to this release:
+@aemartos, @alexfauquette, @arminmeh, @brijeshb42, @flaviendelangle, @JCQuintas, @LukasTy, @mapache-salvaje, @MBilalShafi, @michelengelen, @noraleonte, @rita-codes, @romgrk, @siriwatknp, @ZeeshanTamboli
+
+### Data Grid
+
+#### `@mui/x-data-grid@9.0.0-rc.0`
+
+- [DataGrid] Rename filter panel `Columns` label to singular `Column` (#21935) @youjin-hong
+- [DataGrid] Export `GridColumnUnsortedIconProps` for custom column icon slots (#21658) @mixelburg
+- [DataGrid] Remove `x-virtualizer`'s `virtualScroller` from public API (#21936) @romgrk
+- [DataGrid][virtualizer] Scrolling without render gaps (#21616) @romgrk
+
+#### `@mui/x-data-grid-pro@9.0.0-rc.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-data-grid@9.0.0-rc.0`, plus:
+
+- [DataGridPro] Improve trigger for nested row reordering (#21642) @MBilalShafi
+- [DataGridPro] Undeprecate `onRowsScrollEnd` prop (#21912) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@9.0.0-rc.0` [![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@9.0.0-rc.0`, plus:
+
+- [DataGridPremium] Fix clipboard paste issue in portal (#21931) @sibananda485
+
+### Date and Time Pickers
+
+#### Breaking changes
+
+- Accessible DOM structure is now the only default. [Read more](https://next.mui.com/x/migration/migration-pickers-v8/#accessible-dom-structure-is-now-the-default)
+- The `PickerDay2` and `DateRangePickerDay2` components were propagated to stable while removing the previous defaults. [Read more](https://next.mui.com/x/migration/migration-pickers-v8/#day-slot)
+
+#### `@mui/x-date-pickers@9.0.0-rc.0`
+
+- [pickers] Remove `PickersDay` and `DateRangePickerDay` and promote their `2` versions as replacements (#21739) @michelengelen
+
+#### `@mui/x-date-pickers-pro@9.0.0-rc.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@9.0.0-rc.0`.
+
+### Charts
+
+#### `@mui/x-charts@9.0.0-rc.0.0`
+
+- [charts] Make line visibility toggle start from the baseline (#21893) @alexfauquette
+- [charts] Remove the container overflow (#21955) @alexfauquette
+- [charts] Revert `theme.alpha` for non-channel token (#21965) @siriwatknp
+
+#### `@mui/x-charts-pro@9.0.0-rc.0.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-charts@9.0.0-rc.0.0`, plus:
+
+- [charts-pro] Zoom slider touch improvements (#21832) @JCQuintas
+- [charts-pro] Add `seriesIds` filter to zoom slider preview (#21933) @JCQuintas
+- [charts-pro] Fix zoom slider preview with discard filter mode (#21883) @JCQuintas
+
+#### `@mui/x-charts-premium@9.0.0-rc.0.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@9.0.0-rc.0.0`, plus:
+
+- [charts-premium] Add series `valueFormatter` to candlestick chart (#21905) @JCQuintas
+- [charts-premium] Add zoom slider preview support for candlestick charts (#21914) @JCQuintas
+- [charts-premium] Allow color customization in `Candlestick` chart (#21838) @JCQuintas
+- [charts-premium] Support hide/show for OHLC (candlestick) series (#21807) @Copilot
+- [charts-premium] Add `dataset` support to `Candlestick` chart (#21872) @JCQuintas
+- [charts-premium] Add candlestick page to sidebar navigation (#21834) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@9.0.0-rc.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@9.0.0-rc.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-tree-view@9.0.0-rc.0`, plus:
+
+- [RichTreeViewPro] Allow to auto-expand lazy loaded items (#21759) @flaviendelangle
+
+### Scheduler
+
+#### `@mui/x-scheduler@9.0.0-alpha.0`
+
+- [scheduler] Add locale files, adapt l10n scripts, and add localization table to docs (#21870) @rita-codes
+- [scheduler] Add planned features to the docs (#21705) @rita-codes
+- [scheduler] Add scheduler to docs introduction (#21845) @rita-codes
+- [scheduler] Add wide docs to scheduler (#21860) @noraleonte
+- [scheduler] All day event bugfixes (#21884) @noraleonte
+- [scheduler] Autofocus title field (#21947) @noraleonte
+- [scheduler] Change default event creation trigger to single click (#21979) @rita-codes
+- [scheduler] Change order of the views on the view selector (#21904) @rita-codes
+- [scheduler] Disabled border color for the repeat day picker in dark mode (#21987) @rita-codes
+- [scheduler] Drop unused dependency (#21956) @flaviendelangle
+- [scheduler] Fix all-day event shifting to previous day in negative UTC offsets (#21994) @rita-codes
+- [scheduler] Fix dark theme localization demos (#21992) @noraleonte
+- [scheduler] Fix licensing confusion in docs (#21939) @rita-codes
+- [scheduler] Fix preferences menu width shift when toggling options + Improve preferences menu accessibility (#21902) @rita-codes
+- [scheduler] Prepare for the alpha launch (#21859) @rita-codes
+- [scheduler] Sync Base UI internals and apply good practices (#21946) @flaviendelangle
+- [scheduler] Update close modal aria label translation (#21940) @rita-codes
+- [scheduler] Add Spanish (es-ES) locale (#21900) @rita-codes
+- [scheduler] Improve French (fr-FR) locale (#21941) @rita-codes
+- [scheduler] Improve Romanian (ro-RO) locale (#21942) @rita-codes
+
+#### `@mui/x-scheduler-premium@9.0.0-alpha.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-scheduler@9.0.0-alpha.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@9.0.0-rc.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix JSDOM → jsdom casing (#21907) @JCQuintas
+- [docs] Remove Joy UI references and dependency (#21937) @siriwatknp
+- [docs] Remove none generated files (#21886) @alexfauquette
+- [docs] Remove unused interactive demo code (#21945) @LukasTy
+- [docs] Revise the Funnel doc (#21677) @mapache-salvaje
+- [docs] Revise the Line chart docs (#21554) @mapache-salvaje
+- [docs] Revise the Radar doc (#21674) @mapache-salvaje
+- [docs] Revise the Sankey doc (#21678) @mapache-salvaje
+- [docs] Revise the Scatter chart docs (#21564) @mapache-salvaje
+
+### Core
+
+- [docs-infra] Update to the latest monorepo (#21971) @brijeshb42
+- [internal] Remove checks for `materialVersion >= 6` (#21975) @LukasTy
+
+### Miscellaneous
+
+- [core] Bump @mui/material to v9.0.0-beta.1 (#21858) @siriwatknp
+- [core] Update browserslistrc (#21974) @siriwatknp
+- [deps] Bump minimum core packages to 7.3.0 to adopt theme color manipulator (#21892) @siriwatknp
+- [telemetry] Prefer upstream remote over origin for `projectId` (#21882) @aemartos
+- [telemetry] Send `repoHash`, `[x]packageNameHash`, and `rootPathHash` alongside `projectId` (#21896) @aemartos
+- [test] Exclude flaky `DataGrid` argos test (#21977) @MBilalShafi
+- [test] Fix flaky `DataGrid` test (#22000) @arminmeh
+- [test] Remove `componentsProp` test from `describeConformance` (#21897) @ZeeshanTamboli
+- [x-license] Change `orderId` type from `number` to `string` (#21885) @aemartos
+
 ## 9.0.0-beta.0
 
 <!-- generated comparing v9.0.0-alpha.4..master -->
@@ -313,7 +467,7 @@ Same changes as in `@mui/x-charts-pro@9.0.0-alpha.3`, plus:
 - Remove deprecated CSS state classes from `treeItemClasses`: `expanded`, `selected`, `focused`, `disabled`, `editable`, `editing` (use `[data-expanded]`, `[data-selected]`, etc.)
 - The `<RichTreeViewPro />` component has now virtualization enabled by default.
 - The items used inside the `<RichTreeViewPro />` now have a default height of `32px`.
-- The events of the `<RichTreeViewPro />` are now rendered as a flat list instead of a nested tree.
+- The items of the `<RichTreeViewPro />` are now rendered as a flat list instead of a nested tree.
 
 #### `@mui/x-tree-view@9.0.0-alpha.3`
 

package/DataGrid/DataGrid.js

@@ -273,6 +273,7 @@ DataGridRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: _propTypes.default.shape({
+    virtualizerLayoutMode: _propTypes.default.oneOf(['controlled', 'uncontrolled']),
     warnIfFocusStateIsNotSynced: _propTypes.default.bool
   }),
   /**

package/DataGrid/DataGrid.mjs

@@ -266,6 +266,7 @@ DataGridRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    virtualizerLayoutMode: PropTypes.oneOf(['controlled', 'uncontrolled']),
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
   /**

package/components/GridColumnUnsortedIcon.d.mts

@@ -1,7 +1,10 @@
-import * as React from 'react';
 import type { GridBaseIconProps } from "../models/gridSlotsComponentsProps.mjs";
 import type { GridSortDirection } from "../models/gridSortModel.mjs";
 export interface GridColumnUnsortedIconProps extends GridBaseIconProps {
   sortingOrder: GridSortDirection[];
 }
-export declare const GridColumnUnsortedIcon: React.NamedExoticComponent<GridColumnUnsortedIconProps>;
+declare function GridColumnUnsortedIcon(props: GridColumnUnsortedIconProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace GridColumnUnsortedIcon {
+  var propTypes: any;
+}
+export { GridColumnUnsortedIcon };

package/components/GridColumnUnsortedIcon.d.ts

@@ -1,7 +1,10 @@
-import * as React from 'react';
 import type { GridBaseIconProps } from "../models/gridSlotsComponentsProps.js";
 import type { GridSortDirection } from "../models/gridSortModel.js";
 export interface GridColumnUnsortedIconProps extends GridBaseIconProps {
   sortingOrder: GridSortDirection[];
 }
-export declare const GridColumnUnsortedIcon: React.NamedExoticComponent<GridColumnUnsortedIconProps>;
+declare function GridColumnUnsortedIcon(props: GridColumnUnsortedIconProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace GridColumnUnsortedIcon {
+  var propTypes: any;
+}
+export { GridColumnUnsortedIcon };

package/components/GridColumnUnsortedIcon.js

@@ -5,21 +5,35 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridColumnUnsortedIcon = void 0;
+exports.GridColumnUnsortedIcon = GridColumnUnsortedIcon;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["sortingOrder"];
-const GridColumnUnsortedIcon = exports.GridColumnUnsortedIcon = /*#__PURE__*/React.memo(function GridColumnHeaderSortIcon(props) {
+function GridColumnUnsortedIcon(props) {
   const {
       sortingOrder
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const {
+    slots
+  } = (0, _useGridRootProps.useGridRootProps)();
   const [nextSortDirection] = sortingOrder;
-  const Icon = nextSortDirection === 'asc' ? rootProps.slots.columnSortedAscendingIcon : rootProps.slots.columnSortedDescendingIcon;
+  const Icon = nextSortDirection === 'asc' ? slots.columnSortedAscendingIcon : slots.columnSortedDescendingIcon;
   return Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, (0, _extends2.default)({}, other)) : null;
-});
-if (process.env.NODE_ENV !== "production") GridColumnUnsortedIcon.displayName = "GridColumnUnsortedIcon";
+}
+process.env.NODE_ENV !== "production" ? GridColumnUnsortedIcon.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  className: _propTypes.default.string,
+  color: _propTypes.default.string,
+  fontSize: _propTypes.default.oneOf(['inherit', 'large', 'medium', 'small']),
+  sortingOrder: _propTypes.default.arrayOf(_propTypes.default.oneOf(['asc', 'desc'])).isRequired,
+  style: _propTypes.default.object,
+  titleAccess: _propTypes.default.string
+} : void 0;

package/components/GridColumnUnsortedIcon.mjs

@@ -2,16 +2,31 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["sortingOrder"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const GridColumnUnsortedIcon = /*#__PURE__*/React.memo(function GridColumnHeaderSortIcon(props) {
+function GridColumnUnsortedIcon(props) {
   const {
       sortingOrder
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const rootProps = useGridRootProps();
+  const {
+    slots
+  } = useGridRootProps();
   const [nextSortDirection] = sortingOrder;
-  const Icon = nextSortDirection === 'asc' ? rootProps.slots.columnSortedAscendingIcon : rootProps.slots.columnSortedDescendingIcon;
+  const Icon = nextSortDirection === 'asc' ? slots.columnSortedAscendingIcon : slots.columnSortedDescendingIcon;
   return Icon ? /*#__PURE__*/_jsx(Icon, _extends({}, other)) : null;
-});
-if (process.env.NODE_ENV !== "production") GridColumnUnsortedIcon.displayName = "GridColumnUnsortedIcon";
+}
+process.env.NODE_ENV !== "production" ? GridColumnUnsortedIcon.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  className: PropTypes.string,
+  color: PropTypes.string,
+  fontSize: PropTypes.oneOf(['inherit', 'large', 'medium', 'small']),
+  sortingOrder: PropTypes.arrayOf(PropTypes.oneOf(['asc', 'desc'])).isRequired,
+  style: PropTypes.object,
+  titleAccess: PropTypes.string
+} : void 0;
+export { GridColumnUnsortedIcon };

package/components/GridDetailPanels.d.mts

@@ -1,5 +1,2 @@
-import type { VirtualScrollerCompat } from '@mui/x-virtualizer';
-export interface GridDetailPanelsProps {
-  virtualScroller: VirtualScrollerCompat;
-}
+export interface GridDetailPanelsProps {}
 export declare function GridDetailPanels(_: GridDetailPanelsProps): null;

package/components/GridDetailPanels.d.ts

@@ -1,5 +1,2 @@
-import type { VirtualScrollerCompat } from '@mui/x-virtualizer';
-export interface GridDetailPanelsProps {
-  virtualScroller: VirtualScrollerCompat;
-}
+export interface GridDetailPanelsProps {}
 export declare function GridDetailPanels(_: GridDetailPanelsProps): null;

package/components/GridPinnedRows.d.mts

@@ -1,6 +1,4 @@
-import type { VirtualScrollerCompat } from '@mui/x-virtualizer';
 export interface GridPinnedRowsProps {
   position: 'top' | 'bottom';
-  virtualScroller: VirtualScrollerCompat;
 }
 export declare function GridPinnedRows(_: GridPinnedRowsProps): null;

package/components/GridPinnedRows.d.ts

@@ -1,6 +1,4 @@
-import type { VirtualScrollerCompat } from '@mui/x-virtualizer';
 export interface GridPinnedRowsProps {
   position: 'top' | 'bottom';
-  virtualScroller: VirtualScrollerCompat;
 }
 export declare function GridPinnedRows(_: GridPinnedRowsProps): null;

package/components/GridRowDragAndDropOverlay.js

@@ -53,7 +53,7 @@ const GridRowDragAndDropOverlayRoot = (0, _styles.styled)('div', {
     backgroundColor: (theme.vars || theme).palette.primary.main
   }
 }, action === 'inside' && {
-  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)` : (0, _styles.alpha)(theme.palette.primary.main, 0.1)
+  backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, 0.1)
 }));
 const GridRowDragAndDropOverlay = exports.GridRowDragAndDropOverlay = /*#__PURE__*/React.memo(function GridRowDragAndDropOverlay(props) {
   const {

package/components/GridRowDragAndDropOverlay.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { styled, alpha } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
 import { shouldForwardProp } from '@mui/system/createStyled';
 import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.mjs";
 import { useGridSelector } from "../hooks/utils/useGridSelector.mjs";
@@ -46,7 +46,7 @@ const GridRowDragAndDropOverlayRoot = styled('div', {
     backgroundColor: (theme.vars || theme).palette.primary.main
   }
 }, action === 'inside' && {
-  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)` : alpha(theme.palette.primary.main, 0.1)
+  backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, 0.1)
 }));
 export const GridRowDragAndDropOverlay = /*#__PURE__*/React.memo(function GridRowDragAndDropOverlay(props) {
   const {

package/components/GridScrollbarFillerCell.js

@@ -7,6 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridScrollbarFillerCell = GridScrollbarFillerCell;
 var _clsx = _interopRequireDefault(require("clsx"));
 var _constants = require("../constants");
+var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _usePinnedScrollOffset = require("../hooks/utils/usePinnedScrollOffset");
+var _constants2 = require("../internals/constants");
 var _jsxRuntime = require("react/jsx-runtime");
 const classes = {
   root: _constants.gridClasses.scrollbarFiller,
@@ -15,8 +18,13 @@ const classes = {
 function GridScrollbarFillerCell({
   pinnedRight
 }) {
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const pinnedScrollOffset = (0, _usePinnedScrollOffset.usePinnedScrollOffset)(apiRef, pinnedRight ? _constants2.PinnedColumnPosition.RIGHT : undefined);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     role: "presentation",
-    className: (0, _clsx.default)(classes.root, pinnedRight && classes.pinnedRight)
+    className: (0, _clsx.default)(classes.root, pinnedRight && classes.pinnedRight),
+    style: {
+      right: pinnedScrollOffset
+    }
   });
 }

package/components/GridScrollbarFillerCell.mjs

@@ -1,5 +1,8 @@
 import clsx from 'clsx';
 import { gridClasses } from "../constants/index.mjs";
+import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.mjs";
+import { usePinnedScrollOffset } from "../hooks/utils/usePinnedScrollOffset.mjs";
+import { PinnedColumnPosition } from "../internals/constants.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const classes = {
   root: gridClasses.scrollbarFiller,
@@ -8,9 +11,14 @@ const classes = {
 function GridScrollbarFillerCell({
   pinnedRight
 }) {
+  const apiRef = useGridPrivateApiContext();
+  const pinnedScrollOffset = usePinnedScrollOffset(apiRef, pinnedRight ? PinnedColumnPosition.RIGHT : undefined);
   return /*#__PURE__*/_jsx("div", {
     role: "presentation",
-    className: clsx(classes.root, pinnedRight && classes.pinnedRight)
+    className: clsx(classes.root, pinnedRight && classes.pinnedRight),
+    style: {
+      right: pinnedScrollOffset
+    }
   });
 }
 export { GridScrollbarFillerCell };

package/components/cell/GridCell.js

@@ -31,6 +31,7 @@ var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusState
 var _gridColumnsInterfaces = require("../../hooks/features/columns/gridColumnsInterfaces");
 var _constants = require("../../internals/constants");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
+var _usePinnedScrollOffset = require("../../hooks/utils/usePinnedScrollOffset");
 var _gridEditingSelectors = require("../../hooks/features/editing/gridEditingSelectors");
 var _utils = require("../../internals/utils");
 var _useGridConfiguration = require("../../hooks/utils/useGridConfiguration");
@@ -206,6 +207,7 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
   }, [apiRef, field, rowId]);
   const isCellRowSpanned = hiddenCells[rowId]?.[colIndex] ?? false;
   const rowSpan = spannedCells[rowId]?.[colIndex] ?? 1;
+  const pinnedScrollOffset = (0, _usePinnedScrollOffset.usePinnedScrollOffset)(apiRef, pinnedPosition);
   const style = React.useMemo(() => {
     if (isNotVisible) {
       return {
@@ -218,7 +220,7 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     }
     const cellStyle = (0, _utils.attachPinnedStyle)((0, _extends2.default)({
       '--width': `${width}px`
-    }, styleProp), isRtl, pinnedPosition, pinnedOffset);
+    }, styleProp), isRtl, pinnedPosition, pinnedOffset !== undefined ? pinnedOffset + pinnedScrollOffset : undefined);
     const isLeftPinned = pinnedPosition === _constants.PinnedColumnPosition.LEFT;
     const isRightPinned = pinnedPosition === _constants.PinnedColumnPosition.RIGHT;
     if (rowSpan > 1) {
@@ -229,7 +231,7 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
       }
     }
     return cellStyle;
-  }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition, isRtl, rowSpan]);
+  }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition, pinnedScrollOffset, isRtl, rowSpan]);
   (0, _useEnhancedEffect.default)(() => {
     if (!hasFocus || cellMode === _models.GridCellModes.Edit) {
       return;

package/components/cell/GridCell.mjs

@@ -26,6 +26,7 @@ import { gridFocusCellSelector, gridTabIndexCellSelector } from "../../hooks/fea
 import { GridPinnedColumnPosition } from "../../hooks/features/columns/gridColumnsInterfaces.mjs";
 import { PinnedColumnPosition } from "../../internals/constants.mjs";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.mjs";
+import { usePinnedScrollOffset } from "../../hooks/utils/usePinnedScrollOffset.mjs";
 import { gridEditCellStateSelector } from "../../hooks/features/editing/gridEditingSelectors.mjs";
 import { attachPinnedStyle } from "../../internals/utils/index.mjs";
 import { useGridConfiguration } from "../../hooks/utils/useGridConfiguration.mjs";
@@ -199,6 +200,7 @@ const GridCell = forwardRef(function GridCell(props, ref) {
   }, [apiRef, field, rowId]);
   const isCellRowSpanned = hiddenCells[rowId]?.[colIndex] ?? false;
   const rowSpan = spannedCells[rowId]?.[colIndex] ?? 1;
+  const pinnedScrollOffset = usePinnedScrollOffset(apiRef, pinnedPosition);
   const style = React.useMemo(() => {
     if (isNotVisible) {
       return {
@@ -211,7 +213,7 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     }
     const cellStyle = attachPinnedStyle(_extends({
       '--width': `${width}px`
-    }, styleProp), isRtl, pinnedPosition, pinnedOffset);
+    }, styleProp), isRtl, pinnedPosition, pinnedOffset !== undefined ? pinnedOffset + pinnedScrollOffset : undefined);
     const isLeftPinned = pinnedPosition === PinnedColumnPosition.LEFT;
     const isRightPinned = pinnedPosition === PinnedColumnPosition.RIGHT;
     if (rowSpan > 1) {
@@ -222,7 +224,7 @@ const GridCell = forwardRef(function GridCell(props, ref) {
       }
     }
     return cellStyle;
-  }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition, isRtl, rowSpan]);
+  }, [width, isNotVisible, styleProp, pinnedOffset, pinnedPosition, pinnedScrollOffset, isRtl, rowSpan]);
   useEnhancedEffect(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
       return;

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -13,16 +13,17 @@ var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridColumnGroupsSelector = require("../../hooks/features/columnGrouping/gridColumnGroupsSelector");
-var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
 var _domUtils = require("../../utils/domUtils");
 var _constants = require("../../internals/constants");
 var _utils = require("../../internals/utils");
+var _usePinnedScrollOffset = require("../../hooks/utils/usePinnedScrollOffset");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -58,10 +59,10 @@ function GridColumnGroupHeader(props) {
     pinnedPosition,
     pinnedOffset
   } = props;
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const isRtl = (0, _RtlProvider.useRtl)();
   const headerCellRef = React.useRef(null);
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const columnGroupsLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnGroupsSelector.gridColumnGroupsLookupSelector);
   const group = groupId ? columnGroupsLookup[groupId] : {};
   const {
@@ -129,7 +130,8 @@ function GridColumnGroupHeader(props) {
     onBlur: publish('columnGroupHeaderBlur')
   }), [publish]);
   const headerClassName = typeof group.headerClassName === 'function' ? group.headerClassName(renderParams) : group.headerClassName;
-  const style = React.useMemo(() => (0, _utils.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
+  const pinnedScrollOffset = (0, _usePinnedScrollOffset.usePinnedScrollOffset)(apiRef, pinnedPosition);
+  const style = React.useMemo(() => (0, _utils.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset !== undefined ? pinnedOffset + pinnedScrollOffset : undefined), [pinnedPosition, pinnedOffset, pinnedScrollOffset, props.style, isRtl]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGenericColumnHeaderItem.GridGenericColumnHeaderItem, (0, _extends2.default)({
     ref: headerCellRef,
     classes: classes,

package/components/columnHeaders/GridColumnGroupHeader.mjs

@@ -6,16 +6,17 @@ import useId from '@mui/utils/useId';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '@mui/utils/capitalize';
 import { useRtl } from '@mui/system/RtlProvider';
+import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.mjs";
 import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.mjs";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
 import { gridColumnGroupsLookupSelector } from "../../hooks/features/columnGrouping/gridColumnGroupsSelector.mjs";
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.mjs";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.mjs";
 import { GridGenericColumnHeaderItem } from "./GridGenericColumnHeaderItem.mjs";
 import { isEventTargetInPortal } from "../../utils/domUtils.mjs";
 import { PinnedColumnPosition } from "../../internals/constants.mjs";
 import { attachPinnedStyle } from "../../internals/utils/index.mjs";
+import { usePinnedScrollOffset } from "../../hooks/utils/usePinnedScrollOffset.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -51,10 +52,10 @@ function GridColumnGroupHeader(props) {
     pinnedPosition,
     pinnedOffset
   } = props;
+  const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const isRtl = useRtl();
   const headerCellRef = React.useRef(null);
-  const apiRef = useGridApiContext();
   const columnGroupsLookup = useGridSelector(apiRef, gridColumnGroupsLookupSelector);
   const group = groupId ? columnGroupsLookup[groupId] : {};
   const {
@@ -122,7 +123,8 @@ function GridColumnGroupHeader(props) {
     onBlur: publish('columnGroupHeaderBlur')
   }), [publish]);
   const headerClassName = typeof group.headerClassName === 'function' ? group.headerClassName(renderParams) : group.headerClassName;
-  const style = React.useMemo(() => attachPinnedStyle(_extends({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
+  const pinnedScrollOffset = usePinnedScrollOffset(apiRef, pinnedPosition);
+  const style = React.useMemo(() => attachPinnedStyle(_extends({}, props.style), isRtl, pinnedPosition, pinnedOffset !== undefined ? pinnedOffset + pinnedScrollOffset : undefined), [pinnedPosition, pinnedOffset, pinnedScrollOffset, props.style, isRtl]);
   return /*#__PURE__*/_jsx(GridGenericColumnHeaderItem, _extends({
     ref: headerCellRef,
     classes: classes,

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -27,6 +27,7 @@ var _GridGenericColumnHeaderItem = require("./GridGenericColumnHeaderItem");
 var _domUtils = require("../../utils/domUtils");
 var _constants = require("../../internals/constants");
 var _utils = require("../../internals/utils");
+var _usePinnedScrollOffset = require("../../hooks/utils/usePinnedScrollOffset");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -224,7 +225,8 @@ function GridColumnHeaderItem(props) {
     colDef
   }) : colDef.headerClassName;
   const label = colDef.headerName ?? colDef.field;
-  const style = React.useMemo(() => (0, _utils.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
+  const pinnedScrollOffset = (0, _usePinnedScrollOffset.usePinnedScrollOffset)(apiRef, pinnedPosition);
+  const style = React.useMemo(() => (0, _utils.attachPinnedStyle)((0, _extends2.default)({}, props.style), isRtl, pinnedPosition, pinnedOffset !== undefined ? pinnedOffset + pinnedScrollOffset : undefined), [pinnedPosition, pinnedOffset, pinnedScrollOffset, props.style, isRtl]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGenericColumnHeaderItem.GridGenericColumnHeaderItem, (0, _extends2.default)({
     ref: headerCellRef,
     classes: classes,

package/components/columnHeaders/GridColumnHeaderItem.mjs

@@ -20,6 +20,7 @@ import { GridGenericColumnHeaderItem } from "./GridGenericColumnHeaderItem.mjs";
 import { isEventTargetInPortal } from "../../utils/domUtils.mjs";
 import { PinnedColumnPosition } from "../../internals/constants.mjs";
 import { attachPinnedStyle } from "../../internals/utils/index.mjs";
+import { usePinnedScrollOffset } from "../../hooks/utils/usePinnedScrollOffset.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -217,7 +218,8 @@ function GridColumnHeaderItem(props) {
     colDef
   }) : colDef.headerClassName;
   const label = colDef.headerName ?? colDef.field;
-  const style = React.useMemo(() => attachPinnedStyle(_extends({}, props.style), isRtl, pinnedPosition, pinnedOffset), [pinnedPosition, pinnedOffset, props.style, isRtl]);
+  const pinnedScrollOffset = usePinnedScrollOffset(apiRef, pinnedPosition);
+  const style = React.useMemo(() => attachPinnedStyle(_extends({}, props.style), isRtl, pinnedPosition, pinnedOffset !== undefined ? pinnedOffset + pinnedScrollOffset : undefined), [pinnedPosition, pinnedOffset, pinnedScrollOffset, props.style, isRtl]);
   return /*#__PURE__*/_jsx(GridGenericColumnHeaderItem, _extends({
     ref: headerCellRef,
     classes: classes,