@mui/x-data-grid 7.0.0-beta.4 → 7.0.0-beta.6

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

@@ -1,23 +1,24 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { styled } from '@mui/material/styles';
+import { styled, useTheme } from '@mui/material/styles';
 import { useGridSelector } from '../../utils';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
 import { gridDimensionsSelector } from '../dimensions';
-import { gridOffsetsSelector, gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from '../virtualization';
+import { gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector } from '../virtualization';
+import { computeOffsetLeft } from '../virtualization/useGridVirtualScroller';
 import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
-import { GridPinnedColumnPosition, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
+import { GridPinnedColumnPosition, gridColumnPositionsSelector, gridVisiblePinnedColumnDefinitionsSelector } from '../columns';
 import { GridScrollbarFillerCell as ScrollbarFiller } from '../../../components/GridScrollbarFillerCell';
 import { gridClasses } from '../../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SpaceFiller = styled('div')({
   /* GridRootStyles conflict */
-  '&&': {
+  '&&&': {
     padding: 0,
     width: 'calc(var(--DataGrid-width) - var(--DataGrid-columnsTotalWidth))'
   }
@@ -49,14 +50,16 @@ export const useGridColumnHeaders = props => {
   const [dragCol, setDragCol] = React.useState('');
   const [resizeCol, setResizeCol] = React.useState('');
   const apiRef = useGridPrivateApiContext();
+  const theme = useTheme();
   const rootProps = useGridRootProps();
   const hasVirtualization = useGridSelector(apiRef, gridVirtualizationColumnEnabledSelector);
   const innerRef = React.useRef(null);
   const handleInnerRef = useForkRef(innerRefProp, innerRef);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
-  const offsets = useGridSelector(apiRef, gridOffsetsSelector);
+  const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector);
-  const visiblePinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
+  const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
+  const offsetLeft = computeOffsetLeft(columnPositions, renderContext, theme.direction, pinnedColumns.left.length);
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
   }, [apiRef]);
@@ -88,8 +91,8 @@ export const useGridColumnHeaders = props => {
   const getFillers = (params, children, leftOverflow, borderTop = false) => {
     const isPinnedRight = params?.position === GridPinnedColumnPosition.RIGHT;
     const isNotPinned = params?.position === undefined;
-    const hasScrollbarFiller = visiblePinnedColumns.right.length > 0 && isPinnedRight || visiblePinnedColumns.right.length === 0 && isNotPinned;
-    const leftOffsetWidth = offsets.left - leftOverflow;
+    const hasScrollbarFiller = pinnedColumns.right.length > 0 && isPinnedRight || pinnedColumns.right.length === 0 && isNotPinned;
+    const leftOffsetWidth = offsetLeft - leftOverflow;
     return /*#__PURE__*/_jsxs(React.Fragment, {
       children: [isNotPinned && /*#__PURE__*/_jsx("div", {
         role: "presentation",

package/modern/hooks/features/columns/gridColumnsSelector.js

@@ -134,4 +134,11 @@ export const gridFilterableColumnLookupSelector = createSelectorMemoized(gridCol
     acc[col.field] = col;
   }
   return acc;
-}, {}));
+}, {}));
+
+/**
+ * Checks if some column has a colSpan field.
+ * @category Columns
+ * @ignore - Do not document
+ */
+export const gridHasColSpanSelector = createSelectorMemoized(gridColumnDefinitionsSelector, columns => columns.some(column => column.colSpan !== undefined));

package/modern/hooks/features/columns/useGridColumns.js

@@ -44,6 +44,7 @@ export function useGridColumns(apiRef, props) {
     logger.debug('Updating columns state.');
     apiRef.current.setState(mergeColumnsState(columnsState));
     apiRef.current.publishEvent('columnsChange', columnsState.orderedFields);
+    apiRef.current.updateRenderContext?.();
     apiRef.current.forceUpdate();
   }, [logger, apiRef]);
 
@@ -73,6 +74,7 @@ export function useGridColumns(apiRef, props) {
           keepOnlyColumnsToUpsert: false
         })
       }));
+      apiRef.current.updateRenderContext?.();
       apiRef.current.forceUpdate();
     }
   }, [apiRef]);

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

@@ -227,6 +227,7 @@ export function useGridDimensions(apiRef, props) {
     set('--DataGrid-headersTotalHeight', `${dimensions.headersTotalHeight}px`);
     set('--DataGrid-topContainerHeight', `${dimensions.topContainerHeight}px`);
     set('--DataGrid-bottomContainerHeight', `${dimensions.bottomContainerHeight}px`);
+    set('--height', `${dimensions.rowHeight}px`);
   }, [root, dimensions]);
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback(size => {

package/modern/hooks/features/editing/useGridRowEditing.js

@@ -21,7 +21,7 @@ export const useGridRowEditing = (apiRef, props) => {
   const [rowModesModel, setRowModesModel] = React.useState({});
   const rowModesModelRef = React.useRef(rowModesModel);
   const prevRowModesModel = React.useRef({});
-  const focusTimeout = React.useRef(null);
+  const focusTimeout = React.useRef();
   const nextFocusedCell = React.useRef(null);
   const {
     processRowUpdate,
@@ -76,7 +76,6 @@ export const useGridRowEditing = (apiRef, props) => {
     // focus we check if the next cell that received focus is from a different row.
     nextFocusedCell.current = null;
     focusTimeout.current = setTimeout(() => {
-      focusTimeout.current = null;
       if (nextFocusedCell.current?.id !== params.id) {
         // The row might have been deleted during the click
         if (!apiRef.current.getRow(params.id)) {

package/modern/hooks/features/filter/useGridFilter.js

@@ -105,7 +105,7 @@ export const useGridFilter = (apiRef, props) => {
     const filterModel = gridFilterModelSelector(apiRef);
     const existingItems = [...filterModel.items];
     items.forEach(item => {
-      const itemIndex = items.findIndex(filterItem => filterItem.id === item.id);
+      const itemIndex = existingItems.findIndex(filterItem => filterItem.id === item.id);
       if (itemIndex === -1) {
         existingItems.push(item);
       } else {
@@ -113,7 +113,7 @@ export const useGridFilter = (apiRef, props) => {
       }
     });
     apiRef.current.setFilterModel(_extends({}, filterModel, {
-      items
+      items: existingItems
     }), 'upsertFilterItems');
   }, [apiRef]);
   const deleteFilterItem = React.useCallback(itemToDelete => {

package/modern/hooks/features/rows/useGridParamsApi.js

@@ -31,12 +31,13 @@ export function useGridParamsApi(apiRef) {
   }, [apiRef]);
   const getCellParams = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
-    const value = apiRef.current.getCellValue(id, field);
     const row = apiRef.current.getRow(id);
     const rowNode = apiRef.current.getRowNode(id);
     if (!row || !rowNode) {
       throw new MissingRowIdError(`No row with id #${id} found`);
     }
+    const rawValue = row[field];
+    const value = colDef?.valueGetter ? colDef.valueGetter(rawValue, row, colDef, apiRef) : rawValue;
     const cellFocus = gridFocusCellSelector(apiRef);
     const cellTabIndex = gridTabIndexCellSelector(apiRef);
     const params = {
@@ -60,19 +61,14 @@ export function useGridParamsApi(apiRef) {
   }, [apiRef]);
   const getCellValue = React.useCallback((id, field) => {
     const colDef = apiRef.current.getColumn(field);
-    if (!colDef || !colDef.valueGetter) {
-      const rowModel = apiRef.current.getRow(id);
-      if (!rowModel) {
-        throw new MissingRowIdError(`No row with id #${id} found`);
-      }
-      return rowModel[field];
-    }
     const row = apiRef.current.getRow(id);
     if (!row) {
       throw new MissingRowIdError(`No row with id #${id} found`);
     }
-    const value = row[colDef.field];
-    return colDef.valueGetter(value, row, colDef, apiRef);
+    if (!colDef || !colDef.valueGetter) {
+      return row[field];
+    }
+    return colDef.valueGetter(row[colDef.field], row, colDef, apiRef);
   }, [apiRef]);
   const getRowValue = React.useCallback((row, colDef) => {
     const field = colDef.field;

package/modern/hooks/features/rows/useGridRows.js

@@ -260,13 +260,16 @@ export const useGridRows = (apiRef, props) => {
     const dataRowIdToIdLookup = _extends({}, gridRowsDataRowIdToIdLookupSelector(apiRef));
     const rootGroup = tree[GRID_ROOT_GROUP_ID];
     const rootGroupChildren = [...rootGroup.children];
+    const seenIds = new Set();
     for (let i = 0; i < newRows.length; i += 1) {
       const rowModel = newRows[i];
       const rowId = getRowIdFromRowModel(rowModel, props.getRowId, 'A row was provided without id when calling replaceRows().');
-      const [replacedRowId] = rootGroupChildren.splice(firstRowToRender + i, 1, rowId);
-      delete dataRowIdToModelLookup[replacedRowId];
-      delete dataRowIdToIdLookup[replacedRowId];
-      delete tree[replacedRowId];
+      const [removedRowId] = rootGroupChildren.splice(firstRowToRender + i, 1, rowId);
+      if (!seenIds.has(removedRowId)) {
+        delete dataRowIdToModelLookup[removedRowId];
+        delete dataRowIdToIdLookup[removedRowId];
+        delete tree[removedRowId];
+      }
       const rowTreeNodeConfig = {
         id: rowId,
         depth: 0,
@@ -277,6 +280,7 @@ export const useGridRows = (apiRef, props) => {
       dataRowIdToModelLookup[rowId] = rowModel;
       dataRowIdToIdLookup[rowId] = rowId;
       tree[rowId] = rowTreeNodeConfig;
+      seenIds.add(rowId);
     }
     tree[GRID_ROOT_GROUP_ID] = _extends({}, rootGroup, {
       children: rootGroupChildren

package/modern/hooks/features/rows/useGridRowsMeta.js

@@ -106,14 +106,9 @@ export const useGridRowsMeta = (apiRef, props) => {
       } else {
         rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
       }
-      const initialHeights = {};
-      /* eslint-disable-next-line no-restricted-syntax */
-      for (const key in sizes) {
-        if (/^base[A-Z]/.test(key)) {
-          initialHeights[key] = sizes[key];
-        }
-      }
-      initialHeights.baseCenter = baseRowHeight;
+      const initialHeights = {
+        baseCenter: baseRowHeight
+      };
       if (getRowSpacing) {
         const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
         const spacing = getRowSpacing(_extends({}, row, {
@@ -131,19 +126,16 @@ export const useGridRowsMeta = (apiRef, props) => {
     const positions = [];
     const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
       positions.push(acc);
-      let maximumBaseSize = 0;
       let otherSizes = 0;
       const processedSizes = calculateRowProcessedSizes(row);
       /* eslint-disable-next-line no-restricted-syntax, guard-for-in */
       for (const key in processedSizes) {
         const value = processedSizes[key];
-        if (/^base[A-Z]/.test(key)) {
-          maximumBaseSize = value > maximumBaseSize ? value : maximumBaseSize;
-        } else {
+        if (key !== 'baseCenter') {
           otherSizes += value;
         }
       }
-      return acc + maximumBaseSize + otherSizes;
+      return acc + processedSizes.baseCenter + otherSizes;
     }, 0);
     pinnedRows?.top?.forEach(row => {
       calculateRowProcessedSizes(row);

package/modern/hooks/features/sorting/gridSortingUtils.js

@@ -28,7 +28,15 @@ const parseSortItem = (sortItem, apiRef) => {
   if (!column || sortItem.sort === null) {
     return null;
   }
-  const comparator = isDesc(sortItem.sort) ? (...args) => -1 * column.sortComparator(...args) : column.sortComparator;
+  let comparator;
+  if (column.getSortComparator) {
+    comparator = column.getSortComparator(sortItem.sort);
+  } else {
+    comparator = isDesc(sortItem.sort) ? (...args) => -1 * column.sortComparator(...args) : column.sortComparator;
+  }
+  if (!comparator) {
+    return null;
+  }
   const getSortCellParams = id => ({
     id,
     field: column.field,

package/modern/hooks/features/sorting/useGridSorting.js

@@ -40,7 +40,7 @@ export const useGridSorting = (apiRef, props) => {
     const existingIdx = sortModel.findIndex(c => c.field === field);
     let newSortModel = [...sortModel];
     if (existingIdx > -1) {
-      if (!sortItem) {
+      if (sortItem?.sort == null) {
         newSortModel.splice(existingIdx, 1);
       } else {
         newSortModel.splice(existingIdx, 1, sortItem);
@@ -116,7 +116,7 @@ export const useGridSorting = (apiRef, props) => {
     const sortItem = createSortItem(column, direction);
     let sortModel;
     if (!allowMultipleSorting || props.disableMultipleColumnsSorting) {
-      sortModel = !sortItem ? [] : [sortItem];
+      sortModel = sortItem?.sort == null ? [] : [sortItem];
     } else {
       sortModel = upsertSortModel(column.field, sortItem);
     }

package/modern/hooks/features/virtualization/gridVirtualizationSelectors.js

@@ -24,13 +24,6 @@ export const gridVirtualizationColumnEnabledSelector = createSelector(gridVirtua
  */
 export const gridRenderContextSelector = createSelector(gridVirtualizationSelector, state => state.renderContext);
 
-/**
- * Get the offsets
- * @category Virtualization
- * @ignore - do not document.
- */
-export const gridOffsetsSelector = createSelector(gridVirtualizationSelector, state => state.offsets);
-
 /**
  * Get the render context, with only columns filled in.
  * This is cached, so it can be used to only re-render when the column interval changes.

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -3,24 +3,23 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import { useTheme } from '@mui/material/styles';
-import { defaultMemoize } from 'reselect';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridSelector } from '../../utils/useGridSelector';
-import { useLazyRef } from '../../utils/useLazyRef';
 import { useResizeObserver } from '../../utils/useResizeObserver';
 import { useRunOnce } from '../../utils/useRunOnce';
-import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
+import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridHasColSpanSelector } from '../columns/gridColumnsSelector';
 import { gridDimensionsSelector } from '../dimensions/gridDimensionsSelectors';
 import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
 import { useGridVisibleRows, getVisibleRows } from '../../utils/useGridVisibleRows';
-import { clamp } from '../../../utils/utils';
+import { useGridApiEventHandler } from '../../utils';
+import { clamp, range } from '../../../utils/utils';
 import { selectedIdsLookupSelector } from '../rowSelection/gridRowSelectionSelector';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils';
 import { getMinimalContentHeight } from '../rows/gridRowsUtils';
-import { gridOffsetsSelector, gridRenderContextSelector, gridVirtualizationEnabledSelector, gridVirtualizationColumnEnabledSelector } from './gridVirtualizationSelectors';
+import { gridRenderContextSelector, gridVirtualizationEnabledSelector, gridVirtualizationColumnEnabledSelector } from './gridVirtualizationSelectors';
 import { EMPTY_RENDER_CONTEXT } from './useGridVirtualization';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const EMPTY_DETAIL_PANELS = Object.freeze(new Map());
@@ -49,40 +48,29 @@ export const useGridVirtualScroller = () => {
   const scrollbarHorizontalRef = React.useRef(null);
   const contentHeight = dimensions.contentSize.height;
   const columnsTotalWidth = dimensions.columnsTotalWidth;
+  const hasColSpan = useGridSelector(apiRef, gridHasColSpanSelector);
   useResizeObserver(mainRef, () => apiRef.current.resize());
   const previousContext = React.useRef(EMPTY_RENDER_CONTEXT);
   const previousRowContext = React.useRef(EMPTY_RENDER_CONTEXT);
-  const offsets = useGridSelector(apiRef, gridOffsetsSelector);
   const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
   const scrollPosition = React.useRef({
     top: 0,
     left: 0
   }).current;
   const prevTotalWidth = React.useRef(columnsTotalWidth);
-  const getRenderedColumns = useLazyRef(createGetRenderedColumns).current;
-  const indexOfRowWithFocusedCell = React.useMemo(() => {
-    if (cellFocus !== null) {
-      return currentPage.rows.findIndex(row => row.id === cellFocus.id);
-    }
-    return -1;
-  }, [cellFocus, currentPage.rows]);
-  const indexOfColumnWithFocusedCell = React.useMemo(() => {
-    if (cellFocus !== null) {
-      return visibleColumns.findIndex(column => column.field === cellFocus.field);
-    }
-    return -1;
-  }, [cellFocus, visibleColumns]);
+  const focusedCell = {
+    rowIndex: React.useMemo(() => cellFocus ? currentPage.rows.findIndex(row => row.id === cellFocus.id) : -1, [cellFocus, currentPage.rows]),
+    columnIndex: React.useMemo(() => cellFocus ? visibleColumns.findIndex(column => column.field === cellFocus.field) : -1, [cellFocus, visibleColumns])
+  };
   const updateRenderContext = React.useCallback((nextRenderContext, rawRenderContext) => {
     if (areRenderContextsEqual(nextRenderContext, apiRef.current.state.virtualization.renderContext)) {
       return;
     }
     const didRowsIntervalChange = nextRenderContext.firstRowIndex !== previousRowContext.current.firstRowIndex || nextRenderContext.lastRowIndex !== previousRowContext.current.lastRowIndex;
-    const nextOffsets = computeOffsets(apiRef, nextRenderContext, theme.direction, pinnedColumns.left.length);
     apiRef.current.setState(state => {
       return _extends({}, state, {
         virtualization: _extends({}, state.virtualization, {
-          renderContext: nextRenderContext,
-          offsets: nextOffsets
+          renderContext: nextRenderContext
         })
       });
     });
@@ -96,7 +84,7 @@ export const useGridVirtualScroller = () => {
     }
     previousContext.current = rawRenderContext;
     prevTotalWidth.current = dimensions.columnsTotalWidth;
-  }, [apiRef, pinnedColumns.left.length, theme.direction, dimensions.isReady, dimensions.columnsTotalWidth]);
+  }, [apiRef, dimensions.isReady, dimensions.columnsTotalWidth]);
   const triggerUpdateRenderContext = () => {
     const inputs = inputsSelector(apiRef, rootProps, enabled, enabledForColumns);
     const [nextRenderContext, rawRenderContext] = computeRenderContext(inputs, scrollPosition);
@@ -157,9 +145,12 @@ export const useGridVirtualScroller = () => {
   const handleTouchMove = useEventCallback(event => {
     apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
   });
-  const minFirstColumn = pinnedColumns.left.length;
-  const maxLastColumn = visibleColumns.length - pinnedColumns.right.length;
   const getRows = (params = {}) => {
+    if (!params.rows && !currentPage.range) {
+      return [];
+    }
+    const columnPositions = gridColumnPositionsSelector(apiRef);
+    const currentRenderContext = params.renderContext ?? renderContext;
     const isLastSection = !hasBottomPinnedRows && params.position === undefined || hasBottomPinnedRows && params.position === 'bottom';
     const isPinnedSection = params.position !== undefined;
     let rowIndexOffset;
@@ -176,77 +167,57 @@ export const useGridVirtualScroller = () => {
         rowIndexOffset = pinnedRows.top.length;
         break;
     }
-    const firstRowToRender = renderContext.firstRowIndex;
-    const lastRowToRender = renderContext.lastRowIndex;
-    const firstColumnToRender = renderContext.firstColumnIndex;
-    const lastColumnToRender = renderContext.lastColumnIndex;
-    if (!params.rows && !currentPage.range) {
-      return [];
-    }
-    const renderedRows = params.rows ?? currentPage.rows.slice(firstRowToRender, lastRowToRender);
-
-    // If the selected row is not within the current range of rows being displayed,
-    // we need to render it at either the top or bottom of the rows,
-    // depending on whether it is above or below the range.
-    let isRowWithFocusedCellNotInRange = false;
-    if (!isPinnedSection && indexOfRowWithFocusedCell > -1 && (firstRowToRender > indexOfRowWithFocusedCell || lastRowToRender < indexOfRowWithFocusedCell)) {
-      isRowWithFocusedCellNotInRange = true;
-      const rowWithFocusedCell = currentPage.rows[indexOfRowWithFocusedCell];
-      if (indexOfRowWithFocusedCell > firstRowToRender) {
-        renderedRows.push(rowWithFocusedCell);
-      } else {
-        renderedRows.unshift(rowWithFocusedCell);
+    const rowModels = params.rows ?? currentPage.rows;
+    const firstRowToRender = currentRenderContext.firstRowIndex;
+    const lastRowToRender = Math.min(currentRenderContext.lastRowIndex, rowModels.length);
+    const rowIndexes = params.rows ? range(0, params.rows.length) : range(firstRowToRender, lastRowToRender);
+    let virtualRowIndex = -1;
+    if (!isPinnedSection && focusedCell.rowIndex !== -1) {
+      if (focusedCell.rowIndex < firstRowToRender) {
+        virtualRowIndex = focusedCell.rowIndex;
+        rowIndexes.unshift(virtualRowIndex);
       }
-    }
-    let isColumnWihFocusedCellNotInRange = false;
-    if (!isPinnedSection && (firstColumnToRender > indexOfColumnWithFocusedCell || lastColumnToRender < indexOfColumnWithFocusedCell)) {
-      isColumnWihFocusedCellNotInRange = true;
-    }
-    const {
-      focusedCellColumnIndexNotInRange,
-      renderedColumns
-    } = getRenderedColumns(visibleColumns, firstColumnToRender, lastColumnToRender, minFirstColumn, maxLastColumn, isColumnWihFocusedCellNotInRange ? indexOfColumnWithFocusedCell : -1);
-    renderedRows.forEach(row => {
-      apiRef.current.calculateColSpan({
-        rowId: row.id,
-        minFirstColumn,
-        maxLastColumn,
-        columns: visibleColumns
-      });
-      if (pinnedColumns.left.length > 0) {
-        apiRef.current.calculateColSpan({
-          rowId: row.id,
-          minFirstColumn: 0,
-          maxLastColumn: pinnedColumns.left.length,
-          columns: visibleColumns
-        });
-      }
-      if (pinnedColumns.right.length > 0) {
-        apiRef.current.calculateColSpan({
-          rowId: row.id,
-          minFirstColumn: visibleColumns.length - pinnedColumns.right.length,
-          maxLastColumn: visibleColumns.length,
-          columns: visibleColumns
-        });
+      if (focusedCell.rowIndex >= lastRowToRender) {
+        virtualRowIndex = focusedCell.rowIndex;
+        rowIndexes.push(virtualRowIndex);
       }
-    });
+    }
     const rows = [];
     const rowProps = rootProps.slotProps?.row;
-    let isRowWithFocusedCellRendered = false;
-    for (let i = 0; i < renderedRows.length; i += 1) {
+    rowIndexes.forEach(rowIndexInPage => {
       const {
         id,
         model
-      } = renderedRows[i];
-      const rowIndexInPage = (currentPage?.range?.firstRowIndex || 0) + firstRowToRender + i;
-      let index = rowIndexOffset + rowIndexInPage;
-      if (isRowWithFocusedCellNotInRange && cellFocus?.id === id) {
-        index = indexOfRowWithFocusedCell;
-        isRowWithFocusedCellRendered = true;
-      } else if (isRowWithFocusedCellRendered) {
-        index -= 1;
+      } = rowModels[rowIndexInPage];
+
+      // NOTE: This is an expensive feature, the colSpan code could be optimized.
+      if (hasColSpan) {
+        const minFirstColumn = pinnedColumns.left.length;
+        const maxLastColumn = visibleColumns.length - pinnedColumns.right.length;
+        apiRef.current.calculateColSpan({
+          rowId: id,
+          minFirstColumn,
+          maxLastColumn,
+          columns: visibleColumns
+        });
+        if (pinnedColumns.left.length > 0) {
+          apiRef.current.calculateColSpan({
+            rowId: id,
+            minFirstColumn: 0,
+            maxLastColumn: pinnedColumns.left.length,
+            columns: visibleColumns
+          });
+        }
+        if (pinnedColumns.right.length > 0) {
+          apiRef.current.calculateColSpan({
+            rowId: id,
+            minFirstColumn: visibleColumns.length - pinnedColumns.right.length,
+            maxLastColumn: visibleColumns.length,
+            columns: visibleColumns
+          });
+        }
       }
-      const isRowNotVisible = isRowWithFocusedCellNotInRange && cellFocus.id === id;
+      const hasFocus = cellFocus?.id === id;
       const baseRowHeight = !apiRef.current.rowHasAutoHeight(id) ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       let isSelected;
       if (selectedRowsLookup[id] == null) {
@@ -262,47 +233,51 @@ export const useGridVirtualScroller = () => {
       if (isLastSection) {
         if (!isPinnedSection) {
           const lastIndex = currentPage.rows.length - 1;
-          const isLastVisibleRowIndex = isRowWithFocusedCellNotInRange ? firstRowToRender + i === lastIndex + 1 : firstRowToRender + i === lastIndex;
+          const isLastVisibleRowIndex = rowIndexInPage === lastIndex;
           if (isLastVisibleRowIndex) {
             isLastVisible = true;
           }
         } else {
-          isLastVisible = i === renderedRows.length - 1;
+          isLastVisible = rowIndexInPage === rowModels.length - 1;
         }
       }
-      const focusedCell = cellFocus !== null && cellFocus.id === id ? cellFocus.field : null;
-      const columnWithFocusedCellNotInRange = focusedCellColumnIndexNotInRange !== undefined && visibleColumns[focusedCellColumnIndexNotInRange];
-      const renderedColumnsWithFocusedCell = columnWithFocusedCellNotInRange && focusedCell ? [columnWithFocusedCellNotInRange, ...renderedColumns] : renderedColumns;
+      const isVirtualRow = rowIndexInPage === virtualRowIndex;
+      const isNotVisible = isVirtualRow;
       let tabbableCell = null;
       if (cellTabIndex !== null && cellTabIndex.id === id) {
         const cellParams = apiRef.current.getCellParams(id, cellTabIndex.field);
         tabbableCell = cellParams.cellMode === 'view' ? cellTabIndex.field : null;
       }
+      const offsetLeft = computeOffsetLeft(columnPositions, currentRenderContext, theme.direction, pinnedColumns.left.length);
+      const rowIndex = (currentPage?.range?.firstRowIndex || 0) + rowIndexOffset + rowIndexInPage;
       rows.push( /*#__PURE__*/_jsx(rootProps.slots.row, _extends({
         row: model,
         rowId: id,
-        index: index,
+        index: rowIndex,
+        selected: isSelected,
+        offsetTop: params.rows ? undefined : rowsMeta.positions[rowIndexInPage],
+        offsetLeft: offsetLeft,
+        dimensions: dimensions,
         rowHeight: baseRowHeight,
-        focusedCell: focusedCell,
         tabbableCell: tabbableCell,
-        focusedCellColumnIndexNotInRange: focusedCellColumnIndexNotInRange,
-        renderedColumns: renderedColumnsWithFocusedCell,
-        visibleColumns: visibleColumns,
         pinnedColumns: pinnedColumns,
-        firstColumnToRender: firstColumnToRender,
-        lastColumnToRender: lastColumnToRender,
-        selected: isSelected,
-        offsets: offsets,
-        dimensions: dimensions,
+        visibleColumns: visibleColumns,
+        renderContext: currentRenderContext,
+        focusedColumnIndex: hasFocus ? focusedCell.columnIndex : undefined,
         isFirstVisible: isFirstVisible,
         isLastVisible: isLastVisible,
-        isNotVisible: isRowNotVisible
+        isNotVisible: isNotVisible
       }, rowProps), id));
       const panel = panels.get(id);
       if (panel) {
         rows.push(panel);
       }
-    }
+      if (isLastVisible) {
+        rows.push(apiRef.current.getInfiniteLoadingTriggerElement?.({
+          lastRowId: id
+        }));
+      }
+    });
     return rows;
   };
   const needsHorizontalScrollbar = outerSize.width && columnsTotalWidth >= outerSize.width;
@@ -355,6 +330,9 @@ export const useGridVirtualScroller = () => {
   apiRef.current.register('private', {
     updateRenderContext: forceUpdateRenderContext
   });
+  useGridApiEventHandler(apiRef, 'columnsChange', forceUpdateRenderContext);
+  useGridApiEventHandler(apiRef, 'filteredRowsSet', forceUpdateRenderContext);
+  useGridApiEventHandler(apiRef, 'rowExpansionChange', forceUpdateRenderContext);
   return {
     renderContext,
     setPanels,
@@ -388,29 +366,6 @@ export const useGridVirtualScroller = () => {
     })
   };
 };
-function createGetRenderedColumns() {
-  return defaultMemoize((columns, firstColumnToRender, lastColumnToRender, minFirstColumn, maxLastColumn, indexOfColumnWithFocusedCell) => {
-    // If the selected column is not within the current range of columns being displayed,
-    // we need to render it at either the left or right of the columns,
-    // depending on whether it is above or below the range.
-    let focusedCellColumnIndexNotInRange;
-    const renderedColumns = columns.slice(firstColumnToRender, lastColumnToRender);
-    if (indexOfColumnWithFocusedCell > -1) {
-      // check if it is not on the left pinned column.
-      if (firstColumnToRender > indexOfColumnWithFocusedCell && indexOfColumnWithFocusedCell >= minFirstColumn) {
-        focusedCellColumnIndexNotInRange = indexOfColumnWithFocusedCell;
-      }
-      // check if it is not on the right pinned column.
-      else if (lastColumnToRender < indexOfColumnWithFocusedCell && indexOfColumnWithFocusedCell < maxLastColumn) {
-        focusedCellColumnIndexNotInRange = indexOfColumnWithFocusedCell;
-      }
-    }
-    return {
-      focusedCellColumnIndexNotInRange,
-      renderedColumns
-    };
-  });
-}
 function inputsSelector(apiRef, rootProps, enabled, enabledForColumns) {
   const dimensions = gridDimensionsSelector(apiRef.current.state);
   const currentPage = getVisibleRows(apiRef, rootProps);
@@ -588,14 +543,8 @@ export function areRenderContextsEqual(context1, context2) {
   }
   return context1.firstRowIndex === context2.firstRowIndex && context1.lastRowIndex === context2.lastRowIndex && context1.firstColumnIndex === context2.firstColumnIndex && context1.lastColumnIndex === context2.lastColumnIndex;
 }
-function computeOffsets(apiRef, renderContext, direction, pinnedLeftLength) {
+export function computeOffsetLeft(columnPositions, renderContext, direction, pinnedLeftLength) {
   const factor = direction === 'ltr' ? 1 : -1;
-  const rowPositions = gridRowsMetaSelector(apiRef.current.state).positions;
-  const columnPositions = gridColumnPositionsSelector(apiRef);
-  const top = rowPositions[renderContext.firstRowIndex] ?? 0;
   const left = factor * (columnPositions[renderContext.firstColumnIndex] ?? 0) - (columnPositions[pinnedLeftLength] ?? 0);
-  return {
-    top,
-    left
-  };
+  return left;
 }