@mui/x-data-grid 8.8.0 → 8.9.2

package/hooks/core/pipeProcessing/useGridPipeProcessing.js

@@ -57,7 +57,8 @@ const useGridPipeProcessing = apiRef => {
       cache.current[group] = {
         processors: new Map(),
         processorsAsArray: [],
-        appliers: {}
+        appliers: {},
+        processorsUpdated: false
       };
     }
     const groupCache = cache.current[group];
@@ -65,19 +66,20 @@ const useGridPipeProcessing = apiRef => {
     if (oldProcessor !== processor) {
       groupCache.processors.set(id, processor);
       groupCache.processorsAsArray = Array.from(cache.current[group].processors.values()).filter(processorValue => processorValue !== null);
-      runAppliers(groupCache);
+      groupCache.processorsUpdated = true;
     }
     return () => {
       cache.current[group].processors.set(id, null);
       cache.current[group].processorsAsArray = Array.from(cache.current[group].processors.values()).filter(processorValue => processorValue !== null);
     };
-  }, [runAppliers]);
+  }, []);
   const registerPipeApplier = React.useCallback((group, id, applier) => {
     if (!cache.current[group]) {
       cache.current[group] = {
         processors: new Map(),
         processorsAsArray: [],
-        appliers: {}
+        appliers: {},
+        processorsUpdated: false
       };
     }
     cache.current[group].appliers[id] = applier;
@@ -90,6 +92,18 @@ const useGridPipeProcessing = apiRef => {
   const requestPipeProcessorsApplication = React.useCallback(group => {
     runAppliers(cache.current[group]);
   }, [runAppliers]);
+  const runAppliersForPendingProcessors = React.useCallback(() => {
+    for (const group in cache.current) {
+      if (!Object.prototype.hasOwnProperty.call(cache.current, group)) {
+        continue;
+      }
+      const groupCache = cache.current[group];
+      if (groupCache.processorsUpdated) {
+        groupCache.processorsUpdated = false;
+        runAppliers(groupCache);
+      }
+    }
+  }, [runAppliers]);
   const applyPipeProcessors = React.useCallback((...args) => {
     const [group, value, context] = args;
     if (!cache.current[group]) {
@@ -105,7 +119,8 @@ const useGridPipeProcessing = apiRef => {
   const preProcessingPrivateApi = {
     registerPipeProcessor,
     registerPipeApplier,
-    requestPipeProcessorsApplication
+    requestPipeProcessorsApplication,
+    runAppliersForPendingProcessors
   };
   const preProcessingPublicApi = {
     unstable_applyPipeProcessors: applyPipeProcessors

package/hooks/core/useGridProps.d.ts

@@ -1,8 +1,8 @@
 import type { RefObject } from '@mui/x-internals/types';
-import type { DataGridProps } from "../../models/props/DataGridProps.js";
+import type { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 import type { GridPrivateApiCommon } from "../../models/api/gridApiCommon.js";
 import type { GridStateInitializer } from "../utils/useGridInitializeState.js";
-type Props = Pick<DataGridProps, 'getRowId'>;
+type Props = Pick<DataGridProcessedProps, 'getRowId' | 'listView'>;
 export declare const propsStateInitializer: GridStateInitializer<Props>;
 export declare const useGridProps: <PrivateApi extends GridPrivateApiCommon>(apiRef: RefObject<PrivateApi>, props: Props) => void;
 export {};

package/hooks/core/useGridProps.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 const propsStateInitializer = (state, props) => {
   return (0, _extends2.default)({}, state, {
     props: {
+      listView: props.listView,
       getRowId: props.getRowId
     }
   });
@@ -21,9 +22,10 @@ const useGridProps = (apiRef, props) => {
   React.useEffect(() => {
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       props: {
+        listView: props.listView,
         getRowId: props.getRowId
       }
     }));
-  }, [apiRef, props.getRowId]);
+  }, [apiRef, props.listView, props.getRowId]);
 };
 exports.useGridProps = useGridProps;

package/hooks/core/useGridVirtualizer.d.ts

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

package/hooks/core/useGridVirtualizer.js

@@ -0,0 +1,231 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridVirtualizer = useGridVirtualizer;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _math = require("@mui/x-internals/math");
+var _store = require("@mui/x-internals/store");
+var _xVirtualizer = require("@mui/x-virtualizer");
+var _useFirstRender = require("../utils/useFirstRender");
+var _createSelector = require("../../utils/createSelector");
+var _useGridSelector = require("../utils/useGridSelector");
+var _gridDimensionsSelectors = require("../features/dimensions/gridDimensionsSelectors");
+var _density = require("../features/density");
+var _gridColumnsSelector = require("../features/columns/gridColumnsSelector");
+var _gridRowsSelector = require("../features/rows/gridRowsSelector");
+var _useGridVisibleRows = require("../utils/useGridVisibleRows");
+var _pagination = require("../features/pagination");
+var _gridFocusedVirtualCellSelector = require("../features/virtualization/gridFocusedVirtualCellSelector");
+var _rowSelection = require("../features/rowSelection");
+var _dataGridPropsDefaultValues = require("../../constants/dataGridPropsDefaultValues");
+var _gridRowsUtils = require("../features/rows/gridRowsUtils");
+var _gridColumnsUtils = require("../features/columns/gridColumnsUtils");
+var _jsxRuntime = require("react/jsx-runtime");
+function identity(x) {
+  return x;
+}
+const columnsTotalWidthSelector = (0, _createSelector.createSelector)(_gridColumnsSelector.gridVisibleColumnDefinitionsSelector, _gridColumnsSelector.gridColumnPositionsSelector, (visibleColumns, positions) => {
+  const colCount = visibleColumns.length;
+  if (colCount === 0) {
+    return 0;
+  }
+  return (0, _math.roundToDecimalPlaces)(positions[colCount - 1] + visibleColumns[colCount - 1].computedWidth, 1);
+});
+
+/**
+ * Virtualizer setup
+ */
+function useGridVirtualizer(apiRef, rootProps) {
+  const isRtl = (0, _RtlProvider.useRtl)();
+  const {
+    listView
+  } = rootProps;
+  const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridVisibleColumnDefinitionsSelector);
+  const pinnedRows = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridPinnedRowsSelector);
+  const pinnedColumns = (0, _gridColumnsSelector.gridVisiblePinnedColumnDefinitionsSelector)(apiRef);
+  const rowSelectionManager = (0, _useGridSelector.useGridSelector)(apiRef, _rowSelection.gridRowSelectionManagerSelector);
+  const isRowSelected = id => rowSelectionManager.has(id) && apiRef.current.isRowSelectable(id);
+  const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef);
+  const hasColSpan = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridHasColSpanSelector);
+
+  /* TODO: extract dimensions code */
+  const contentHeight = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridContentHeightSelector);
+  const verticalScrollbarWidth = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridVerticalScrollbarWidthSelector);
+  const hasFiller = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasFillerSelector);
+  const {
+    autoHeight
+  } = rootProps;
+  const scrollReset = listView;
+
+  // <DIMENSIONS>
+  const density = (0, _useGridSelector.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
+  const baseRowHeight = (0, _gridRowsUtils.getValidRowHeight)(rootProps.rowHeight, _dataGridPropsDefaultValues.DATA_GRID_PROPS_DEFAULT_VALUES.rowHeight, _gridRowsUtils.rowHeightWarning);
+  const rowHeight = Math.floor(baseRowHeight * density);
+  const headerHeight = Math.floor(rootProps.columnHeaderHeight * density);
+  const groupHeaderHeight = Math.floor((rootProps.columnGroupHeaderHeight ?? rootProps.columnHeaderHeight) * density);
+  const headerFilterHeight = Math.floor((rootProps.headerFilterHeight ?? rootProps.columnHeaderHeight) * density);
+  const columnsTotalWidth = (0, _useGridSelector.useGridSelector)(apiRef, columnsTotalWidthSelector);
+  const headersTotalHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, rootProps);
+  const leftPinnedWidth = pinnedColumns.left.reduce((w, col) => w + col.computedWidth, 0);
+  const rightPinnedWidth = pinnedColumns.right.reduce((w, col) => w + col.computedWidth, 0);
+  const dimensions = {
+    rowHeight,
+    headerHeight,
+    groupHeaderHeight,
+    headerFilterHeight,
+    columnsTotalWidth,
+    headersTotalHeight,
+    leftPinnedWidth,
+    rightPinnedWidth
+  };
+
+  // </DIMENSIONS>
+
+  // <ROWS_META>
+  const dataRowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowCountSelector);
+  const pagination = (0, _useGridSelector.useGridSelector)(apiRef, _pagination.gridPaginationSelector);
+  const rowCount = Math.min(pagination.enabled ? pagination.paginationModel.pageSize : dataRowCount, dataRowCount);
+  const {
+    getRowHeight,
+    getEstimatedRowHeight,
+    getRowSpacing
+  } = rootProps;
+  // </ROWS_META>
+
+  const focusedVirtualCell = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusedVirtualCellSelector.gridFocusedVirtualCellSelector);
+  const virtualizer = (0, _xVirtualizer.useVirtualizer)({
+    scrollbarSize: rootProps.scrollbarSize,
+    dimensions,
+    initialState: {
+      scroll: rootProps.initialState?.scroll,
+      dimensions: apiRef.current.state.dimensions,
+      rowSpanning: apiRef.current.state.rowSpanning,
+      virtualization: apiRef.current.state.virtualization
+    },
+    isRtl,
+    rows: currentPage.rows,
+    range: currentPage.range,
+    rowIdToIndexMap: currentPage.rowIdToIndexMap,
+    rowCount,
+    columns: visibleColumns,
+    pinnedRows,
+    pinnedColumns,
+    refs: {
+      container: apiRef.current.mainElementRef,
+      scroller: apiRef.current.virtualScrollerRef,
+      scrollbarVertical: apiRef.current.virtualScrollbarVerticalRef,
+      scrollbarHorizontal: apiRef.current.virtualScrollbarHorizontalRef
+    },
+    hasColSpan,
+    contentHeight,
+    minimalContentHeight: _gridRowsUtils.minimalContentHeight,
+    autoHeight,
+    getRowHeight: React.useMemo(() => {
+      if (!getRowHeight) {
+        return undefined;
+      }
+      return rowEntry => getRowHeight((0, _extends2.default)({}, rowEntry, {
+        densityFactor: density
+      }));
+    }, [getRowHeight, density]),
+    getEstimatedRowHeight: React.useMemo(() => getEstimatedRowHeight ? rowEntry => getEstimatedRowHeight((0, _extends2.default)({}, rowEntry, {
+      densityFactor: density
+    })) : undefined, [getEstimatedRowHeight, density]),
+    getRowSpacing: React.useMemo(() => getRowSpacing ? (rowEntry, visibility) => getRowSpacing((0, _extends2.default)({}, rowEntry, visibility, {
+      indexRelativeToCurrentPage: apiRef.current.getRowIndexRelativeToVisibleRows(rowEntry.id)
+    })) : undefined, [apiRef, getRowSpacing]),
+    applyRowHeight: (0, _useEventCallback.default)((entry, row) => apiRef.current.unstable_applyPipeProcessors('rowHeight', entry, row)),
+    virtualizeColumnsWithAutoRowHeight: rootProps.virtualizeColumnsWithAutoRowHeight,
+    focusedVirtualCell: (0, _useEventCallback.default)(() => focusedVirtualCell),
+    rowBufferPx: rootProps.rowBufferPx,
+    columnBufferPx: rootProps.columnBufferPx,
+    resizeThrottleMs: rootProps.resizeThrottleMs,
+    onResize: (0, _useEventCallback.default)(size => apiRef.current.publishEvent('resize', size)),
+    onWheel: (0, _useEventCallback.default)(event => {
+      apiRef.current.publishEvent('virtualScrollerWheel', {}, event);
+    }),
+    onTouchMove: (0, _useEventCallback.default)(event => {
+      apiRef.current.publishEvent('virtualScrollerTouchMove', {}, event);
+    }),
+    onRenderContextChange: (0, _useEventCallback.default)(nextRenderContext => {
+      apiRef.current.publishEvent('renderedRowsIntervalChange', nextRenderContext);
+    }),
+    onScrollChange: (scrollPosition, nextRenderContext) => {
+      apiRef.current.publishEvent('scrollPositionChange', {
+        top: scrollPosition.top,
+        left: scrollPosition.left,
+        renderContext: nextRenderContext
+      });
+    },
+    scrollReset,
+    getColspan: (rowId, column) => {
+      if (typeof column.colSpan === 'function') {
+        const row = apiRef.current.getRow(rowId);
+        const value = apiRef.current.getRowValue(row, column);
+        return column.colSpan(value, row, column, apiRef) ?? 0;
+      }
+      return column.colSpan ?? 0;
+    },
+    renderRow: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.row, (0, _extends2.default)({
+      row: params.model,
+      rowId: params.id,
+      index: params.rowIndex,
+      selected: isRowSelected(params.id),
+      offsetLeft: params.offsetLeft,
+      columnsTotalWidth: columnsTotalWidth,
+      rowHeight: params.baseRowHeight,
+      pinnedColumns: pinnedColumns,
+      visibleColumns: params.columns,
+      firstColumnIndex: params.firstColumnIndex,
+      lastColumnIndex: params.lastColumnIndex,
+      focusedColumnIndex: params.focusedColumnIndex,
+      isFirstVisible: params.isFirstVisible,
+      isLastVisible: params.isLastVisible,
+      isNotVisible: params.isVirtualFocusRow,
+      showBottomBorder: params.showBottomBorder,
+      scrollbarWidth: verticalScrollbarWidth,
+      gridHasFiller: hasFiller
+    }, rootProps.slotProps?.row), params.id),
+    renderInfiniteLoadingTrigger: id => apiRef.current.getInfiniteLoadingTriggerElement?.({
+      lastRowId: id
+    })
+  });
+
+  // HACK: Keep the grid's store in sync with the virtualizer store. We set up the
+  // subscription in the render phase rather than in an effect because other grid
+  // initialization code runs between those two moments.
+  //
+  // TODO(v9): Remove this
+  (0, _useFirstRender.useFirstRender)(() => {
+    apiRef.current.store.state.dimensions = virtualizer.store.state.dimensions;
+    apiRef.current.store.state.rowsMeta = virtualizer.store.state.rowsMeta;
+    apiRef.current.store.state.virtualization = virtualizer.store.state.virtualization;
+  });
+  (0, _store.useStoreEffect)(virtualizer.store, identity, (_, state) => {
+    if (state.dimensions !== apiRef.current.state.dimensions) {
+      apiRef.current.setState(gridState => (0, _extends2.default)({}, gridState, {
+        dimensions: state.dimensions
+      }));
+    }
+    if (state.rowsMeta !== apiRef.current.state.rowsMeta) {
+      apiRef.current.setState(gridState => (0, _extends2.default)({}, gridState, {
+        rowsMeta: state.rowsMeta
+      }));
+    }
+    if (state.virtualization !== apiRef.current.state.virtualization) {
+      apiRef.current.setState(gridState => (0, _extends2.default)({}, gridState, {
+        virtualization: state.virtualization
+      }));
+    }
+  });
+  apiRef.current.register('private', {
+    virtualizer
+  });
+}

package/hooks/features/columnGrouping/gridColumnGroupsInterfaces.d.ts

@@ -1,4 +1,4 @@
-import { GridColumnGroup } from "../../../models/gridColumnGrouping.js";
+import { GridColumnGroup, GridColumnGroupingModel } from "../../../models/gridColumnGrouping.js";
 export type GridColumnGroupLookup = {
   [groupId: string]: Omit<GridColumnGroup, 'children'>;
 };
@@ -13,4 +13,7 @@ export interface GridColumnsGroupingState {
     [columnField: string]: GridColumnGroup['groupId'][];
   };
   maxDepth: number;
+}
+export interface GridColumnGroupingInternalCache {
+  lastColumnGroupingModel?: GridColumnGroupingModel;
 }

package/hooks/features/columnGrouping/gridColumnGroupsUtils.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.unwrapGroupingColumnModel = exports.getColumnGroupsHeaderStructure = void 0;
-var _isDeepEqual = require("@mui/x-internals/isDeepEqual");
 var _gridColumnGrouping = require("../../../models/gridColumnGrouping");
 // This is the recurrence function that help writing `unwrapGroupingColumnModel()`
 const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedGroupingModelToComplete) => {
@@ -44,45 +43,49 @@ exports.unwrapGroupingColumnModel = unwrapGroupingColumnModel;
 const getColumnGroupsHeaderStructure = (orderedColumns, unwrappedGroupingModel, pinnedFields) => {
   const getParents = field => unwrappedGroupingModel[field] ?? [];
   const groupingHeaderStructure = [];
-  const maxDepth = Math.max(...orderedColumns.map(field => getParents(field).length));
-  const haveSameParents = (field1, field2, depth) => (0, _isDeepEqual.isDeepEqual)(getParents(field1).slice(0, depth + 1), getParents(field2).slice(0, depth + 1));
-  const haveDifferentContainers = (field1, field2) => {
-    if (pinnedFields?.left && pinnedFields.left.includes(field1) && !pinnedFields.left.includes(field2)) {
-      return true;
-    }
-    if (pinnedFields?.right && !pinnedFields.right.includes(field1) && pinnedFields.right.includes(field2)) {
-      return true;
+  const maxDepth = Math.max(0, ...orderedColumns.map(field => getParents(field).length));
+  const haveSameParents = (field1, field2, depth) => {
+    const a = getParents(field1);
+    const b = getParents(field2);
+    for (let i = 0; i <= depth; i += 1) {
+      if (a[i] !== b[i]) {
+        return false;
+      }
     }
-    return false;
+    return true;
+  };
+  const haveDifferentContainers = (field1, field2) => {
+    const left = pinnedFields?.left;
+    const right = pinnedFields?.right;
+    const inLeft1 = !!left?.includes(field1);
+    const inLeft2 = !!left?.includes(field2);
+    const inRight1 = !!right?.includes(field1);
+    const inRight2 = !!right?.includes(field2);
+    return inLeft1 !== inLeft2 || inRight1 !== inRight2;
   };
   for (let depth = 0; depth < maxDepth; depth += 1) {
-    const depthStructure = orderedColumns.reduce((structure, newField) => {
-      const groupId = getParents(newField)[depth] ?? null;
-      if (structure.length === 0) {
-        return [{
-          columnFields: [newField],
+    const depthStructure = [];
+    for (let i = 0; i < orderedColumns.length; i += 1) {
+      const field = orderedColumns[i];
+      const groupId = getParents(field)[depth] ?? null;
+      if (depthStructure.length === 0) {
+        depthStructure.push({
+          columnFields: [field],
           groupId
-        }];
+        });
+        continue;
       }
-      const lastGroup = structure[structure.length - 1];
+      const lastGroup = depthStructure[depthStructure.length - 1];
       const prevField = lastGroup.columnFields[lastGroup.columnFields.length - 1];
-      const prevGroupId = lastGroup.groupId;
-      if (prevGroupId !== groupId || !haveSameParents(prevField, newField, depth) ||
-      // Fix for https://github.com/mui/mui-x/issues/7041
-      haveDifferentContainers(prevField, newField)) {
-        // It's a new group
-        return [...structure, {
-          columnFields: [newField],
+      if (lastGroup.groupId !== groupId || !haveSameParents(prevField, field, depth) || haveDifferentContainers(prevField, field)) {
+        depthStructure.push({
+          columnFields: [field],
           groupId
-        }];
+        });
+      } else {
+        lastGroup.columnFields.push(field);
       }
-
-      // It extends the previous group
-      return [...structure.slice(0, structure.length - 1), {
-        columnFields: [...lastGroup.columnFields, newField],
-        groupId
-      }];
-    }, []);
+    }
     groupingHeaderStructure.push(depthStructure);
   }
   return groupingHeaderStructure;

package/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -18,10 +18,11 @@ var _useGridEvent = require("../../utils/useGridEvent");
 var _columns = require("../columns");
 const _excluded = ["groupId", "children"];
 const createGroupLookup = columnGroupingModel => {
-  let groupLookup = {};
-  columnGroupingModel.forEach(node => {
+  const groupLookup = {};
+  for (let i = 0; i < columnGroupingModel.length; i += 1) {
+    const node = columnGroupingModel[i];
     if ((0, _gridColumnGrouping.isLeaf)(node)) {
-      return;
+      continue;
     }
     const {
         groupId,
@@ -31,10 +32,8 @@ const createGroupLookup = columnGroupingModel => {
     if (!groupId) {
       throw new Error('MUI X: An element of the columnGroupingModel does not have either `field` or `groupId`.');
     }
-    if (process.env.NODE_ENV !== 'production') {
-      if (!children) {
-        console.warn(`MUI X: group groupId=${groupId} has no children.`);
-      }
+    if (process.env.NODE_ENV !== 'production' && !children) {
+      console.warn(`MUI X: group groupId=${groupId} has no children.`);
     }
     const groupParam = (0, _extends2.default)({}, other, {
       groupId
@@ -43,13 +42,15 @@ const createGroupLookup = columnGroupingModel => {
     if (subTreeLookup[groupId] !== undefined || groupLookup[groupId] !== undefined) {
       throw new Error(`MUI X: The groupId ${groupId} is used multiple times in the columnGroupingModel.`);
     }
-    groupLookup = (0, _extends2.default)({}, groupLookup, subTreeLookup, {
-      [groupId]: groupParam
-    });
-  });
-  return (0, _extends2.default)({}, groupLookup);
+    Object.assign(groupLookup, subTreeLookup);
+    groupLookup[groupId] = groupParam;
+  }
+  return groupLookup;
 };
 const columnGroupsStateInitializer = (state, props, apiRef) => {
+  apiRef.current.caches.columnGrouping = {
+    lastColumnGroupingModel: props.columnGroupingModel
+  };
   if (!props.columnGroupingModel) {
     return state;
   }
@@ -105,6 +106,7 @@ const useGridColumnGrouping = (apiRef, props) => {
     });
   }, [apiRef, props.columnGroupingModel]);
   const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
+    apiRef.current.caches.columnGrouping.lastColumnGroupingModel = columnGroupingModel;
     // @ts-expect-error Move this logic to `Pro` package
     const pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {};
     const columnFields = (0, _columns.gridColumnFieldsSelector)(apiRef);
@@ -136,7 +138,10 @@ const useGridColumnGrouping = (apiRef, props) => {
    * EFFECTS
    */
   React.useEffect(() => {
+    if (props.columnGroupingModel === apiRef.current.caches.columnGrouping.lastColumnGroupingModel) {
+      return;
+    }
     updateColumnGroupingState(props.columnGroupingModel);
-  }, [updateColumnGroupingState, props.columnGroupingModel]);
+  }, [apiRef, updateColumnGroupingState, props.columnGroupingModel]);
 };
 exports.useGridColumnGrouping = useGridColumnGrouping;

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

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

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -11,6 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
+var _xVirtualizer = require("@mui/x-virtualizer");
 var _utils = require("../../utils");
 var _useGridRootProps = require("../../utils/useGridRootProps");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
@@ -18,7 +19,6 @@ var _useGridEvent = require("../../utils/useGridEvent");
 var _GridColumnHeaderItem = require("../../../components/columnHeaders/GridColumnHeaderItem");
 var _gridDimensionsSelectors = require("../dimensions/gridDimensionsSelectors");
 var _virtualization = require("../virtualization");
-var _useGridVirtualScroller = require("../virtualization/useGridVirtualScroller");
 var _GridColumnGroupHeader = require("../../../components/columnHeaders/GridColumnGroupHeader");
 var _columns = require("../columns");
 var _gridColumnGroupsSelector = require("../columnGrouping/gridColumnGroupsSelector");
@@ -59,7 +59,7 @@ const useGridColumnHeaders = props => {
   const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
   const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const columnsLookup = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnLookupSelector);
-  const offsetLeft = (0, _useGridVirtualScroller.computeOffsetLeft)(columnPositions, renderContext, pinnedColumns.left.length);
+  const offsetLeft = (0, _xVirtualizer.computeOffsetLeft)(columnPositions, renderContext, pinnedColumns.left.length);
   const columnsTotalWidth = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridColumnsTotalWidthSelector);
   const gridHasFiller = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasFillerSelector);
   const headerHeight = (0, _utils.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHeaderHeightSelector);
@@ -92,7 +92,8 @@ const useGridColumnHeaders = props => {
       renderContext: currentContext = renderContext
     } = params || {};
     const firstColumnToRender = currentContext.firstColumnIndex;
-    const lastColumnToRender = currentContext.lastColumnIndex;
+    // HACK: renderContext ins't always synchronized, this should be handled properly.
+    const lastColumnToRender = Math.min(currentContext.lastColumnIndex, visibleColumns.length);
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
     return {
       renderedColumns,

package/hooks/features/columns/gridColumnsInterfaces.d.ts

@@ -1,4 +1,4 @@
-import { GridColDef, GridStateColDef } from "../../../models/colDef/gridColDef.js";
+import type { GridColDef, GridStateColDef } from "../../../models/colDef/gridColDef.js";
 import type { GridColumnDimensionProperties } from "./gridColumnsUtils.js";
 export declare enum GridPinnedColumnPosition {
   LEFT = "left",
@@ -21,8 +21,8 @@ export interface GridPinnedColumnFields {
   right?: string[];
 }
 export declare const EMPTY_PINNED_COLUMN_FIELDS: {
-  left: string[];
-  right: string[];
+  left: never[];
+  right: never[];
 };
 export interface GridPinnedColumns {
   left: GridStateColDef[];

package/hooks/features/columns/gridColumnsSelector.js

@@ -7,6 +7,7 @@ exports.gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisibleColumnFi
 var _createSelector = require("../../../utils/createSelector");
 var _gridColumnsInterfaces = require("./gridColumnsInterfaces");
 var _gridCoreSelector = require("../../core/gridCoreSelector");
+var _listView = require("../listView");
 /**
  * Get the columns state
  * @category Columns
@@ -50,7 +51,7 @@ const gridInitialColumnVisibilityModelSelector = exports.gridInitialColumnVisibi
  * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Visible Columns
  */
-const gridVisibleColumnDefinitionsSelector = exports.gridVisibleColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, (columns, columnVisibilityModel) => columns.filter(column => columnVisibilityModel[column.field] !== false));
+const gridVisibleColumnDefinitionsSelector = exports.gridVisibleColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, _listView.gridListViewSelector, _listView.gridListColumnSelector, (columns, columnVisibilityModel, listView, listColumn) => listView && listColumn ? [listColumn] : columns.filter(column => columnVisibilityModel[column.field] !== false));
 
 /**
  * Get the field of each visible column.
@@ -75,7 +76,10 @@ const gridExistingPinnedColumnSelector = exports.gridExistingPinnedColumnSelecto
  * Get the visible pinned columns.
  * @category Visible Columns
  */
-const gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisiblePinnedColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, _gridCoreSelector.gridIsRtlSelector, (columnsState, model, visibleColumnFields, isRtl) => {
+const gridVisiblePinnedColumnDefinitionsSelector = exports.gridVisiblePinnedColumnDefinitionsSelector = (0, _createSelector.createSelectorMemoized)(gridColumnsStateSelector, gridPinnedColumnsSelector, gridVisibleColumnFieldsSelector, _gridCoreSelector.gridIsRtlSelector, _listView.gridListViewSelector, (columnsState, model, visibleColumnFields, isRtl, listView) => {
+  if (listView) {
+    return _gridColumnsInterfaces.EMPTY_PINNED_COLUMN_FIELDS;
+  }
   const visiblePinnedFields = filterMissingColumns(model, visibleColumnFields, isRtl);
   const visiblePinnedColumns = {
     left: visiblePinnedFields.left.map(field => columnsState.lookup[field]),

package/hooks/features/columns/gridColumnsUtils.js

@@ -257,11 +257,13 @@ const createColumnsState = ({
       initialColumnVisibilityModel: updateInitialVisibilityModel ? columnVisibilityModel : currentState.initialColumnVisibilityModel
     };
   }
-  let columnsToKeep = {};
+  const columnsToKeep = {};
   if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
-    columnsToKeep = Object.keys(columnsState.lookup).reduce((acc, key) => (0, _extends2.default)({}, acc, {
-      [key]: false
-    }), {});
+    for (const key in columnsState.lookup) {
+      if (Object.prototype.hasOwnProperty.call(columnsState.lookup, key)) {
+        columnsToKeep[key] = false;
+      }
+    }
   }
   const columnsToUpsertLookup = {};
   columnsToUpsert.forEach(newColumn => {