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

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,

package/components/containers/GridRootStyles.js

@@ -108,6 +108,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     '--DataGrid-headersTotalHeight': '0px',
     '--DataGrid-topContainerHeight': '0px',
     '--DataGrid-bottomContainerHeight': '0px',
+    '--DataGrid-horizontalFiller': '0px',
     flex: 1,
     boxSizing: 'border-box',
     position: 'relative',
@@ -225,7 +226,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       position: 'relative',
       display: 'flex',
       alignItems: 'center',
-      backgroundColor: headerBackground
+      backgroundColor: headerBackground,
+      flex: '0 0 auto'
     },
     [`& .${_gridClasses.gridClasses.columnHeader} .${_gridClasses.gridClasses.sortButton}`]: {
       backgroundColor: _cssVariables.vars.header.background.base
@@ -433,6 +435,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     /* Row styles */
     [`.${_gridClasses.gridClasses.row}`]: {
       display: 'flex',
+      position: 'relative',
       width: 'var(--DataGrid-rowWidth)',
       breakInside: 'avoid',
       // Avoid the row to be broken in two different print pages.
@@ -451,8 +454,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       [`&.${_gridClasses.gridClasses.rowSkeleton}:hover`]: {
         backgroundColor: 'transparent'
       },
-      '&.Mui-selected': selectedStyles,
-      position: 'relative'
+      '&.Mui-selected': selectedStyles
     },
     /* Cell styles */
     [`& .${_gridClasses.gridClasses.cell}`]: {
@@ -469,6 +471,26 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       textOverflow: 'ellipsis',
       '&.Mui-selected': selectedStyles
     },
+    /* Default range border styles using box-shadow to avoid layout shift */
+    [`& .${_gridClasses.gridClasses.cell}.Mui-selected`]: {
+      '--range-top': '0 0 0 0 transparent',
+      '--range-bottom': '0 0 0 0 transparent',
+      '--range-left': '0 0 0 0 transparent',
+      '--range-right': '0 0 0 0 transparent',
+      boxShadow: 'var(--range-top), var(--range-bottom), var(--range-left), var(--range-right)'
+    },
+    [`& .${_gridClasses.gridClasses['cell--rangeTop']}`]: {
+      '--range-top': `inset 0 2px 0 0 ${_cssVariables.vars.colors.interactive.focus}`
+    },
+    [`& .${_gridClasses.gridClasses['cell--rangeBottom']}`]: {
+      '--range-bottom': `inset 0 -2px 0 0 ${_cssVariables.vars.colors.interactive.focus}`
+    },
+    [`& .${_gridClasses.gridClasses['cell--rangeLeft']}`]: {
+      '--range-left': `inset 2px 0 0 0 ${_cssVariables.vars.colors.interactive.focus}`
+    },
+    [`& .${_gridClasses.gridClasses['cell--rangeRight']}`]: {
+      '--range-right': `inset -2px 0 0 0 ${_cssVariables.vars.colors.interactive.focus}`
+    },
     [`& .${_gridClasses.gridClasses['virtualScrollerContent--overflowed']} .${_gridClasses.gridClasses['row--lastVisible']} .${_gridClasses.gridClasses.cell}`]: {
       borderTopColor: 'transparent'
     },
@@ -680,16 +702,18 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['filler--borderBottom']}`]: {
       borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
     },
+    [`& .${_gridClasses.gridClasses['filler--horizontal']}`]: {
+      width: 'var(--DataGrid-horizontalFiller)'
+    },
     [`& .${_gridClasses.gridClasses.columnHeaders} .${_gridClasses.gridClasses.filler}`]: {
       backgroundColor: headerBackground
     },
     /* Used when skeleton/no columns overlay is visible */
     [`& .${_gridClasses.gridClasses['main--hiddenContent']}`]: {
-      [`& .${_gridClasses.gridClasses.virtualScrollerContent}`]: {
+      [`& .${_gridClasses.gridClasses.virtualScrollerRenderZone}`]: {
         // We use visibility hidden so that the virtual scroller content retains its height.
         // Position fixed is used to remove the virtual scroller content from the flow.
         // https://github.com/mui/mui-x/issues/14061
-        position: 'fixed',
         visibility: 'hidden'
       },
       // Hide grid content
@@ -697,11 +721,68 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         display: 'none'
       }
     },
+    /* Fill handle styles */
+    [`& .${_gridClasses.gridClasses['cell--withFillHandle']}`]: {
+      position: 'relative',
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        bottom: 0,
+        insetInlineEnd: 0,
+        width: 7,
+        height: 7,
+        backgroundColor: _cssVariables.vars.colors.interactive.focus,
+        cursor: 'crosshair',
+        zIndex: 50
+      }
+    },
+    [`& .${_gridClasses.gridClasses['cell--fillPreview']}`]: {
+      backgroundColor: `color-mix(in srgb, ${_cssVariables.vars.colors.interactive.focus} 8%, transparent)`
+    },
+    [`& .${_gridClasses.gridClasses['cell--fillPreviewTop']}`]: {
+      borderTop: `1px dashed ${_cssVariables.vars.colors.interactive.focus}`
+    },
+    [`& .${_gridClasses.gridClasses['cell--fillPreviewBottom']}`]: {
+      borderBottom: `1px dashed ${_cssVariables.vars.colors.interactive.focus}`
+    },
+    [`& .${_gridClasses.gridClasses['cell--fillPreviewLeft']}`]: {
+      borderLeft: `1px dashed ${_cssVariables.vars.colors.interactive.focus}`
+    },
+    [`& .${_gridClasses.gridClasses['cell--fillPreviewRight']}`]: {
+      borderRight: `1px dashed ${_cssVariables.vars.colors.interactive.focus}`
+    },
     [`& .${_gridClasses.gridClasses['row--beingDragged']}`]: {
       color: _cssVariables.vars.colors.foreground.disabled,
       '&:hover': {
         backgroundColor: 'transparent'
       }
+    },
+    /* Controlled layout overrides (absolute positioning for pinned elements) */
+    [`& .${_gridClasses.gridClasses['virtualizer--layoutControlled']} .${_gridClasses.gridClasses['columnHeader--pinnedLeft']},
+      & .${_gridClasses.gridClasses['virtualizer--layoutControlled']} .${_gridClasses.gridClasses['columnHeader--pinnedRight']}`]: {
+      position: 'absolute',
+      height: 'var(--height)'
+    },
+    [`& .${_gridClasses.gridClasses['virtualizer--layoutControlled']} .${_gridClasses.gridClasses['cell--pinnedLeft']},
+      & .${_gridClasses.gridClasses['virtualizer--layoutControlled']} .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
+      position: 'absolute'
+    },
+    [`& .${_gridClasses.gridClasses['virtualizer--layoutControlled']} .${_gridClasses.gridClasses.row}`]: {
+      position: 'static'
+    },
+    [`& .${_gridClasses.gridClasses['virtualizer--layoutControlled']} .${_gridClasses.gridClasses['scrollbarFiller--pinnedRight']}`]: {
+      position: 'absolute',
+      height: 'var(--height)'
+    },
+    [`& .${_gridClasses.gridClasses['virtualizer--layoutControlled']} .${_gridClasses.gridClasses.virtualScrollerRenderZone}`]: {
+      position: 'static',
+      width: 'fit-content'
+    },
+    [`& .${_gridClasses.gridClasses['virtualizer--layoutControlled']} .${_gridClasses.gridClasses['container--top']}`]: {
+      width: 'fit-content'
+    },
+    [`& .${_gridClasses.gridClasses['virtualizer--layoutControlled']} .${_gridClasses.gridClasses['container--bottom']}`]: {
+      width: 'fit-content'
     }
   };
   return gridStyle;

package/components/containers/GridRootStyles.mjs

@@ -102,6 +102,7 @@ export const GridRootStyles = styled('div', {
     '--DataGrid-headersTotalHeight': '0px',
     '--DataGrid-topContainerHeight': '0px',
     '--DataGrid-bottomContainerHeight': '0px',
+    '--DataGrid-horizontalFiller': '0px',
     flex: 1,
     boxSizing: 'border-box',
     position: 'relative',
@@ -219,7 +220,8 @@ export const GridRootStyles = styled('div', {
       position: 'relative',
       display: 'flex',
       alignItems: 'center',
-      backgroundColor: headerBackground
+      backgroundColor: headerBackground,
+      flex: '0 0 auto'
     },
     [`& .${c.columnHeader} .${c.sortButton}`]: {
       backgroundColor: vars.header.background.base
@@ -427,6 +429,7 @@ export const GridRootStyles = styled('div', {
     /* Row styles */
     [`.${c.row}`]: {
       display: 'flex',
+      position: 'relative',
       width: 'var(--DataGrid-rowWidth)',
       breakInside: 'avoid',
       // Avoid the row to be broken in two different print pages.
@@ -445,8 +448,7 @@ export const GridRootStyles = styled('div', {
       [`&.${c.rowSkeleton}:hover`]: {
         backgroundColor: 'transparent'
       },
-      '&.Mui-selected': selectedStyles,
-      position: 'relative'
+      '&.Mui-selected': selectedStyles
     },
     /* Cell styles */
     [`& .${c.cell}`]: {
@@ -463,6 +465,26 @@ export const GridRootStyles = styled('div', {
       textOverflow: 'ellipsis',
       '&.Mui-selected': selectedStyles
     },
+    /* Default range border styles using box-shadow to avoid layout shift */
+    [`& .${c.cell}.Mui-selected`]: {
+      '--range-top': '0 0 0 0 transparent',
+      '--range-bottom': '0 0 0 0 transparent',
+      '--range-left': '0 0 0 0 transparent',
+      '--range-right': '0 0 0 0 transparent',
+      boxShadow: 'var(--range-top), var(--range-bottom), var(--range-left), var(--range-right)'
+    },
+    [`& .${c['cell--rangeTop']}`]: {
+      '--range-top': `inset 0 2px 0 0 ${vars.colors.interactive.focus}`
+    },
+    [`& .${c['cell--rangeBottom']}`]: {
+      '--range-bottom': `inset 0 -2px 0 0 ${vars.colors.interactive.focus}`
+    },
+    [`& .${c['cell--rangeLeft']}`]: {
+      '--range-left': `inset 2px 0 0 0 ${vars.colors.interactive.focus}`
+    },
+    [`& .${c['cell--rangeRight']}`]: {
+      '--range-right': `inset -2px 0 0 0 ${vars.colors.interactive.focus}`
+    },
     [`& .${c['virtualScrollerContent--overflowed']} .${c['row--lastVisible']} .${c.cell}`]: {
       borderTopColor: 'transparent'
     },
@@ -674,16 +696,18 @@ export const GridRootStyles = styled('div', {
     [`& .${c['filler--borderBottom']}`]: {
       borderBottom: '1px solid var(--DataGrid-rowBorderColor)'
     },
+    [`& .${c['filler--horizontal']}`]: {
+      width: 'var(--DataGrid-horizontalFiller)'
+    },
     [`& .${c.columnHeaders} .${c.filler}`]: {
       backgroundColor: headerBackground
     },
     /* Used when skeleton/no columns overlay is visible */
     [`& .${c['main--hiddenContent']}`]: {
-      [`& .${c.virtualScrollerContent}`]: {
+      [`& .${c.virtualScrollerRenderZone}`]: {
         // We use visibility hidden so that the virtual scroller content retains its height.
         // Position fixed is used to remove the virtual scroller content from the flow.
         // https://github.com/mui/mui-x/issues/14061
-        position: 'fixed',
         visibility: 'hidden'
       },
       // Hide grid content
@@ -691,11 +715,68 @@ export const GridRootStyles = styled('div', {
         display: 'none'
       }
     },
+    /* Fill handle styles */
+    [`& .${c['cell--withFillHandle']}`]: {
+      position: 'relative',
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        bottom: 0,
+        insetInlineEnd: 0,
+        width: 7,
+        height: 7,
+        backgroundColor: vars.colors.interactive.focus,
+        cursor: 'crosshair',
+        zIndex: 50
+      }
+    },
+    [`& .${c['cell--fillPreview']}`]: {
+      backgroundColor: `color-mix(in srgb, ${vars.colors.interactive.focus} 8%, transparent)`
+    },
+    [`& .${c['cell--fillPreviewTop']}`]: {
+      borderTop: `1px dashed ${vars.colors.interactive.focus}`
+    },
+    [`& .${c['cell--fillPreviewBottom']}`]: {
+      borderBottom: `1px dashed ${vars.colors.interactive.focus}`
+    },
+    [`& .${c['cell--fillPreviewLeft']}`]: {
+      borderLeft: `1px dashed ${vars.colors.interactive.focus}`
+    },
+    [`& .${c['cell--fillPreviewRight']}`]: {
+      borderRight: `1px dashed ${vars.colors.interactive.focus}`
+    },
     [`& .${c['row--beingDragged']}`]: {
       color: vars.colors.foreground.disabled,
       '&:hover': {
         backgroundColor: 'transparent'
       }
+    },
+    /* Controlled layout overrides (absolute positioning for pinned elements) */
+    [`& .${c['virtualizer--layoutControlled']} .${c['columnHeader--pinnedLeft']},
+      & .${c['virtualizer--layoutControlled']} .${c['columnHeader--pinnedRight']}`]: {
+      position: 'absolute',
+      height: 'var(--height)'
+    },
+    [`& .${c['virtualizer--layoutControlled']} .${c['cell--pinnedLeft']},
+      & .${c['virtualizer--layoutControlled']} .${c['cell--pinnedRight']}`]: {
+      position: 'absolute'
+    },
+    [`& .${c['virtualizer--layoutControlled']} .${c.row}`]: {
+      position: 'static'
+    },
+    [`& .${c['virtualizer--layoutControlled']} .${c['scrollbarFiller--pinnedRight']}`]: {
+      position: 'absolute',
+      height: 'var(--height)'
+    },
+    [`& .${c['virtualizer--layoutControlled']} .${c.virtualScrollerRenderZone}`]: {
+      position: 'static',
+      width: 'fit-content'
+    },
+    [`& .${c['virtualizer--layoutControlled']} .${c['container--top']}`]: {
+      width: 'fit-content'
+    },
+    [`& .${c['virtualizer--layoutControlled']} .${c['container--bottom']}`]: {
+      width: 'fit-content'
     }
   };
   return gridStyle;

package/components/index.d.mts

@@ -23,4 +23,6 @@ export * from "./columnsPanel/index.mjs";
 export * from "./export/index.mjs";
 export * from "./filterPanel/index.mjs";
 export * from "./toolbarV8/index.mjs";
-export * from "./quickFilter/index.mjs";
+export * from "./quickFilter/index.mjs";
+export { GridColumnUnsortedIcon } from "./GridColumnUnsortedIcon.mjs";
+export type { GridColumnUnsortedIconProps } from "./GridColumnUnsortedIcon.mjs";

package/components/index.d.ts

@@ -23,4 +23,6 @@ export * from "./columnsPanel/index.js";
 export * from "./export/index.js";
 export * from "./filterPanel/index.js";
 export * from "./toolbarV8/index.js";
-export * from "./quickFilter/index.js";
+export * from "./quickFilter/index.js";
+export { GridColumnUnsortedIcon } from "./GridColumnUnsortedIcon.js";
+export type { GridColumnUnsortedIconProps } from "./GridColumnUnsortedIcon.js";

package/components/index.js

@@ -4,8 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  GridPagination: true
+  GridPagination: true,
+  GridColumnUnsortedIcon: true
 };
+Object.defineProperty(exports, "GridColumnUnsortedIcon", {
+  enumerable: true,
+  get: function () {
+    return _GridColumnUnsortedIcon.GridColumnUnsortedIcon;
+  }
+});
 Object.defineProperty(exports, "GridPagination", {
   enumerable: true,
   get: function () {
@@ -312,4 +319,5 @@ Object.keys(_quickFilter).forEach(function (key) {
       return _quickFilter[key];
     }
   });
-});
+});
+var _GridColumnUnsortedIcon = require("./GridColumnUnsortedIcon");

package/components/index.mjs

@@ -23,4 +23,5 @@ export * from "./columnsPanel/index.mjs";
 export * from "./export/index.mjs";
 export * from "./filterPanel/index.mjs";
 export * from "./toolbarV8/index.mjs";
-export * from "./quickFilter/index.mjs";
+export * from "./quickFilter/index.mjs";
+export { GridColumnUnsortedIcon } from "./GridColumnUnsortedIcon.mjs";

package/components/panel/filterPanel/GridFilterForm.js

@@ -322,7 +322,7 @@ const GridFilterForm = exports.GridFilterForm = (0, _forwardRef.forwardRef)(func
       size: "small",
       labelId: columnSelectLabelId,
       id: columnSelectId,
-      label: apiRef.current.getLocaleText('filterPanelColumns'),
+      label: apiRef.current.getLocaleText('filterPanelColumn'),
       value: selectedField ?? '',
       onChange: changeColumn,
       native: isBaseSelectNative,

package/components/panel/filterPanel/GridFilterForm.mjs

@@ -315,7 +315,7 @@ const GridFilterForm = forwardRef(function GridFilterForm(props, ref) {
       size: "small",
       labelId: columnSelectLabelId,
       id: columnSelectId,
-      label: apiRef.current.getLocaleText('filterPanelColumns'),
+      label: apiRef.current.getLocaleText('filterPanelColumn'),
       value: selectedField ?? '',
       onChange: changeColumn,
       native: isBaseSelectNative,

package/components/virtualization/GridBottomContainer.js

@@ -25,7 +25,10 @@ const Element = (0, _styles.styled)('div', {
 })({
   position: 'sticky',
   zIndex: 40,
-  bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
+  bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))',
+  [`.${_gridClasses.gridClasses['virtualizer--layoutControlled']} &`]: {
+    position: 'absolute'
+  }
 });
 function GridBottomContainer(props) {
   const classes = useUtilityClasses();

package/components/virtualization/GridBottomContainer.mjs

@@ -17,7 +17,10 @@ const Element = styled('div', {
 })({
   position: 'sticky',
   zIndex: 40,
-  bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))'
+  bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))',
+  [`.${gridClasses['virtualizer--layoutControlled']} &`]: {
+    position: 'absolute'
+  }
 });
 export function GridBottomContainer(props) {
   const classes = useUtilityClasses();

package/components/virtualization/GridVirtualScroller.js

@@ -10,6 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _xVirtualizer = require("@mui/x-virtualizer");
 var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
 var _rows = require("../../hooks/features/rows");
 var _GridScrollArea = require("../GridScrollArea");
@@ -58,9 +60,9 @@ const Scroller = (0, _styles.styled)('div', {
   height: '100%',
   flexGrow: 1,
   overflow: 'scroll',
-  scrollbarWidth: 'none' /* Firefox */,
   display: 'flex',
   flexDirection: 'column',
+  scrollbarWidth: 'none' /* Firefox */,
   '&::-webkit-scrollbar': {
     display: 'none' /* Safari and Chrome */
   },
@@ -70,6 +72,23 @@ const Scroller = (0, _styles.styled)('div', {
   // See https://github.com/mui/mui-x/issues/10547
   zIndex: 0
 });
+const Viewport = (0, _styles.styled)('div', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
+  display: 'contents',
+  [`.${_gridClasses.gridClasses['virtualizer--layoutControlled']} &`]: {
+    display: 'inline-block',
+    position: 'sticky',
+    top: 0,
+    left: 0,
+    overflow: 'hidden',
+    scrollbarWidth: 'none' /* Firefox */,
+    '&::-webkit-scrollbar': {
+      display: 'none' /* Safari and Chrome */
+    }
+  }
+});
 const hasPinnedRightSelector = apiRef => apiRef.current.state.dimensions.rightPinnedWidth > 0;
 function GridVirtualScroller(props) {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
@@ -91,20 +110,26 @@ function GridVirtualScroller(props) {
     loadingOverlayVariant
   };
   const classes = useUtilityClasses(ownerState);
-  const virtualScroller = (0, _useGridVirtualizer.useGridVirtualizer)().api.getters;
+  const virtualizer = (0, _useGridVirtualizer.useGridVirtualizer)();
+  const layoutMode = virtualizer.store.use(_xVirtualizer.Virtualization.selectors.layoutMode);
+  const hasContentFiller = layoutMode === 'uncontrolled' && loadingOverlayVariant !== 'skeleton';
   const {
     getContainerProps,
     getScrollerProps,
+    getScrollerContentProps,
+    getViewportProps,
     getContentProps,
     getPositionerProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
     getRows,
-    getScrollAreaProps
-  } = virtualScroller;
+    getScrollAreaProps,
+    getContainerVerticalProps
+  } = virtualizer.api.getters;
   const rows = getRows(undefined, (0, _rows.gridRowTreeSelector)(apiRef));
+  const containerVerticalProps = getContainerVerticalProps();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridMainContainer.GridMainContainer, (0, _extends2.default)({
-    className: classes.root
+    className: (0, _clsx.default)(classes.root, layoutMode === 'controlled' && _gridClasses.gridClasses['virtualizer--layoutControlled'])
   }, getContainerProps(), {
     ownerState: ownerState,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, (0, _extends2.default)({
@@ -115,35 +140,35 @@ function GridVirtualScroller(props) {
       scrollDirection: "up"
     }, getScrollAreaProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollArea.GridScrollArea, (0, _extends2.default)({
       scrollDirection: "down"
-    }, getScrollAreaProps())), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Scroller, (0, _extends2.default)({
+    }, getScrollAreaProps())), /*#__PURE__*/(0, _jsxRuntime.jsx)(Scroller, (0, _extends2.default)({
       className: classes.scroller
     }, getScrollerProps(), {
       ownerState: ownerState,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridTopContainer.GridTopContainer, {
-        children: [!rootProps.listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaders.GridHeaders, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
-          position: "top",
-          virtualScroller: virtualScroller
-        })]
-      }), overlayType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlays.GridOverlayWrapper, {
-        overlayType: overlayType,
-        loadingOverlayVariant: loadingOverlayVariant,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, (0, _extends2.default)({}, rootProps.slotProps?.[overlayType]))
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, (0, _extends2.default)({
-          role: "rowgroup"
-        }, getPositionerProps(), {
-          children: [rows, /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.detailPanels, {
-            virtualScroller: virtualScroller
-          })]
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getScrollerContentProps(), {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Viewport, (0, _extends2.default)({}, getViewportProps(), {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridTopContainer.GridTopContainer, (0, _extends2.default)({}, containerVerticalProps, {
+            children: [!rootProps.listView && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaders.GridHeaders, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
+              position: "top"
+            })]
+          })), overlayType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridOverlays.GridOverlayWrapper, {
+            overlayType: overlayType,
+            loadingOverlayVariant: loadingOverlayVariant,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, (0, _extends2.default)({}, rootProps.slotProps?.[overlayType]))
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, (0, _extends2.default)({
+            role: "rowgroup"
+          }, getPositionerProps(), {
+            children: [rows, /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.detailPanels, {})]
+          })), hasContentFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _extends2.default)({
+            className: _gridClasses.gridClasses.contentFiller
+          }, getContentProps())), hasBottomFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {
+            rowsLength: rows.length
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.bottomContainer, (0, _extends2.default)({}, containerVerticalProps, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
+              position: "bottom"
+            })
+          }))]
         }))
-      })), hasBottomFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {
-        rowsLength: rows.length
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.bottomContainer, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pinnedRows, {
-          position: "bottom",
-          virtualScroller: virtualScroller
-        })
-      })]
+      }))
     })), hasScrollX && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [rootProps.pinnedColumnsSectionSeparator?.endsWith('shadow') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollShadows.GridScrollShadows, {
         position: "horizontal"