[Data Grid] Fix row, cell and header memoizations

docs/pages/x/api/data-grid/selectors.json

@@ -552,6 +552,13 @@
     "description": "Get the visible pinned columns.",
     "supportsApiRef": true
   },
+  {
+    "name": "gridVisibleRowsSelector",
+    "returnType": "{ rows: GridRowEntry<GridValidRowModel>[]; range: { firstRowIndex: number; lastRowIndex: number } | null; rowToIndexMap: Map<GridValidRowModel, number> }",
+    "category": "Pagination",
+    "description": "Get the rows, range and rowIndex lookup map after filtering and sorting.\nDoes not contain the collapsed children.",
+    "supportsApiRef": true
+  },
   {
     "name": "selectedGridRowsCountSelector",
     "returnType": "number",

packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx

@@ -2,14 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license';
-import {
-  GridBody,
-  GridFooterPlaceholder,
-  GridHeader,
-  GridRoot,
-  GridContextProvider,
-  GridValidRowModel,
-} from '@mui/x-data-grid-pro';
+import { GridRoot, GridContextProvider, GridValidRowModel } from '@mui/x-data-grid-pro';
 import {
   propValidatorsDataGrid,
   propValidatorsDataGridPro,
@@ -62,11 +55,7 @@ const DataGridPremiumRaw = React.forwardRef(function DataGridPremium<R extends G
         ref={ref}
         {...props.slotProps?.root}
       >
-        <GridHeader />
-        <GridBody>
-          <Watermark packageName="x-data-grid-premium" releaseInfo={releaseInfo} />
-        </GridBody>
-        <GridFooterPlaceholder />
+        <Watermark packageName="x-data-grid-premium" releaseInfo={releaseInfo} />
       </GridRoot>
     </GridContextProvider>
   );

packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx

@@ -132,6 +132,7 @@ export const useDataGridPremiumComponent = (
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowPinningStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
@@ -142,7 +143,6 @@ export const useDataGridPremiumComponent = (
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnReorderStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);

packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx

@@ -2,14 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license';
-import {
-  GridBody,
-  GridFooterPlaceholder,
-  GridHeader,
-  GridRoot,
-  GridContextProvider,
-  GridValidRowModel,
-} from '@mui/x-data-grid';
+import { GridRoot, GridContextProvider, GridValidRowModel } from '@mui/x-data-grid';
 import { validateProps } from '@mui/x-data-grid/internals';
 import { useDataGridProComponent } from './useDataGridProComponent';
 import { DataGridProProps } from '../models/dataGridProProps';
@@ -49,11 +42,7 @@ const DataGridProRaw = React.forwardRef(function DataGridPro<R extends GridValid
         ref={ref}
         {...props.slotProps?.root}
       >
-        <GridHeader />
-        <GridBody>
-          <Watermark packageName="x-data-grid-pro" releaseInfo={releaseInfo} />
-        </GridBody>
-        <GridFooterPlaceholder />
+        <Watermark packageName="x-data-grid-pro" releaseInfo={releaseInfo} />
       </GridRoot>
     </GridContextProvider>
   );

packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx

@@ -119,6 +119,7 @@ export const useDataGridProComponent = (
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
   useGridInitializeState(rowPinningStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
@@ -129,7 +130,6 @@ export const useDataGridProComponent = (
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnReorderStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx

@@ -22,17 +22,18 @@ import {
   GridFilterInputSingleSelect,
   gridFilterModelSelector,
   gridFilterableColumnLookupSelector,
-  GridPinnedColumnPosition,
 } from '@mui/x-data-grid';
 import {
+  PinnedColumnPosition,
   GridStateColDef,
   useGridPrivateApiContext,
   gridHeaderFilteringEditFieldSelector,
   gridHeaderFilteringMenuSelector,
   isNavigationKey,
-  shouldCellShowLeftBorder,
-  shouldCellShowRightBorder,
+  rtlFlipSide,
+  attachPinnedStyle,
 } from '@mui/x-data-grid/internals';
+import { useRtl } from '@mui/system/RtlProvider';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProProcessedProps } from '../../models/dataGridProProps';
 import { GridHeaderFilterMenuContainer } from './GridHeaderFilterMenuContainer';
@@ -54,16 +55,16 @@ export interface GridHeaderFilterCellProps extends Pick<GridStateColDef, 'header
   item: GridFilterItem;
   showClearIcon?: boolean;
   InputComponentProps: GridFilterOperator['InputComponentProps'];
-  pinnedPosition?: GridPinnedColumnPosition;
+  pinnedPosition?: PinnedColumnPosition;
+  pinnedOffset?: number;
   style?: React.CSSProperties;
-  indexInSection: number;
-  sectionLength: number;
-  gridHasFiller: boolean;
+  showLeftBorder: boolean;
+  showRightBorder: boolean;
 }
 
 type OwnerState = DataGridProProcessedProps & {
   colDef: GridColDef;
-  pinnedPosition?: GridPinnedColumnPosition;
+  pinnedPosition?: PinnedColumnPosition;
   showRightBorder: boolean;
   showLeftBorder: boolean;
 };
@@ -80,8 +81,8 @@ const useUtilityClasses = (ownerState: OwnerState) => {
       'withBorderColor',
       showRightBorder && 'columnHeader--withRightBorder',
       showLeftBorder && 'columnHeader--withLeftBorder',
-      pinnedPosition === 'left' && 'columnHeader--pinnedLeft',
-      pinnedPosition === 'right' && 'columnHeader--pinnedRight',
+      pinnedPosition === PinnedColumnPosition.LEFT && 'columnHeader--pinnedLeft',
+      pinnedPosition === PinnedColumnPosition.RIGHT && 'columnHeader--pinnedRight',
     ],
   };
 
@@ -115,14 +116,15 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
       InputComponentProps,
       showClearIcon = true,
       pinnedPosition,
+      pinnedOffset,
       style: styleProp,
-      indexInSection,
-      sectionLength,
-      gridHasFiller,
+      showLeftBorder,
+      showRightBorder,
       ...other
     } = props;
 
     const apiRef = useGridPrivateApiContext();
+    const isRtl = useRtl();
     const columnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
     const rootProps = useGridRootProps();
     const cellRef = React.useRef<HTMLDivElement>(null);
@@ -293,15 +295,6 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
       [onMouseDown, onKeyDown, publish],
     );
 
-    const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
-    const showRightBorder = shouldCellShowRightBorder(
-      pinnedPosition,
-      indexInSection,
-      sectionLength,
-      rootProps.showCellVerticalBorder,
-      gridHasFiller,
-    );
-
     const ownerState: OwnerState = {
       ...rootProps,
       pinnedPosition,
@@ -324,15 +317,20 @@ const GridHeaderFilterCell = React.forwardRef<HTMLDivElement, GridHeaderFilterCe
 
     const isFilterActive = isApplied || hasFocus;
 
+    const style = {
+      height,
+      width,
+      ...styleProp,
+    };
+
+    const pinnedSide = rtlFlipSide(pinnedPosition, isRtl);
+    attachPinnedStyle(style, pinnedSide, pinnedOffset);
+
     return (
       <div
         className={clsx(classes.root, headerClassName)}
         ref={handleRef}
-        style={{
-          height,
-          width,
-          ...styleProp,
-        }}
+        style={style}
         role="columnheader"
         aria-colindex={colIndex + 1}
         aria-label={headerFilterComponent == null ? (colDef.headerName ?? colDef.field) : undefined}
@@ -405,7 +403,6 @@ GridHeaderFilterCell.propTypes = {
   // ----------------------------------------------------------------------
   colDef: PropTypes.object.isRequired,
   colIndex: PropTypes.number.isRequired,
-  gridHasFiller: PropTypes.bool.isRequired,
   hasFocus: PropTypes.bool,
   /**
    * Class name added to the column header cell.
@@ -415,17 +412,18 @@ GridHeaderFilterCell.propTypes = {
     current: PropTypes.object,
   }).isRequired,
   height: PropTypes.number.isRequired,
-  indexInSection: PropTypes.number.isRequired,
   InputComponentProps: PropTypes.object,
   item: PropTypes.shape({
     field: PropTypes.string.isRequired,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     operator: PropTypes.string.isRequired,
     value: PropTypes.any,
   }).isRequired,
-  pinnedPosition: PropTypes.oneOf(['left', 'right']),
-  sectionLength: PropTypes.number.isRequired,
+  pinnedOffset: PropTypes.number,
+  pinnedPosition: PropTypes.oneOf([0, 1, 2, 3]),
   showClearIcon: PropTypes.bool,
+  showLeftBorder: PropTypes.bool.isRequired,
+  showRightBorder: PropTypes.bool.isRequired,
   sortIndex: PropTypes.number,
   style: PropTypes.object,
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,

packages/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx

@@ -6,7 +6,6 @@ import {
   gridTabIndexColumnHeaderFilterSelector,
   getDataGridUtilityClass,
   GridFilterItem,
-  GridPinnedColumnPosition,
   gridDimensionsSelector,
 } from '@mui/x-data-grid';
 import {
@@ -17,6 +16,9 @@ import {
   getGridFilter,
   GridStateColDef,
   GridColumnHeaderRow,
+  shouldCellShowLeftBorder,
+  shouldCellShowRightBorder,
+  PinnedColumnPosition,
 } from '@mui/x-data-grid/internals';
 import composeClasses from '@mui/utils/composeClasses';
 import { useGridRootProps } from '../../utils/useGridRootProps';
@@ -46,12 +48,13 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
   );
   const {
     getColumnsToRender,
+    getPinnedCellOffset,
     renderContext,
     leftRenderContext,
     rightRenderContext,
     pinnedColumns,
     visibleColumns,
-    getCellOffsetStyle,
+    columnPositions,
     ...otherProps
   } = useGridColumnHeadersCommunity({
     ...props,
@@ -117,11 +120,27 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
       const item = getFilterItem(colDef);
 
       const pinnedPosition = params?.position;
-      const style = getCellOffsetStyle({
+      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+      const pinnedOffset = getPinnedCellOffset(
         pinnedPosition,
+        colDef.computedWidth,
         columnIndex,
-        computedWidth: colDef.computedWidth,
-      });
+        columnPositions,
+        dimensions.columnsTotalWidth,
+        scrollbarWidth,
+      );
+
+      const indexInSection = i;
+      const sectionLength = renderedColumns.length;
+
+      const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
+      const showRightBorder = shouldCellShowRightBorder(
+        pinnedPosition,
+        indexInSection,
+        sectionLength,
+        rootProps.showCellVerticalBorder,
+        gridHasFiller,
+      );
 
       filters.push(
         <rootProps.slots.headerFilterCell
@@ -137,10 +156,9 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
           data-field={colDef.field}
           item={item}
           pinnedPosition={pinnedPosition}
-          style={style}
-          indexInSection={i}
-          sectionLength={renderedColumns.length}
-          gridHasFiller={gridHasFiller}
+          pinnedOffset={pinnedOffset}
+          showLeftBorder={showLeftBorder}
+          showRightBorder={showRightBorder}
           {...rootProps.slotProps?.headerFilterCell}
         />,
       );
@@ -164,7 +182,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
       >
         {leftRenderContext &&
           getColumnFilters({
-            position: GridPinnedColumnPosition.LEFT,
+            position: PinnedColumnPosition.LEFT,
             renderContext: leftRenderContext,
             maxLastColumn: leftRenderContext.lastColumnIndex,
           })}
@@ -174,7 +192,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
         })}
         {rightRenderContext &&
           getColumnFilters({
-            position: GridPinnedColumnPosition.RIGHT,
+            position: PinnedColumnPosition.RIGHT,
             renderContext: rightRenderContext,
             maxLastColumn: rightRenderContext.lastColumnIndex,
           })}

packages/x-data-grid/src/DataGrid/DataGrid.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { GridBody, GridFooterPlaceholder, GridHeader, GridRoot } from '../components';
+import { GridRoot } from '../components';
 import { useGridAriaAttributes } from '../hooks/utils/useGridAriaAttributes';
 import { useGridRowAriaAttributes } from '../hooks/features/rows/useGridRowAriaAttributes';
 import { DataGridProcessedProps, DataGridProps } from '../models/props/DataGridProps';
@@ -60,11 +60,7 @@ const DataGridRaw = React.forwardRef(function DataGrid<R extends GridValidRowMod
         sx={props.sx}
         ref={ref}
         {...props.slotProps?.root}
-      >
-        <GridHeader />
-        <GridBody />
-        <GridFooterPlaceholder />
-      </GridRoot>
+      />
     </GridContextProvider>
   );
 });

packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx

@@ -83,6 +83,7 @@ export const useDataGridComponent = (
   useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
   useGridInitializeState(editingStateInitializer, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
@@ -92,7 +93,6 @@ export const useDataGridComponent = (
   useGridInitializeState(rowSpanningStateInitializer, apiRef, props);
   useGridInitializeState(densityStateInitializer, apiRef, props);
   useGridInitializeState(columnResizeStateInitializer, apiRef, props);
-  useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);