[DataGrid] Refactor: row virtualization & rendering (mui#12247)

packages/x-data-grid-pro/src/components/GridPinnedRows.tsx

@@ -5,6 +5,7 @@ import { getDataGridUtilityClass, gridClasses, useGridSelector } from '@mui/x-da
 import {
  GridPinnedRowsProps,
  gridPinnedRowsSelector,
+ gridRenderContextSelector,
  useGridPrivateApiContext,
 } from '@mui/x-data-grid/internals';
 
@@ -19,10 +20,22 @@ export function GridPinnedRows({ position, virtualScroller, ...other }: GridPinn
  const classes = useUtilityClasses();
  const apiRef = useGridPrivateApiContext();
 
+ const renderContext = useGridSelector(apiRef, gridRenderContextSelector);
  const pinnedRowsData = useGridSelector(apiRef, gridPinnedRowsSelector);
+ const rows = pinnedRowsData[position];
+
  const pinnedRows = virtualScroller.getRows({
  position,
- rows: pinnedRowsData[position],
+ rows,
+ renderContext: React.useMemo(
+ () => ({
+ firstRowIndex: 0,
+ lastRowIndex: rows.length,
+ firstColumnIndex: renderContext.firstColumnIndex,
+ lastColumnIndex: renderContext.lastColumnIndex,
+ }),
+ [rows, renderContext.firstColumnIndex, renderContext.lastColumnIndex],
+ ),
  });
 
  return (

packages/x-data-grid/src/components/GridRow.tsx

@@ -15,6 +15,7 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import type { DataGridProcessedProps } from '../models/props/DataGridProps';
 import type { GridPinnedColumns } from '../hooks/features/columns';
 import type { GridStateColDef } from '../models/colDef/gridColDef';
+import type { GridRenderContext } from '../models/params/gridScrollParams';
 import { gridColumnPositionsSelector } from '../hooks/features/columns/gridColumnsSelector';
 import { useGridSelector, objectShallowCompare } from '../hooks/utils/useGridSelector';
 import { GridRowClassNameParams } from '../models/params/gridRowParams';
@@ -23,7 +24,6 @@ import { findParentElementFromClassName, isEventTargetInPortal } from '../utils/
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
-import type { GridVirtualizationState } from '../hooks/features/virtualization';
 import type { GridDimensions } from '../hooks/features/dimensions';
 import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
 import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
@@ -33,6 +33,7 @@ import { PinnedPosition } from './cell/GridCell';
 import { GridScrollbarFillerCell as ScrollbarFiller } from './GridScrollbarFillerCell';
 
 export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
+ row: GridRowModel;
  rowId: GridRowId;
  selected: boolean;
  /**
@@ -41,28 +42,25 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
  */
  index: number;
  rowHeight: number | 'auto';
- offsets: GridVirtualizationState['offsets'];
+ offsetTop: number | undefined;
+ offsetLeft: number;
  dimensions: GridDimensions;
- firstColumnToRender: number;
- lastColumnToRender: number;
+ renderContext: GridRenderContext;
  visibleColumns: GridStateColDef[];
- renderedColumns: GridStateColDef[];
  pinnedColumns: GridPinnedColumns;
  /**
  * Determines which cell has focus.
  * If `null`, no cell in this row has focus.
  */
- focusedCell: string | null;
+ focusedColumnIndex: number | undefined;
  /**
  * Determines which cell should be tabbable by having tabIndex=0.
  * If `null`, no cell in this row is in the tab sequence.
  */
  tabbableCell: string | null;
- row?: GridRowModel;
  isFirstVisible: boolean;
  isLastVisible: boolean;
- focusedCellColumnIndexNotInRange?: number;
- isNotVisible?: boolean;
+ isNotVisible: boolean;
  onClick?: React.MouseEventHandler<HTMLDivElement>;
  onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
  onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
@@ -121,15 +119,14 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
  rowHeight,
  className,
  visibleColumns,
- renderedColumns,
  pinnedColumns,
- offsets,
+ offsetTop,
+ offsetLeft,
  dimensions,
- firstColumnToRender,
- lastColumnToRender,
+ renderContext,
+ focusedColumnIndex,
  isFirstVisible,
  isLastVisible,
- focusedCellColumnIndexNotInRange,
  isNotVisible,
  focusedCell,
  tabbableCell,
@@ -154,6 +151,16 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
  const rowNode = apiRef.current.getRowNode(rowId);
  const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
 
+ const hasFocusCell = focusedColumnIndex !== undefined;
+ const hasVirtualFocusCellLeft =
+ hasFocusCell &&
+ focusedColumnIndex >= pinnedColumns.left.length &&
+ focusedColumnIndex < renderContext.firstColumnIndex;
+ const hasVirtualFocusCellRight =
+ hasFocusCell &&
+ focusedColumnIndex < visibleColumns.length - pinnedColumns.right.length &&
+ focusedColumnIndex >= renderContext.lastColumnIndex;
+
  const ariaRowIndex = index + headerGroupingMaxDepth + 2; // 1 for the header row and 1 as it's 1-based
 
  const ownerState = {
@@ -354,10 +361,13 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
  indexRelativeToAllColumns,
  );
 
- if (!cellColSpanInfo || cellColSpanInfo.spannedByColSpan) {
+ if (cellColSpanInfo?.spannedByColSpan) {
  return null;
  }
 
+ const width = cellColSpanInfo?.cellProps.width ?? column.computedWidth;
+ const colSpan = cellColSpanInfo?.cellProps.colSpan ?? 1;
+
  let pinnedOffset: number;
  // FIXME: Why is the switch check exhaustiveness not validated with typescript-eslint?
  // eslint-disable-next-line default-case
@@ -373,13 +383,12 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
  scrollbarWidth;
  break;
  case PinnedPosition.NONE:
+ case PinnedPosition.VIRTUAL:
  pinnedOffset = 0;
  break;
  }
 
  if (rowNode?.type === 'skeletonRow') {
- const { width } = cellColSpanInfo.cellProps;
-
  return (
  <slots.skeletonCell
  key={column.field}
@@ -391,8 +400,6 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
  );
  }
 
- const { colSpan, width } = cellColSpanInfo.cellProps;
-
  const editCellState = editRowsState[rowId]?.[column.field] ?? null;
 
  // when the cell is a reorder cell we are not allowing to reorder the col
@@ -405,13 +412,7 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
 
  const disableDragEvents = !(canReorderColumn || (isReorderCell && canReorderRow));
 
- let cellIsNotVisible = false;
- if (
- focusedCellColumnIndexNotInRange !== undefined &&
- visibleColumns[focusedCellColumnIndexNotInRange].field === column.field
- ) {
- cellIsNotVisible = true;
- }
+ const cellIsNotVisible = pinnedPosition === PinnedPosition.VIRTUAL;
 
  return (
  <slots.cell
@@ -468,21 +469,33 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
  visibleColumns.length - pinnedColumns.left.length - pinnedColumns.right.length;
 
  const cells = [] as React.ReactNode[];
- for (let i = 0; i < renderedColumns.length; i += 1) {
- const column = renderedColumns[i];
-
- let indexRelativeToAllColumns = firstColumnToRender + i;
- if (focusedCellColumnIndexNotInRange !== undefined && focusedCell) {
- if (visibleColumns[focusedCellColumnIndexNotInRange].field === column.field) {
- indexRelativeToAllColumns = focusedCellColumnIndexNotInRange;
- } else {
- indexRelativeToAllColumns -= 1;
- }
- }
-
- const indexInSection = indexRelativeToAllColumns - pinnedColumns.left.length;
+ if (hasVirtualFocusCellLeft) {
+ cells.push(
+ getCell(
+ visibleColumns[focusedColumnIndex],
+ focusedColumnIndex - pinnedColumns.left.length,
+ focusedColumnIndex,
+ middleColumnsLength,
+ PinnedPosition.VIRTUAL,
+ ),
+ );
+ }
+ for (let i = renderContext.firstColumnIndex; i < renderContext.lastColumnIndex; i += 1) {
+ const column = visibleColumns[i];
+ const indexInSection = i - pinnedColumns.left.length;
 
- cells.push(getCell(column, indexInSection, indexRelativeToAllColumns, middleColumnsLength));
+ cells.push(getCell(column, indexInSection, i, middleColumnsLength));
+ }
+ if (hasVirtualFocusCellRight) {
+ cells.push(
+ getCell(
+ visibleColumns[focusedColumnIndex],
+ focusedColumnIndex - pinnedColumns.left.length,
+ focusedColumnIndex,
+ middleColumnsLength,
+ PinnedPosition.VIRTUAL,
+ ),
+ );
  }
 
  const eventHandlers = row
@@ -517,7 +530,7 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
  <div
  role="presentation"
  className={gridClasses.cellOffsetLeft}
- style={{ width: offsets.left }}
+ style={{ width: offsetLeft }}
  />
  {cells}
  {emptyCellWidth > 0 && <EmptyCell width={emptyCellWidth} />}
@@ -568,33 +581,33 @@ GridRow.propTypes = {
  width: PropTypes.number.isRequired,
  }).isRequired,
  }).isRequired,
- firstColumnToRender: PropTypes.number.isRequired,
  /**
  * Determines which cell has focus.
  * If `null`, no cell in this row has focus.
  */
- focusedCell: PropTypes.string,
- focusedCellColumnIndexNotInRange: PropTypes.number,
+ focusedColumnIndex: PropTypes.number,
  /**
  * Index of the row in the whole sorted and filtered dataset.
  * If some rows above have expanded children, this index also take those children into account.
  */
  index: PropTypes.number.isRequired,
  isFirstVisible: PropTypes.bool.isRequired,
  isLastVisible: PropTypes.bool.isRequired,
- isNotVisible: PropTypes.bool,
- lastColumnToRender: PropTypes.number.isRequired,
- offsets: PropTypes.shape({
- left: PropTypes.number.isRequired,
- top: PropTypes.number.isRequired,
- }).isRequired,
+ isNotVisible: PropTypes.bool.isRequired,
+ offsetLeft: PropTypes.number.isRequired,
+ offsetTop: PropTypes.number,
  onClick: PropTypes.func,
  onDoubleClick: PropTypes.func,
  onMouseEnter: PropTypes.func,
  onMouseLeave: PropTypes.func,
  pinnedColumns: PropTypes.object.isRequired,
- renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
- row: PropTypes.object,
+ renderContext: PropTypes.shape({
+ firstColumnIndex: PropTypes.number.isRequired,
+ firstRowIndex: PropTypes.number.isRequired,
+ lastColumnIndex: PropTypes.number.isRequired,
+ lastRowIndex: PropTypes.number.isRequired,
+ }).isRequired,
+ row: PropTypes.object.isRequired,
  rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
  selected: PropTypes.bool.isRequired,

packages/x-data-grid/src/components/cell/GridCell.tsx

@@ -37,6 +37,7 @@ export enum PinnedPosition {
  NONE,
  LEFT,
  RIGHT,
+ VIRTUAL,
 }
 
 export type GridCellProps = {
@@ -494,7 +495,7 @@ GridCell.propTypes = {
  onMouseDown: PropTypes.func,
  onMouseUp: PropTypes.func,
  pinnedOffset: PropTypes.number.isRequired,
- pinnedPosition: PropTypes.oneOf([0, 1, 2]).isRequired,
+ pinnedPosition: PropTypes.oneOf([0, 1, 2, 3]).isRequired,
  rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
  sectionIndex: PropTypes.number.isRequired,
  sectionLength: PropTypes.number.isRequired,

packages/x-data-grid/src/components/containers/GridRootStyles.ts

@@ -349,7 +349,7 @@ export const GridRootStyles = styled('div', {
  [`& .${c.columnSeparator}`]: {
  visibility: 'hidden',
  position: 'absolute',
- zIndex: 100,
+ zIndex: 3,
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',

packages/x-data-grid/src/components/virtualization/GridBottomContainer.tsx

@@ -13,7 +13,7 @@ const useUtilityClasses = () => {
 
 const Element = styled('div')({
  position: 'sticky',
- zIndex: 2,
+ zIndex: 4,
  bottom: 'calc(var(--DataGrid-hasScrollX) * var(--DataGrid-scrollbarSize))',
 });
 

packages/x-data-grid/src/components/virtualization/GridTopContainer.tsx

@@ -13,7 +13,7 @@ const useUtilityClasses = () => {
 
 const Element = styled('div')({
  position: 'sticky',
- zIndex: 2,
+ zIndex: 4,
  top: 0,
  '&::after': {
  content: '" "',

packages/x-data-grid/src/components/virtualization/GridVirtualScrollerRenderZone.tsx

@@ -4,7 +4,8 @@ import { styled, SxProps, Theme } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { gridOffsetsSelector } from '../../hooks/features/virtualization';
+import { gridRowsMetaSelector } from '../../hooks/features/rows';
+import { gridRenderContextSelector } from '../../hooks/features/virtualization';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
@@ -39,15 +40,19 @@ const GridVirtualScrollerRenderZone = React.forwardRef<
  const apiRef = useGridApiContext();
  const rootProps = useGridRootProps();
  const classes = useUtilityClasses(rootProps);
- const offsets = useGridSelector(apiRef, gridOffsetsSelector);
+ const offsetTop = useGridSelector(apiRef, () => {
+ const renderContext = gridRenderContextSelector(apiRef);
+ const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
+ return rowsMeta.positions[renderContext.firstRowIndex] ?? 0;
+ });
 
  return (
  <VirtualScrollerRenderZoneRoot
  ref={ref}
  className={clsx(classes.root, className)}
  ownerState={rootProps}
  style={{
- transform: `translate3d(0, ${offsets.top}px, 0)`,
+ transform: `translate3d(0, ${offsetTop}px, 0)`,
  }}
  {...other}
  />