@mui/x-data-grid 8.9.1 → 8.9.2

package/esm/hooks/features/dimensions/useGridDimensions.js

@@ -2,11 +2,8 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import useEventCallback from '@mui/utils/useEventCallback';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
-import ownerDocument from '@mui/utils/ownerDocument';
-import { throttle } from '@mui/x-internals/throttle';
-import { isDeepEqual } from '@mui/x-internals/isDeepEqual';
+import { useStoreEffect } from '@mui/x-internals/store';
+import { Dimensions } from '@mui/x-virtualizer';
 import { useGridEventPriority } from "../../utils/useGridEvent.js";
 import { useGridApiMethod } from "../../utils/useGridApiMethod.js";
 import { createSelector } from "../../../utils/createSelector.js";
@@ -14,10 +11,6 @@ import { useGridLogger } from "../../utils/useGridLogger.js";
 import { gridColumnPositionsSelector, gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from "../columns/index.js";
 import { gridDimensionsSelector } from "./gridDimensionsSelectors.js";
 import { gridDensityFactorSelector } from "../density/index.js";
-import { gridRenderContextSelector } from "../virtualization/index.js";
-import { useGridSelector } from "../../utils/index.js";
-import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
-import { gridRowsMetaSelector } from "../rows/gridRowsMetaSelector.js";
 import { getValidRowHeight, rowHeightWarning } from "../rows/gridRowsUtils.js";
 import { getTotalHeaderHeight } from "../columns/gridColumnsUtils.js";
 import { DATA_GRID_PROPS_DEFAULT_VALUES } from "../../../constants/dataGridPropsDefaultValues.js";
@@ -66,148 +59,10 @@ const columnsTotalWidthSelector = createSelector(gridVisibleColumnDefinitionsSel
 export function useGridDimensions(apiRef, props) {
   const logger = useGridLogger(apiRef, 'useResizeContainer');
   const errorShown = React.useRef(false);
-  const rootDimensionsRef = React.useRef(EMPTY_SIZE);
-  const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
-  const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
-  const columnsTotalWidth = useGridSelector(apiRef, columnsTotalWidthSelector);
-  const isFirstSizing = React.useRef(true);
-  const {
-    rowHeight,
-    headerHeight,
-    groupHeaderHeight,
-    headerFilterHeight,
-    headersTotalHeight,
-    leftPinnedWidth,
-    rightPinnedWidth
-  } = getStaticDimensions(props, apiRef, densityFactor, pinnedColumns);
+  const virtualizer = apiRef.current.virtualizer;
+  const updateDimensions = virtualizer.api.updateDimensions;
+  const getViewportPageSize = virtualizer.api.getViewportPageSize;
   const getRootDimensions = React.useCallback(() => gridDimensionsSelector(apiRef), [apiRef]);
-  const setDimensions = React.useCallback(dimensions => {
-    apiRef.current.setState(state => _extends({}, state, {
-      dimensions
-    }));
-    if (apiRef.current.rootElementRef.current) {
-      setCSSVariables(apiRef.current.rootElementRef.current, gridDimensionsSelector(apiRef));
-    }
-  }, [apiRef]);
-  const getViewportPageSize = React.useCallback(() => {
-    const dimensions = gridDimensionsSelector(apiRef);
-    if (!dimensions.isReady) {
-      return 0;
-    }
-    const currentPage = getVisibleRows(apiRef);
-
-    // TODO: Use a combination of scrollTop, dimensions.viewportInnerSize.height and rowsMeta.possitions
-    // to find out the maximum number of rows that can fit in the visible part of the grid
-    if (props.getRowHeight) {
-      const renderContext = gridRenderContextSelector(apiRef);
-      const viewportPageSize = renderContext.lastRowIndex - renderContext.firstRowIndex;
-      return Math.min(viewportPageSize - 1, currentPage.rows.length);
-    }
-    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
-    return Math.min(maximumPageSizeWithoutScrollBar, currentPage.rows.length);
-  }, [apiRef, props.getRowHeight, rowHeight]);
-  const updateDimensions = React.useCallback(() => {
-    if (isFirstSizing.current) {
-      return;
-    }
-    // All the floating point dimensions should be rounded to .1 decimal places to avoid subpixel rendering issues
-    // https://github.com/mui/mui-x/issues/9550#issuecomment-1619020477
-    // https://github.com/mui/mui-x/issues/15721
-    const scrollbarSize = measureScrollbarSize(apiRef.current.mainElementRef.current, props.scrollbarSize);
-    const rowsMeta = gridRowsMetaSelector(apiRef);
-    const topContainerHeight = headersTotalHeight + rowsMeta.pinnedTopRowsTotalHeight;
-    const bottomContainerHeight = rowsMeta.pinnedBottomRowsTotalHeight;
-    const contentSize = {
-      width: columnsTotalWidth,
-      height: roundToDecimalPlaces(rowsMeta.currentPageTotalHeight, 1)
-    };
-    let viewportOuterSize;
-    let viewportInnerSize;
-    let hasScrollX = false;
-    let hasScrollY = false;
-    if (props.autoHeight) {
-      hasScrollY = false;
-      hasScrollX = Math.round(columnsTotalWidth) > Math.round(rootDimensionsRef.current.width);
-      viewportOuterSize = {
-        width: rootDimensionsRef.current.width,
-        height: topContainerHeight + bottomContainerHeight + contentSize.height
-      };
-      viewportInnerSize = {
-        width: Math.max(0, viewportOuterSize.width - (hasScrollY ? scrollbarSize : 0)),
-        height: Math.max(0, viewportOuterSize.height - (hasScrollX ? scrollbarSize : 0))
-      };
-    } else {
-      viewportOuterSize = {
-        width: rootDimensionsRef.current.width,
-        height: rootDimensionsRef.current.height
-      };
-      viewportInnerSize = {
-        width: Math.max(0, viewportOuterSize.width),
-        height: Math.max(0, viewportOuterSize.height - topContainerHeight - bottomContainerHeight)
-      };
-      const content = contentSize;
-      const container = viewportInnerSize;
-      const hasScrollXIfNoYScrollBar = content.width > container.width;
-      const hasScrollYIfNoXScrollBar = content.height > container.height;
-      if (hasScrollXIfNoYScrollBar || hasScrollYIfNoXScrollBar) {
-        hasScrollY = hasScrollYIfNoXScrollBar;
-        hasScrollX = content.width + (hasScrollY ? scrollbarSize : 0) > container.width;
-
-        // We recalculate the scroll y to consider the size of the x scrollbar.
-        if (hasScrollX) {
-          hasScrollY = content.height + scrollbarSize > container.height;
-        }
-      }
-      if (hasScrollY) {
-        viewportInnerSize.width -= scrollbarSize;
-      }
-      if (hasScrollX) {
-        viewportInnerSize.height -= scrollbarSize;
-      }
-    }
-    const rowWidth = Math.max(viewportOuterSize.width, columnsTotalWidth + (hasScrollY ? scrollbarSize : 0));
-    const minimumSize = {
-      width: columnsTotalWidth,
-      height: topContainerHeight + contentSize.height + bottomContainerHeight
-    };
-    const newDimensions = {
-      isReady: true,
-      root: rootDimensionsRef.current,
-      viewportOuterSize,
-      viewportInnerSize,
-      contentSize,
-      minimumSize,
-      hasScrollX,
-      hasScrollY,
-      scrollbarSize,
-      headerHeight,
-      groupHeaderHeight,
-      headerFilterHeight,
-      rowWidth,
-      rowHeight,
-      columnsTotalWidth,
-      leftPinnedWidth,
-      rightPinnedWidth,
-      headersTotalHeight,
-      topContainerHeight,
-      bottomContainerHeight
-    };
-    const prevDimensions = apiRef.current.state.dimensions;
-    if (isDeepEqual(prevDimensions, newDimensions)) {
-      return;
-    }
-    setDimensions(newDimensions);
-    if (!areElementSizesEqual(newDimensions.viewportInnerSize, prevDimensions.viewportInnerSize)) {
-      apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
-    }
-    apiRef.current.updateRenderContext?.();
-  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
-  const updateDimensionCallback = useEventCallback(updateDimensions);
-  const debouncedUpdateDimensions = React.useMemo(() => props.resizeThrottleMs > 0 ? throttle(() => {
-    updateDimensionCallback();
-    apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);
-  }, props.resizeThrottleMs) : undefined, [apiRef, props.resizeThrottleMs, updateDimensionCallback]);
-  React.useEffect(() => debouncedUpdateDimensions?.clear, [debouncedUpdateDimensions]);
   const apiPublic = {
     getRootDimensions
   };
@@ -215,14 +70,12 @@ export function useGridDimensions(apiRef, props) {
     updateDimensions,
     getViewportPageSize
   };
-  useEnhancedEffect(updateDimensions, [updateDimensions]);
   useGridApiMethod(apiRef, apiPublic, 'public');
   useGridApiMethod(apiRef, apiPrivate, 'private');
-  const handleRootMount = React.useCallback(root => {
+  const handleRootMount = root => {
     setCSSVariables(root, gridDimensionsSelector(apiRef));
-  }, [apiRef]);
-  const handleResize = React.useCallback(size => {
-    rootDimensionsRef.current = size;
+  };
+  const handleResize = size => {
     if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
       logger.error(['The parent DOM element of the Data Grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
@@ -231,17 +84,19 @@ export function useGridDimensions(apiRef, props) {
       logger.error(['The parent DOM element of the Data Grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
       errorShown.current = true;
     }
-    if (isFirstSizing.current || !debouncedUpdateDimensions) {
-      // We want to initialize the grid dimensions as soon as possible to avoid flickering
-      isFirstSizing.current = false;
-      updateDimensions();
-      return;
-    }
-    debouncedUpdateDimensions();
-  }, [updateDimensions, props.autoHeight, debouncedUpdateDimensions, logger]);
+  };
   useGridEventPriority(apiRef, 'rootMount', handleRootMount);
   useGridEventPriority(apiRef, 'resize', handleResize);
   useGridEventPriority(apiRef, 'debouncedResize', props.onResize);
+  useStoreEffect(virtualizer.store, Dimensions.selectors.dimensions, (previous, next) => {
+    if (apiRef.current.rootElementRef.current) {
+      setCSSVariables(apiRef.current.rootElementRef.current, next);
+    }
+    if (!areElementSizesEqual(next.viewportInnerSize, previous.viewportInnerSize)) {
+      apiRef.current.publishEvent('viewportInnerSizeChange', next.viewportInnerSize);
+    }
+    apiRef.current.publishEvent('debouncedResize', next.root);
+  });
 }
 function setCSSVariables(root, dimensions) {
   const set = (k, v) => root.style.setProperty(k, v);
@@ -271,31 +126,6 @@ function getStaticDimensions(props, apiRef, density, pinnedColumnns) {
     rightPinnedWidth: pinnedColumnns.right.reduce((w, col) => w + col.computedWidth, 0)
   };
 }
-const scrollbarSizeCache = new WeakMap();
-function measureScrollbarSize(element, scrollbarSize) {
-  if (scrollbarSize !== undefined) {
-    return scrollbarSize;
-  }
-  if (element === null) {
-    return 0;
-  }
-  const cachedSize = scrollbarSizeCache.get(element);
-  if (cachedSize !== undefined) {
-    return cachedSize;
-  }
-  const doc = ownerDocument(element);
-  const scrollDiv = doc.createElement('div');
-  scrollDiv.style.width = '99px';
-  scrollDiv.style.height = '99px';
-  scrollDiv.style.position = 'absolute';
-  scrollDiv.style.overflow = 'scroll';
-  scrollDiv.className = 'scrollDiv';
-  element.appendChild(scrollDiv);
-  const size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-  element.removeChild(scrollDiv);
-  scrollbarSizeCache.set(element, size);
-  return size;
-}
 function areElementSizesEqual(a, b) {
   return a.width === b.width && a.height === b.height;
 }

package/esm/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -58,7 +58,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       }
     }
     const field = gridVisibleColumnFieldsSelector(apiRef)[colIndex];
-    const nonRowSpannedRowId = findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection);
+    const nonRowSpannedRowId = findNonRowSpannedCell(apiRef, rowId, colIndex, rowSpanScanDirection);
     // `scrollToIndexes` requires a rowIndex relative to all visible rows.
     // Those rows do not include pinned rows, but pinned rows do not need scroll anyway.
     const rowIndexRelativeToAllRows = visibleSortedRows.findIndex(row => row.id === nonRowSpannedRowId);

package/esm/hooks/features/keyboardNavigation/utils.d.ts

@@ -1,6 +1,6 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridColDef, GridRowId } from "../../../models/index.js";
-import { GridApiCommunity } from "../../../models/api/gridApiCommunity.js";
+import { GridRowId } from "../../../models/index.js";
+import { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 export declare const getLeftColumnIndex: ({
   currentColIndex,
   firstColIndex,
@@ -23,4 +23,4 @@ export declare const getRightColumnIndex: ({
   lastColIndex: number;
   isRtl: boolean;
 }) => number | null;
-export declare function findNonRowSpannedCell(apiRef: RefObject<GridApiCommunity>, rowId: GridRowId, field: GridColDef['field'], rowSpanScanDirection: 'up' | 'down'): GridRowId;
+export declare function findNonRowSpannedCell(apiRef: RefObject<GridPrivateApiCommunity>, rowId: GridRowId, colIndex: number, rowSpanScanDirection: 'up' | 'down'): GridRowId;

package/esm/hooks/features/keyboardNavigation/utils.js

@@ -1,5 +1,5 @@
+import { Rowspan } from '@mui/x-virtualizer';
 import { gridFilteredSortedRowIdsSelector } from "../filter/gridFilterSelector.js";
-import { gridRowSpanningHiddenCellsSelector } from "../rows/gridRowSpanningSelectors.js";
 export const getLeftColumnIndex = ({
   currentColIndex,
   firstColIndex,
@@ -34,9 +34,9 @@ export const getRightColumnIndex = ({
   }
   return null;
 };
-export function findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection) {
-  const rowSpanHiddenCells = gridRowSpanningHiddenCellsSelector(apiRef);
-  if (!rowSpanHiddenCells[rowId]?.[field]) {
+export function findNonRowSpannedCell(apiRef, rowId, colIndex, rowSpanScanDirection) {
+  const rowSpanHiddenCells = Rowspan.selectors.hiddenCells(apiRef.current.virtualizer.store.state);
+  if (!rowSpanHiddenCells[rowId]?.[colIndex]) {
     return rowId;
   }
   const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
@@ -44,7 +44,7 @@ export function findNonRowSpannedCell(apiRef, rowId, field, rowSpanScanDirection
   let nextRowIndex = filteredSortedRowIds.indexOf(rowId) + (rowSpanScanDirection === 'down' ? 1 : -1);
   while (nextRowIndex >= 0 && nextRowIndex < filteredSortedRowIds.length) {
     const nextRowId = filteredSortedRowIds[nextRowIndex];
-    if (!rowSpanHiddenCells[nextRowId]?.[field]) {
+    if (!rowSpanHiddenCells[nextRowId]?.[colIndex]) {
       return nextRowId;
     }
     nextRowIndex += rowSpanScanDirection === 'down' ? 1 : -1;

package/esm/hooks/features/pivoting/gridPivotingInterfaces.d.ts

@@ -2,7 +2,6 @@ import type { GridRowModelUpdate } from '@mui/x-data-grid';
 import type { GridColDef } from "../../../models/colDef/index.js";
 export interface GridPivotingStatePartial {
   active: boolean;
-  panelOpen: boolean;
   initialColumns: Map<string, GridColDef> | undefined;
 }
 export interface GridPivotingPrivateApiCommunity {

package/esm/hooks/features/pivoting/gridPivotingSelectors.d.ts

@@ -5,7 +5,4 @@ export declare const gridPivotActiveSelector: (args_0: import("react").RefObject
 } | null>) => boolean;
 export declare const gridPivotInitialColumnsSelector: (args_0: import("react").RefObject<{
   state: GridStateCommunity;
-} | null>) => Map<string, GridColDef>;
-export declare const gridPivotPanelOpenSelector: (args_0: import("react").RefObject<{
-  state: GridStateCommunity;
-} | null>) => boolean;
+} | null>) => Map<string, GridColDef>;

package/esm/hooks/features/pivoting/gridPivotingSelectors.js

@@ -4,5 +4,4 @@ const gridPivotingStateSelector = createRootSelector(
 state => state.pivoting);
 export const gridPivotActiveSelector = createSelector(gridPivotingStateSelector, pivoting => pivoting?.active);
 const emptyColumns = new Map();
-export const gridPivotInitialColumnsSelector = createSelector(gridPivotingStateSelector, pivoting => pivoting?.initialColumns || emptyColumns);
-export const gridPivotPanelOpenSelector = createSelector(gridPivotingStateSelector, pivoting => pivoting?.panelOpen);
+export const gridPivotInitialColumnsSelector = createSelector(gridPivotingStateSelector, pivoting => pivoting?.initialColumns || emptyColumns);

package/esm/hooks/features/rows/gridRowsMetaInterfaces.d.ts

@@ -1,12 +1,6 @@
+import type { HeightEntry } from '@mui/x-virtualizer/models';
 import { GridRowId } from "../../../models/gridRows.js";
-export type HeightEntry = {
-  content: number;
-  spacingTop: number;
-  spacingBottom: number;
-  detail: number;
-  autoHeight: boolean;
-  needsFirstMeasurement: boolean;
-};
+export type { HeightEntry } from '@mui/x-virtualizer/models';
 export type HeightCache = Map<GridRowId, HeightEntry>;
 export interface GridRowsMetaInternalCache {
   /**

package/esm/hooks/features/rows/gridRowsMetaState.d.ts

@@ -1,21 +1,5 @@
+import { RowsMetaState } from '@mui/x-virtualizer/models';
 /**
  * The grid rows total height and row positions.
  */
-export interface GridRowsMetaState {
-  /**
-   * The sum of all visible grid rows in the current rows.
-   */
-  currentPageTotalHeight: number;
-  /**
-   * The grid rows positions.
-   */
-  positions: number[];
-  /**
-   * The total height of the pinned top rows.
-   */
-  pinnedTopRowsTotalHeight: number;
-  /**
-   * The total height of the pinned bottom rows.
-   */
-  pinnedBottomRowsTotalHeight: number;
-}
+export interface GridRowsMetaState extends RowsMetaState {}

package/esm/hooks/features/rows/useGridRowAriaAttributes.js

@@ -9,7 +9,9 @@ export const useGridRowAriaAttributes = () => {
     const ariaAttributes = {};
     const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
     ariaAttributes['aria-rowindex'] = ariaRowIndex;
-    if (apiRef.current.isRowSelectable(rowNode.id)) {
+
+    // XXX: fix this properly
+    if (rowNode && apiRef.current.isRowSelectable(rowNode.id)) {
       ariaAttributes['aria-selected'] = apiRef.current.isRowSelected(rowNode.id);
     }
     return ariaAttributes;

package/esm/hooks/features/rows/useGridRowSpanning.d.ts

@@ -1,19 +1,9 @@
 import { RefObject } from '@mui/x-internals/types';
-import type { GridColDef } from "../../../models/colDef/index.js";
-import type { GridRowId } from "../../../models/gridRows.js";
+import { RowSpanningState } from '@mui/x-virtualizer/models';
 import type { DataGridProcessedProps } from "../../../models/props/DataGridProps.js";
 import type { GridPrivateApiCommunity } from "../../../models/api/gridApiCommunity.js";
 import type { GridStateInitializer } from "../../utils/useGridInitializeState.js";
-export interface GridRowSpanningState {
-  spannedCells: Record<GridRowId, Record<GridColDef['field'], number>>;
-  hiddenCells: Record<GridRowId, Record<GridColDef['field'], boolean>>;
-  /**
-   * For each hidden cell, it contains the row index corresponding to the cell that is
-   * the origin of the hidden cell. i.e. the cell which is spanned.
-   * Used by the virtualization to properly keep the spanned cells in view.
-   */
-  hiddenCellOriginMap: Record<number, Record<GridColDef['field'], number>>;
-}
+export interface GridRowSpanningState extends RowSpanningState {}
 export type RowRange = {
   firstRowIndex: number;
   lastRowIndex: number;

package/esm/hooks/features/rows/useGridRowSpanning.js

@@ -2,18 +2,16 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import useLazyRef from '@mui/utils/useLazyRef';
-import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from "../../../internals/constants.js";
+import { Rowspan } from '@mui/x-virtualizer/features';
 import { gridVisibleColumnDefinitionsSelector } from "../columns/gridColumnsSelector.js";
 import { getVisibleRows } from "../../utils/useGridVisibleRows.js";
 import { gridRenderContextSelector } from "../virtualization/gridVirtualizationSelectors.js";
 import { getUnprocessedRange, isRowContextInitialized, getCellValue } from "./gridRowSpanningUtils.js";
-import { GRID_CHECKBOX_SELECTION_FIELD } from "../../../colDef/gridCheckboxSelectionColDef.js";
 import { useGridEvent } from "../../utils/useGridEvent.js";
 import { runIf } from "../../../utils/utils.js";
 import { gridPageSizeSelector } from "../pagination/index.js";
 import { gridDataRowIdsSelector } from "./gridRowsSelector.js";
-const EMPTY_STATE = {
+const EMPTY_CACHES = {
   spannedCells: {},
   hiddenCells: {},
   hiddenCellOriginMap: {}
@@ -22,27 +20,31 @@ const EMPTY_RANGE = {
   firstRowIndex: 0,
   lastRowIndex: 0
 };
-const skippedFields = new Set([GRID_CHECKBOX_SELECTION_FIELD, '__reorder__', GRID_DETAIL_PANEL_TOGGLE_FIELD]);
+const EMPTY_STATE = {
+  caches: EMPTY_CACHES,
+  processedRange: EMPTY_RANGE
+};
+
 /**
  * Default number of rows to process during state initialization to avoid flickering.
  * Number `20` is arbitrarily chosen to be large enough to cover most of the cases without
  * compromising performance.
  */
 const DEFAULT_ROWS_TO_PROCESS = 20;
-const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToProcess, resetState, processedRange) => {
-  const spannedCells = resetState ? {} : _extends({}, apiRef.current.state.rowSpanning.spannedCells);
-  const hiddenCells = resetState ? {} : _extends({}, apiRef.current.state.rowSpanning.hiddenCells);
-  const hiddenCellOriginMap = resetState ? {} : _extends({}, apiRef.current.state.rowSpanning.hiddenCellOriginMap);
-  if (resetState) {
-    processedRange = EMPTY_RANGE;
-  }
-  colDefs.forEach(colDef => {
-    if (skippedFields.has(colDef.field)) {
-      return;
-    }
+const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToProcess, resetState) => {
+  const virtualizer = apiRef.current.virtualizer;
+  const previousState = resetState ? EMPTY_STATE : Rowspan.selectors.state(virtualizer.store.state);
+  const spannedCells = _extends({}, previousState.caches.spannedCells);
+  const hiddenCells = _extends({}, previousState.caches.hiddenCells);
+  const hiddenCellOriginMap = _extends({}, previousState.caches.hiddenCellOriginMap);
+  const processedRange = {
+    firstRowIndex: Math.min(previousState.processedRange.firstRowIndex, rangeToProcess.firstRowIndex),
+    lastRowIndex: Math.max(previousState.processedRange.lastRowIndex, rangeToProcess.lastRowIndex)
+  };
+  colDefs.forEach((colDef, columnIndex) => {
     for (let index = rangeToProcess.firstRowIndex; index < rangeToProcess.lastRowIndex; index += 1) {
       const row = visibleRows[index];
-      if (hiddenCells[row.id]?.[colDef.field]) {
+      if (hiddenCells[row.id]?.[columnIndex]) {
         continue;
       }
       const cellValue = getCellValue(row.model, colDef, apiRef);
@@ -61,10 +63,10 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
         while (prevIndex >= range.firstRowIndex && prevRowEntry && getCellValue(prevRowEntry.model, colDef, apiRef) === cellValue) {
           const currentRow = visibleRows[prevIndex + 1];
           if (hiddenCells[currentRow.id]) {
-            hiddenCells[currentRow.id][colDef.field] = true;
+            hiddenCells[currentRow.id][columnIndex] = true;
           } else {
             hiddenCells[currentRow.id] = {
-              [colDef.field]: true
+              [columnIndex]: true
             };
           }
           backwardsHiddenCells.push(index);
@@ -77,10 +79,10 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
       }
       backwardsHiddenCells.forEach(hiddenCellIndex => {
         if (hiddenCellOriginMap[hiddenCellIndex]) {
-          hiddenCellOriginMap[hiddenCellIndex][colDef.field] = spannedRowIndex;
+          hiddenCellOriginMap[hiddenCellIndex][columnIndex] = spannedRowIndex;
         } else {
           hiddenCellOriginMap[hiddenCellIndex] = {
-            [colDef.field]: spannedRowIndex
+            [columnIndex]: spannedRowIndex
           };
         }
       });
@@ -90,17 +92,17 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
       while (relativeIndex <= range.lastRowIndex && visibleRows[relativeIndex] && getCellValue(visibleRows[relativeIndex].model, colDef, apiRef) === cellValue) {
         const currentRow = visibleRows[relativeIndex];
         if (hiddenCells[currentRow.id]) {
-          hiddenCells[currentRow.id][colDef.field] = true;
+          hiddenCells[currentRow.id][columnIndex] = true;
         } else {
           hiddenCells[currentRow.id] = {
-            [colDef.field]: true
+            [columnIndex]: true
           };
         }
         if (hiddenCellOriginMap[relativeIndex]) {
-          hiddenCellOriginMap[relativeIndex][colDef.field] = spannedRowIndex;
+          hiddenCellOriginMap[relativeIndex][columnIndex] = spannedRowIndex;
         } else {
           hiddenCellOriginMap[relativeIndex] = {
-            [colDef.field]: spannedRowIndex
+            [columnIndex]: spannedRowIndex
           };
         }
         relativeIndex += 1;
@@ -108,23 +110,21 @@ const computeRowSpanningState = (apiRef, colDefs, visibleRows, range, rangeToPro
       }
       if (rowSpan > 0) {
         if (spannedCells[spannedRowId]) {
-          spannedCells[spannedRowId][colDef.field] = rowSpan + 1;
+          spannedCells[spannedRowId][columnIndex] = rowSpan + 1;
         } else {
           spannedCells[spannedRowId] = {
-            [colDef.field]: rowSpan + 1
+            [columnIndex]: rowSpan + 1
           };
         }
       }
     }
-    processedRange = {
-      firstRowIndex: Math.min(processedRange.firstRowIndex, rangeToProcess.firstRowIndex),
-      lastRowIndex: Math.max(processedRange.lastRowIndex, rangeToProcess.lastRowIndex)
-    };
   });
   return {
-    spannedCells,
-    hiddenCells,
-    hiddenCellOriginMap,
+    caches: {
+      spannedCells,
+      hiddenCells,
+      hiddenCellOriginMap
+    },
     processedRange
   };
 };
@@ -174,71 +174,42 @@ export const rowSpanningStateInitializer = (state, props, apiRef) => {
     model: dataRowIdToModelLookup[id]
   }));
   const colDefs = orderedFields.map(field => columnsLookup[field]);
-  const {
-    spannedCells,
-    hiddenCells,
-    hiddenCellOriginMap
-  } = computeRowSpanningState(apiRef, colDefs, rows, rangeToProcess, rangeToProcess, true, EMPTY_RANGE);
+  const rowSpanning = computeRowSpanningState(apiRef, colDefs, rows, rangeToProcess, rangeToProcess, true);
   return _extends({}, state, {
-    rowSpanning: {
-      spannedCells,
-      hiddenCells,
-      hiddenCellOriginMap
-    }
+    rowSpanning
   });
 };
 export const useGridRowSpanning = (apiRef, props) => {
-  const processedRange = useLazyRef(() => {
-    return apiRef.current.state.rowSpanning !== EMPTY_STATE ? getInitialRangeToProcess(props, apiRef) : EMPTY_RANGE;
-  });
+  const store = apiRef.current.virtualizer.store;
   const updateRowSpanningState = React.useCallback((renderContext, resetState = false) => {
     const {
       range,
       rows: visibleRows
-    } = getVisibleRows(apiRef, {
-      pagination: props.pagination,
-      paginationMode: props.paginationMode
-    });
+    } = getVisibleRows(apiRef);
     if (range === null || !isRowContextInitialized(renderContext)) {
       return;
     }
-    if (resetState) {
-      processedRange.current = EMPTY_RANGE;
-    }
+    const previousState = resetState ? EMPTY_STATE : Rowspan.selectors.state(store.state);
     const rangeToProcess = getUnprocessedRange({
       firstRowIndex: renderContext.firstRowIndex,
-      lastRowIndex: Math.min(renderContext.lastRowIndex, range.lastRowIndex + 1)
-    }, processedRange.current);
+      lastRowIndex: Math.min(renderContext.lastRowIndex, range.lastRowIndex - range.firstRowIndex + 1)
+    }, previousState.processedRange);
     if (rangeToProcess === null) {
       return;
     }
     const colDefs = gridVisibleColumnDefinitionsSelector(apiRef);
-    const {
-      spannedCells,
-      hiddenCells,
-      hiddenCellOriginMap,
-      processedRange: newProcessedRange
-    } = computeRowSpanningState(apiRef, colDefs, visibleRows, range, rangeToProcess, resetState, processedRange.current);
-    processedRange.current = newProcessedRange;
-    const newSpannedCellsCount = Object.keys(spannedCells).length;
-    const newHiddenCellsCount = Object.keys(hiddenCells).length;
-    const currentSpannedCellsCount = Object.keys(apiRef.current.state.rowSpanning.spannedCells).length;
-    const currentHiddenCellsCount = Object.keys(apiRef.current.state.rowSpanning.hiddenCells).length;
-    const shouldUpdateState = resetState || newSpannedCellsCount !== currentSpannedCellsCount || newHiddenCellsCount !== currentHiddenCellsCount;
-    const hasNoSpannedCells = newSpannedCellsCount === 0 && currentSpannedCellsCount === 0;
+    const newState = computeRowSpanningState(apiRef, colDefs, visibleRows, range, rangeToProcess, resetState);
+    const newSpannedCellsCount = Object.keys(newState.caches.spannedCells).length;
+    const newHiddenCellsCount = Object.keys(newState.caches.hiddenCells).length;
+    const previousSpannedCellsCount = Object.keys(previousState.caches.spannedCells).length;
+    const previousHiddenCellsCount = Object.keys(previousState.caches.hiddenCells).length;
+    const shouldUpdateState = resetState || newSpannedCellsCount !== previousSpannedCellsCount || newHiddenCellsCount !== previousHiddenCellsCount;
+    const hasNoSpannedCells = newSpannedCellsCount === 0 && previousSpannedCellsCount === 0;
     if (!shouldUpdateState || hasNoSpannedCells) {
       return;
     }
-    apiRef.current.setState(state => {
-      return _extends({}, state, {
-        rowSpanning: {
-          spannedCells,
-          hiddenCells,
-          hiddenCellOriginMap
-        }
-      });
-    });
-  }, [apiRef, processedRange, props.pagination, props.paginationMode]);
+    store.set('rowSpanning', newState);
+  }, [apiRef, store]);
 
   // Reset events trigger a full re-computation of the row spanning state:
   // - The `unstable_rowSpanning` prop is updated (feature flag)
@@ -260,13 +231,11 @@ export const useGridRowSpanning = (apiRef, props) => {
   useGridEvent(apiRef, 'columnsChange', runIf(props.rowSpanning, resetRowSpanningState));
   React.useEffect(() => {
     if (!props.rowSpanning) {
-      if (apiRef.current.state.rowSpanning !== EMPTY_STATE) {
-        apiRef.current.setState(state => _extends({}, state, {
-          rowSpanning: EMPTY_STATE
-        }));
+      if (store.state.rowSpanning !== EMPTY_STATE) {
+        store.set('rowSpanning', EMPTY_STATE);
       }
-    } else if (apiRef.current.state.rowSpanning === EMPTY_STATE) {
+    } else if (store.state.rowSpanning.caches === EMPTY_CACHES) {
       resetRowSpanningState();
     }
-  }, [apiRef, resetRowSpanningState, props.rowSpanning]);
+  }, [apiRef, store, resetRowSpanningState, props.rowSpanning]);
 };