@mui/x-data-grid 8.9.1 → 8.10.0

package/esm/colDef/gridCheckboxSelectionColDef.js

@@ -24,6 +24,7 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
     const rowId = gridRowIdSelector(apiRef, row);
     return apiRef.current.isRowSelected(rowId);
   },
+  rowSpanValueGetter: (_, row, column, apiRef) => gridRowIdSelector(apiRef, row),
   renderHeader: params => /*#__PURE__*/_jsx(GridHeaderCheckbox, _extends({}, params)),
   renderCell: params => /*#__PURE__*/_jsx(GridCellCheckboxRenderer, _extends({}, params))
 });

package/esm/components/GridDetailPanels.d.ts

@@ -1,5 +1,5 @@
-import type { VirtualScroller } from "../hooks/features/virtualization/useGridVirtualScroller.js";
+import type { VirtualScrollerCompat } from '@mui/x-virtualizer';
 export interface GridDetailPanelsProps {
-  virtualScroller: VirtualScroller;
+  virtualScroller: VirtualScrollerCompat;
 }
 export declare function GridDetailPanels(_: GridDetailPanelsProps): null;

package/esm/components/GridFooter.js

@@ -24,7 +24,7 @@ const GridFooter = forwardRef(function GridFooter(props, ref) {
     rowCount: totalTopLevelRowCount,
     visibleRowCount: visibleTopLevelRowCount
   })) : null;
-  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, {});
+  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, _extends({}, rootProps.slotProps?.pagination));
   return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({}, props, {
     ref: ref,
     children: [selectedRowCountElement, rowCountElement, paginationElement]

package/esm/components/GridPagination.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
@@ -59,7 +60,7 @@ function GridPagination() {
     }
   }
   const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
-  return /*#__PURE__*/_jsx(GridPaginationRoot, {
+  return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
     as: rootProps.slots.basePagination,
     count: rowCount,
     page: computedPage,
@@ -68,7 +69,7 @@ function GridPagination() {
     onPageChange: handlePageChange,
     onRowsPerPageChange: handlePageSizeChange,
     disabled: disabled
-  });
+  }, rootProps.slotProps?.basePagination));
 }
 process.env.NODE_ENV !== "production" ? GridPagination.propTypes = {
   // ----------------------------- Warning --------------------------------

package/esm/components/GridPinnedRows.d.ts

@@ -1,6 +1,6 @@
-import type { VirtualScroller } from "../hooks/features/virtualization/useGridVirtualScroller.js";
+import type { VirtualScrollerCompat } from '@mui/x-virtualizer';
 export interface GridPinnedRowsProps {
   position: 'top' | 'bottom';
-  virtualScroller: VirtualScroller;
+  virtualScroller: VirtualScrollerCompat;
 }
 export declare function GridPinnedRows(_: GridPinnedRowsProps): null;

package/esm/components/GridRow.js

@@ -25,6 +25,7 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD, PinnedColumnPosition } from "../interna
 import { gridSortModelSelector } from "../hooks/features/sorting/gridSortingSelector.js";
 import { gridRowMaximumTreeDepthSelector, gridRowNodeSelector } from "../hooks/features/rows/gridRowsSelector.js";
 import { gridEditRowsStateSelector, gridRowIsEditingSelector } from "../hooks/features/editing/gridEditingSelectors.js";
+import { gridIsRowDragActiveSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
 import { GridScrollbarFillerCell as ScrollbarFiller } from "./GridScrollbarFillerCell.js";
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
 import { useGridConfiguration } from "../hooks/utils/useGridConfiguration.js";
@@ -78,6 +79,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const rowReordering = rootProps.rowReordering;
   const isRowReorderingEnabled = useGridSelector(apiRef, isRowReorderingEnabledSelector, rowReordering);
+  const isRowDragActive = useGridSelector(apiRef, gridIsRowDragActiveSelector);
   const handleRef = useForkRef(ref, refProp);
   const rowNode = gridRowNodeSelector(apiRef, rowId);
   const editing = useGridSelector(apiRef, gridRowIsEditingSelector, {
@@ -202,6 +204,11 @@ 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) {
@@ -225,7 +232,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     const isReorderCell = column.field === '__reorder__';
     const canReorderColumn = !(disableColumnReorder || column.disableReorder);
     const canReorderRow = isRowReorderingEnabled && !sortModel.length && treeDepth <= 1;
-    const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
+    const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow || isRowDragActive);
     const cellIsNotVisible = pinnedPosition === PinnedColumnPosition.VIRTUAL;
     const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
     const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);

package/esm/components/cell/GridCell.js

@@ -14,6 +14,8 @@ import capitalize from '@mui/utils/capitalize';
 import { fastMemo } from '@mui/x-internals/fastMemo';
 import { useRtl } from '@mui/system/RtlProvider';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useStore } from '@mui/x-internals/store';
+import { Rowspan } from '@mui/x-virtualizer';
 import { doesSupportPreventScroll } from "../../utils/doesSupportPreventScroll.js";
 import { getDataGridUtilityClass, gridClasses } from "../../constants/gridClasses.js";
 import { GridCellModes } from "../../models/index.js";
@@ -22,7 +24,6 @@ import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { gridFocusCellSelector, gridTabIndexCellSelector } from "../../hooks/features/focus/gridFocusStateSelector.js";
 import { GridPinnedColumnPosition } from "../../hooks/features/columns/gridColumnsInterfaces.js";
 import { PinnedColumnPosition } from "../../internals/constants.js";
-import { gridRowSpanningHiddenCellsSelector, gridRowSpanningSpannedCellsSelector } from "../../hooks/features/rows/gridRowSpanningSelectors.js";
 import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
 import { gridEditCellStateSelector } from "../../hooks/features/editing/gridEditingSelectors.js";
 import { attachPinnedStyle } from "../../internals/utils/index.js";
@@ -116,8 +117,9 @@ const GridCell = forwardRef(function GridCell(props, ref) {
     id: rowId,
     field
   }));
-  const hiddenCells = useGridSelector(apiRef, gridRowSpanningHiddenCellsSelector);
-  const spannedCells = useGridSelector(apiRef, gridRowSpanningSpannedCellsSelector);
+  const store = apiRef.current.virtualizer.store;
+  const hiddenCells = useStore(store, Rowspan.selectors.hiddenCells);
+  const spannedCells = useStore(store, Rowspan.selectors.spannedCells);
   const {
     hasFocus,
     isEditable = false,
@@ -186,8 +188,8 @@ const GridCell = forwardRef(function GridCell(props, ref) {
       propHandler(event);
     }
   }, [apiRef, field, rowId]);
-  const isCellRowSpanned = hiddenCells[rowId]?.[field] ?? false;
-  const rowSpan = spannedCells[rowId]?.[field] ?? 1;
+  const isCellRowSpanned = hiddenCells[rowId]?.[colIndex] ?? false;
+  const rowSpan = spannedCells[rowId]?.[colIndex] ?? 1;
   const style = React.useMemo(() => {
     if (isNotVisible) {
       return {

package/esm/components/cell/GridEditSingleSelectCell.js

@@ -14,7 +14,7 @@ import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 function isKeyboardEvent(event) {
-  return !!event.key;
+  return 'key' in event && !!event.key;
 }
 function GridEditSingleSelectCell(props) {
   const rootProps = useGridRootProps();

package/esm/components/columnsManagement/GridColumnsManagement.d.ts

@@ -1,10 +1,16 @@
 import * as React from 'react';
 import { TextFieldProps } from "../../models/gridBaseSlots.js";
+import type { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 import type { GridColDef } from "../../models/colDef/gridColDef.js";
 export interface GridColumnsManagementProps {
   sort?: 'asc' | 'desc';
   searchPredicate?: (column: GridColDef, searchValue: string) => boolean;
   searchInputProps?: Partial<TextFieldProps>;
+  /**
+   * The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu.
+   * @default 150
+   */
+  searchDebounceMs?: DataGridProcessedProps['columnFilterDebounceMs'];
   /**
    * If `true`, the column search field will be focused automatically.
    * If `false`, the first column switch input will be focused automatically.

package/esm/components/columnsManagement/GridColumnsManagement.js

@@ -5,6 +5,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
+import debounce from '@mui/utils/debounce';
 import { styled } from '@mui/material/styles';
 import { inputBaseClasses } from '@mui/material/InputBase';
 import { vars } from "../../constants/cssVariables.js";
@@ -52,8 +53,12 @@ function GridColumnsManagement(props) {
     disableResetButton = false,
     toggleAllMode = 'all',
     getTogglableColumns,
-    searchInputProps
+    searchInputProps,
+    searchDebounceMs = rootProps.columnFilterDebounceMs
   } = props;
+  const debouncedFilter = React.useMemo(() => debounce(value => {
+    setSearchValue(value);
+  }, searchDebounceMs ?? 150), [searchDebounceMs]);
   const isResetDisabled = React.useMemo(() => checkColumnVisibilityModelsSame(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
   const sortedColumns = React.useMemo(() => {
     switch (sort) {
@@ -98,8 +103,8 @@ function GridColumnsManagement(props) {
     return apiRef.current.setColumnVisibilityModel(newModel);
   }, [apiRef, columns, getTogglableColumns, toggleAllMode, currentColumns]);
   const handleSearchValueChange = React.useCallback(event => {
-    setSearchValue(event.target.value);
-  }, []);
+    debouncedFilter(event.target.value);
+  }, [debouncedFilter]);
   const hideableColumns = React.useMemo(() => currentColumns.filter(col => col.hideable), [currentColumns]);
   const allHideableColumnsVisible = React.useMemo(() => hideableColumns.every(column => columnVisibilityModel[column.field] == null || columnVisibilityModel[column.field] !== false), [columnVisibilityModel, hideableColumns]);
   const allHideableColumnsHidden = React.useMemo(() => hideableColumns.every(column => columnVisibilityModel[column.field] === false), [columnVisibilityModel, hideableColumns]);
@@ -121,7 +126,10 @@ function GridColumnsManagement(props) {
   };
   const handleSearchReset = React.useCallback(() => {
     setSearchValue('');
-    searchInputRef.current?.focus();
+    if (searchInputRef.current) {
+      searchInputRef.current.value = '';
+      searchInputRef.current.focus();
+    }
   }, []);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(GridColumnsManagementHeader, {
@@ -133,7 +141,6 @@ function GridColumnsManagement(props) {
         placeholder: apiRef.current.getLocaleText('columnsManagementSearchTitle'),
         inputRef: searchInputRef,
         className: classes.searchInput,
-        value: searchValue,
         onChange: handleSearchValueChange,
         size: "small",
         type: "search",
@@ -236,6 +243,11 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    * @returns {GridColDef['field'][]} The list of togglable columns' field names.
    */
   getTogglableColumns: PropTypes.func,
+  /**
+   * The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu.
+   * @default 150
+   */
+  searchDebounceMs: PropTypes.number,
   searchInputProps: PropTypes.object,
   searchPredicate: PropTypes.func,
   sort: PropTypes.oneOf(['asc', 'desc']),

package/esm/components/containers/GridRootStyles.d.ts

@@ -2,4 +2,4 @@ import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 export type OwnerState = DataGridProcessedProps;
 export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   ownerState: OwnerState;
-}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;

package/esm/components/toolbarV8/Toolbar.d.ts

@@ -6,7 +6,7 @@ export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
    */
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 };
-declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | keyof React.ClassAttributes<HTMLDivElement>>, {}>;
+declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 /**
  * The top level Toolbar component that provides context to child components.
  * It renders a styled `<div />` element.

package/esm/components/virtualization/GridVirtualScroller.js

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { styled } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
 import { gridHasBottomFillerSelector, gridHasScrollXSelector, gridHasScrollYSelector } from "../../hooks/features/dimensions/gridDimensionsSelectors.js";
+import { gridRowTreeSelector } from "../../hooks/features/rows/index.js";
 import { GridScrollArea } from "../GridScrollArea.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
-import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
+import { useGridPrivateApiContext } from "../../hooks/utils/useGridPrivateApiContext.js";
 import { useGridSelector } from "../../hooks/utils/useGridSelector.js";
 import { getDataGridUtilityClass } from "../../constants/gridClasses.js";
-import { useGridVirtualScroller } from "../../hooks/features/virtualization/useGridVirtualScroller.js";
 import { useGridOverlays } from "../../hooks/features/overlays/useGridOverlays.js";
 import { GridHeaders } from "../GridHeaders.js";
 import { GridMainContainer as Container } from "./GridMainContainer.js";
@@ -61,7 +61,7 @@ const Scroller = styled('div', {
 });
 const hasPinnedRightSelector = apiRef => apiRef.current.state.dimensions.rightPinnedWidth > 0;
 function GridVirtualScroller(props) {
-  const apiRef = useGridApiContext();
+  const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const hasScrollY = useGridSelector(apiRef, gridHasScrollYSelector);
   const hasScrollX = useGridSelector(apiRef, gridHasScrollXSelector);
@@ -77,7 +77,7 @@ function GridVirtualScroller(props) {
     hasPinnedRight
   }, overlaysProps);
   const classes = useUtilityClasses(ownerState);
-  const virtualScroller = useGridVirtualScroller();
+  const virtualScroller = apiRef.current.virtualizer.api.useVirtualization().getters;
   const {
     getContainerProps,
     getScrollerProps,
@@ -88,7 +88,7 @@ function GridVirtualScroller(props) {
     getRows,
     getScrollAreaProps
   } = virtualScroller;
-  const rows = getRows();
+  const rows = getRows(undefined, gridRowTreeSelector(apiRef));
   return /*#__PURE__*/_jsxs(Container, _extends({
     className: classes.root
   }, getContainerProps(), {

package/esm/constants/dataGridPropsDefaultValues.js

@@ -10,6 +10,7 @@ export const DATA_GRID_PROPS_DEFAULT_VALUES = {
   checkboxSelectionVisibleOnly: false,
   clipboardCopyCellDelimiter: '\t',
   columnBufferPx: 150,
+  columnFilterDebounceMs: 150,
   columnHeaderHeight: 56,
   disableAutosize: false,
   disableColumnFilter: false,

package/esm/hooks/core/useGridVirtualizer.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from '@mui/x-internals/types';
+import { GridPrivateApiCommunity } from "../../models/api/gridApiCommunity.js";
+import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
+type RootProps = DataGridProcessedProps;
+/**
+ * Virtualizer setup
+ */
+export declare function useGridVirtualizer(apiRef: RefObject<GridPrivateApiCommunity>, rootProps: RootProps): void;
+export {};

package/esm/hooks/core/useGridVirtualizer.js

@@ -0,0 +1,223 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import useEventCallback from '@mui/utils/useEventCallback';
+import { useRtl } from '@mui/system/RtlProvider';
+import { roundToDecimalPlaces } from '@mui/x-internals/math';
+import { useStoreEffect } from '@mui/x-internals/store';
+import { useVirtualizer } 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 { gridDensityFactorSelector } from "../features/density/index.js";
+import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridHasColSpanSelector } from "../features/columns/gridColumnsSelector.js";
+import { gridPinnedRowsSelector, gridRowCountSelector } from "../features/rows/gridRowsSelector.js";
+import { useGridVisibleRows } from "../utils/useGridVisibleRows.js";
+import { gridPaginationSelector } from "../features/pagination/index.js";
+import { gridFocusedVirtualCellSelector } from "../features/virtualization/gridFocusedVirtualCellSelector.js";
+import { gridRowSelectionManagerSelector } from "../features/rowSelection/index.js";
+import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../constants/dataGridPropsDefaultValues.js";
+import { getValidRowHeight, minimalContentHeight, rowHeightWarning } from "../features/rows/gridRowsUtils.js";
+import { getTotalHeaderHeight } from "../features/columns/gridColumnsUtils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function identity(x) {
+  return x;
+}
+const columnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector, (visibleColumns, positions) => {
+  const colCount = visibleColumns.length;
+  if (colCount === 0) {
+    return 0;
+  }
+  return roundToDecimalPlaces(positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth, 1);
+});
+
+/**
+ * Virtualizer setup
+ */
+export function useGridVirtualizer(apiRef, rootProps) {
+  const isRtl = useRtl();
+  const {
+    listView
+  } = rootProps;
+  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
+  const pinnedColumns = gridVisiblePinnedColumnDefinitionsSelector(apiRef);
+  const rowSelectionManager = useGridSelector(apiRef, gridRowSelectionManagerSelector);
+  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 {
+    autoHeight
+  } = rootProps;
+  const scrollReset = listView;
+
+  // <DIMENSIONS>
+  const density = useGridSelector(apiRef, gridDensityFactorSelector);
+  const baseRowHeight = getValidRowHeight(rootProps.rowHeight, DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight, rowHeightWarning);
+  const rowHeight = Math.floor(baseRowHeight * density);
+  const headerHeight = Math.floor(rootProps.columnHeaderHeight * density);
+  const groupHeaderHeight = Math.floor((rootProps.columnGroupHeaderHeight ?? rootProps.columnHeaderHeight) * density);
+  const headerFilterHeight = Math.floor((rootProps.headerFilterHeight ?? rootProps.columnHeaderHeight) * density);
+  const columnsTotalWidth = useGridSelector(apiRef, columnsTotalWidthSelector);
+  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 = {
+    rowHeight,
+    headerHeight,
+    groupHeaderHeight,
+    headerFilterHeight,
+    columnsTotalWidth,
+    headersTotalHeight,
+    leftPinnedWidth,
+    rightPinnedWidth
+  };
+
+  // </DIMENSIONS>
+
+  // <ROWS_META>
+  const dataRowCount = useGridSelector(apiRef, gridRowCountSelector);
+  const pagination = useGridSelector(apiRef, gridPaginationSelector);
+  const rowCount = Math.min(pagination.enabled ? pagination.paginationModel.pageSize : dataRowCount, dataRowCount);
+  const {
+    getRowHeight,
+    getEstimatedRowHeight,
+    getRowSpacing
+  } = rootProps;
+  // </ROWS_META>
+
+  const focusedVirtualCell = useGridSelector(apiRef, gridFocusedVirtualCellSelector);
+  const virtualizer = useVirtualizer({
+    scrollbarSize: rootProps.scrollbarSize,
+    dimensions,
+    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,
+    getRowHeight: React.useMemo(() => {
+      if (!getRowHeight) {
+        return undefined;
+      }
+      return rowEntry => getRowHeight(_extends({}, rowEntry, {
+        densityFactor: density
+      }));
+    }, [getRowHeight, density]),
+    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]),
+    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 => {
+      apiRef.current.publishEvent('virtualScrollerWheel', {}, event);
+    }),
+    onTouchMove: useEventCallback(event => {
+      apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
+    }),
+    onRenderContextChange: useEventCallback(nextRenderContext => {
+      apiRef.current.publishEvent('renderedRowsIntervalChange', nextRenderContext);
+    }),
+    onScrollChange: (scrollPosition, nextRenderContext) => {
+      apiRef.current.publishEvent('scrollPositionChange', {
+        top: scrollPosition.top,
+        left: scrollPosition.left,
+        renderContext: nextRenderContext
+      });
+    },
+    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,
+      index: params.rowIndex,
+      selected: isRowSelected(params.id),
+      offsetLeft: params.offsetLeft,
+      columnsTotalWidth: columnsTotalWidth,
+      rowHeight: params.baseRowHeight,
+      pinnedColumns: pinnedColumns,
+      visibleColumns: params.columns,
+      firstColumnIndex: params.firstColumnIndex,
+      lastColumnIndex: params.lastColumnIndex,
+      focusedColumnIndex: params.focusedColumnIndex,
+      isFirstVisible: params.isFirstVisible,
+      isLastVisible: params.isLastVisible,
+      isNotVisible: params.isVirtualFocusRow,
+      showBottomBorder: params.showBottomBorder,
+      scrollbarWidth: verticalScrollbarWidth,
+      gridHasFiller: hasFiller
+    }, rootProps.slotProps?.row), params.id),
+    renderInfiniteLoadingTrigger: id => apiRef.current.getInfiniteLoadingTriggerElement?.({
+      lastRowId: id
+    })
+  });
+
+  // HACK: Keep the grid's store in sync with the virtualizer store. We set up the
+  // subscription in the render phase rather than in an effect because other grid
+  // initialization code runs between those two moments.
+  //
+  // TODO(v9): Remove this
+  useFirstRender(() => {
+    apiRef.current.store.state.dimensions = virtualizer.store.state.dimensions;
+    apiRef.current.store.state.rowsMeta = virtualizer.store.state.rowsMeta;
+    apiRef.current.store.state.virtualization = virtualizer.store.state.virtualization;
+  });
+  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
+      }));
+    }
+    if (state.virtualization !== apiRef.current.state.virtualization) {
+      apiRef.current.setState(gridState => _extends({}, gridState, {
+        virtualization: state.virtualization
+      }));
+    }
+  });
+  apiRef.current.register('private', {
+    virtualizer
+  });
+}

package/esm/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -31,7 +31,7 @@ export interface GetHeadersParams {
 type OwnerState = DataGridProcessedProps;
 export declare const GridColumnHeaderRow: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   ownerState: OwnerState;
-}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | keyof React.ClassAttributes<HTMLDivElement>>, {}>;
+}, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
   renderContext: GridColumnsRenderContext;
   leftRenderContext: {

package/esm/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/material/styles';
+import { computeOffsetLeft } from '@mui/x-virtualizer';
 import { useGridSelector } from "../../utils/index.js";
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
@@ -11,7 +12,6 @@ import { useGridEvent } from "../../utils/useGridEvent.js";
 import { GridColumnHeaderItem } from "../../../components/columnHeaders/GridColumnHeaderItem.js";
 import { gridColumnsTotalWidthSelector, gridGroupHeaderHeightSelector, gridHasFillerSelector, gridHeaderHeightSelector, gridVerticalScrollbarWidthSelector } from "../dimensions/gridDimensionsSelectors.js";
 import { gridRenderContextColumnsSelector } from "../virtualization/index.js";
-import { computeOffsetLeft } from "../virtualization/useGridVirtualScroller.js";
 import { GridColumnGroupHeader } from "../../../components/columnHeaders/GridColumnGroupHeader.js";
 import { gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnLookupSelector } from "../columns/index.js";
 import { gridColumnGroupsUnwrappedModelSelector } from "../columnGrouping/gridColumnGroupsSelector.js";
@@ -85,7 +85,8 @@ export const useGridColumnHeaders = props => {
       renderContext: currentContext = renderContext
     } = params || {};
     const firstColumnToRender = currentContext.firstColumnIndex;
-    const lastColumnToRender = currentContext.lastColumnIndex;
+    // HACK: renderContext ins't always synchronized, this should be handled properly.
+    const lastColumnToRender = Math.min(currentContext.lastColumnIndex, visibleColumns.length);
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,