@mui/x-data-grid 5.6.1 → 5.9.0

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import { useForkRef } from '@mui/material/utils';
+import { defaultMemoize } from 'reselect';
 import { useGridApiContext } from '../../utils/useGridApiContext';
 import { useGridSelector } from '../../utils/useGridSelector';
 import { gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
@@ -13,7 +15,15 @@ import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { GridEvents } from '../../../models/events';
 import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem';
+import { getFirstColumnIndexToRender } from '../columns/gridColumnsUtils';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
+import { getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
 import { jsx as _jsx } from "react/jsx-runtime";
+
+function isUIEvent(event) {
+  return !!event.target;
+}
+
 export const useGridColumnHeaders = props => {
   const {
     innerRef: innerRefProp,
@@ -37,18 +47,43 @@ export const useGridColumnHeaders = props => {
   const [renderContext, setRenderContext] = React.useState(null);
   const prevRenderContext = React.useRef(renderContext);
   const prevScrollLeft = React.useRef(0);
+  const currentPage = useGridVisibleRows(apiRef, rootProps);
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerElementRef.current.scrollLeft = 0;
-  }, [apiRef]);
+  }, [apiRef]); // memoize `getFirstColumnIndexToRender`, since it's called on scroll
+
+  const getFirstColumnIndexToRenderRef = React.useRef(defaultMemoize(getFirstColumnIndexToRender, {
+    equalityCheck: (a, b) => ['firstColumnIndex', 'minColumnIndex', 'columnBuffer'].every(key => a[key] === b[key])
+  }));
   const updateInnerPosition = React.useCallback(nextRenderContext => {
-    const firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minColumnIndex);
+    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    });
+    const firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+      firstColumnIndex: nextRenderContext.firstColumnIndex,
+      minColumnIndex,
+      columnBuffer: rootProps.columnBuffer,
+      firstRowToRender,
+      lastRowToRender,
+      apiRef,
+      visibleRows: currentPage.rows
+    });
     const offset = firstColumnToRender > 0 ? prevScrollLeft.current - columnPositions[firstColumnToRender] : prevScrollLeft.current;
     innerRef.current.style.transform = `translate3d(${-offset}px, 0px, 0px)`;
-  }, [columnPositions, minColumnIndex, rootProps.columnBuffer]);
+  }, [columnPositions, minColumnIndex, rootProps.columnBuffer, apiRef, currentPage.rows, rootProps.rowBuffer]);
+  React.useLayoutEffect(() => {
+    if (renderContext) {
+      updateInnerPosition(renderContext);
+    }
+  }, [renderContext, updateInnerPosition]);
   const handleScroll = React.useCallback(({
     left,
     renderContext: nextRenderContext = null
-  }) => {
+  }, event) => {
     var _prevRenderContext$cu, _prevRenderContext$cu2;
 
     if (!innerRef.current) {
@@ -61,15 +96,32 @@ export const useGridColumnHeaders = props => {
       return;
     }
 
-    prevScrollLeft.current = left;
+    prevScrollLeft.current = left; // We can only update the position when we guarantee that the render context has been
+    // rendered. This is achieved using ReactDOM.flushSync or when the context doesn't change.
+
+    let canUpdateInnerPosition = false;
 
     if (nextRenderContext !== prevRenderContext.current || !prevRenderContext.current) {
-      setRenderContext(nextRenderContext);
+      // ReactDOM.flushSync cannot be called on `scroll` events fired inside effects
+      if (isUIEvent(event)) {
+        // To prevent flickering, the inner position can only be updated after the new context has
+        // been rendered. ReactDOM.flushSync ensures that the state changes will happen before
+        // updating the position.
+        ReactDOM.flushSync(() => {
+          setRenderContext(nextRenderContext);
+        });
+        canUpdateInnerPosition = true;
+      } else {
+        setRenderContext(nextRenderContext);
+      }
+
       prevRenderContext.current = nextRenderContext;
+    } else {
+      canUpdateInnerPosition = true;
     } // Pass directly the render context to avoid waiting for the next render
 
 
-    if (nextRenderContext) {
+    if (nextRenderContext && canUpdateInnerPosition) {
       updateInnerPosition(nextRenderContext);
     }
   }, [updateInnerPosition]);
@@ -95,7 +147,22 @@ export const useGridColumnHeaders = props => {
     }
 
     const columns = [];
-    const firstColumnToRender = Math.max(nextRenderContext.firstColumnIndex - rootProps.columnBuffer, minFirstColumn);
+    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    });
+    const firstColumnToRender = getFirstColumnIndexToRenderRef.current({
+      firstColumnIndex: nextRenderContext.firstColumnIndex,
+      minColumnIndex: minFirstColumn,
+      columnBuffer: rootProps.columnBuffer,
+      apiRef,
+      firstRowToRender,
+      lastRowToRender,
+      visibleRows: currentPage.rows
+    });
     const lastColumnToRender = Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
 
@@ -115,11 +182,11 @@ export const useGridColumnHeaders = props => {
         column: column,
         colIndex: columnIndex,
         isResizing: resizeCol === column.field,
-        isLastColumn: columnIndex === columns.length - 1,
+        isLastColumn: columnIndex === visibleColumns.length - 1,
         extendRowFullWidth: !rootProps.disableExtendRowFullWidth,
         hasFocus: hasFocus,
         tabIndex: tabIndex
-      }, other), i));
+      }, other), column.field));
     }
 
     return columns;
@@ -134,7 +201,6 @@ export const useGridColumnHeaders = props => {
     renderContext,
     getColumns,
     isDragging: !!dragCol,
-    updateInnerPosition,
     getRootProps: (other = {}) => _extends({
       style: rootStyle
     }, other),

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

@@ -1,5 +1,6 @@
 import type { GridRowId } from '../../../models';
 import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef';
+import type { GridColumnDimensionProperties } from './gridColumnsUtils';
 export declare type GridColumnLookup = {
     [field: string]: GridStateColDef;
 };
@@ -8,16 +9,22 @@ export declare type GridColumnRawLookup = {
 };
 export interface GridColumnsState {
     /**
-     * TODO v6: Rename `orderedFields`.
+     * TODO v6: Rename `all` to `orderedFields`
      */
     all: string[];
     lookup: GridColumnLookup;
     columnVisibilityModel: GridColumnVisibilityModel;
 }
+export declare type GridColumnDimensions = {
+    [key in GridColumnDimensionProperties]?: number;
+};
 export interface GridColumnsInitialState {
     columnVisibilityModel?: GridColumnVisibilityModel;
+    orderedFields?: string[];
+    dimensions?: Record<string, GridColumnDimensions>;
 }
 export declare type GridColumnsRawState = Omit<GridColumnsState, 'lookup'> & {
     lookup: GridColumnRawLookup;
 };
+export declare type GridHydrateColumnsValue = Omit<GridColumnsRawState, 'columnVisibilityModel'>;
 export declare type GridColumnVisibilityModel = Record<GridRowId, boolean>;

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

@@ -21,7 +21,7 @@ export declare const gridColumnLookupSelector: import("../../../utils/createSele
  * Get the columns as an array.
  * @category Columns
  */
-export declare const gridColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]>;
+export declare const gridColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef<any, any, any>[]>;
 /**
  * Get the column visibility model, containing the visibility status of each column.
  * If a column is not registered in the model, it is visible.
@@ -32,7 +32,7 @@ export declare const gridColumnVisibilityModelSelector: import("../../../utils/c
  * Get the visible columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Visible Columns
  */
-export declare const gridVisibleColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]>;
+export declare const gridVisibleColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef<any, any, any>[]>;
 /**
  * Get the field of each visible column.
  * @category Visible Columns
@@ -52,7 +52,7 @@ export declare const gridColumnsTotalWidthSelector: import("../../../utils/creat
  * Get the filterable columns as an array.
  * @category Columns
  */
-export declare const gridFilterableColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]>;
+export declare const gridFilterableColumnDefinitionsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef<any, any, any>[]>;
 /**
  * Get the filterable columns as a lookup (an object containing the field for keys and the definition for values).
  * @category Columns
@@ -69,19 +69,19 @@ export declare const allGridColumnsFieldsSelector: import("../../../utils/create
  * @deprecated Use `gridColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
-export declare const allGridColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]> | ((...args: any[]) => any);
+export declare const allGridColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef<any, any, any>[]> | ((...args: any[]) => any);
 /**
  * @category Visible Columns
  * @deprecated Use `gridVisibleColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
-export declare const visibleGridColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]> | ((...args: any[]) => any);
+export declare const visibleGridColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef<any, any, any>[]> | ((...args: any[]) => any);
 /**
  * @category Columns
  * @deprecated Use `gridFilterableColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
-export declare const filterableGridColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]> | ((...args: any[]) => any);
+export declare const filterableGridColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef<any, any, any>[]> | ((...args: any[]) => any);
 /**
  * @category Columns
  * @deprecated Use `gridFilterableColumnLookupSelector` instead (not the same return format).

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

@@ -1,9 +1,13 @@
 import * as React from 'react';
-import { GridColumnsState, GridColumnsRawState, GridColumnVisibilityModel } from './gridColumnsInterfaces';
+import { GridColumnsState, GridColumnsRawState, GridColumnVisibilityModel, GridColumnsInitialState } from './gridColumnsInterfaces';
 import { GridColType, GridColumnTypesRecord } from '../../../models';
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridColDef } from '../../../models/colDef/gridColDef';
+import { GridApiCommon } from '../../../models/api/gridApiCommon';
+import { GridRowEntry } from '../../../models/gridRows';
+export declare const COLUMNS_DIMENSION_PROPERTIES: readonly ["maxWidth", "minWidth", "width", "flex"];
+export declare type GridColumnDimensionProperties = typeof COLUMNS_DIMENSION_PROPERTIES[number];
 export declare const computeColumnTypes: (customColumnTypes?: GridColumnTypesRecord) => GridColumnTypesRecord;
 /**
  * Computes width for flex columns.
@@ -15,7 +19,7 @@ export declare function computeFlexColumnsWidth({ initialFreeSpace, totalFlexUni
     totalFlexUnits: number;
     flexColumns: {
         field: GridColDef['field'];
-        flex?: number;
+        flex?: number | null;
         minWidth?: number;
         maxWidth?: number;
     }[];
@@ -31,16 +35,38 @@ export declare function computeFlexColumnsWidth({ initialFreeSpace, totalFlexUni
  * TODO: Improve the `GridColDef` typing to reflect the fact that `minWidth` / `maxWidth` and `width` can't be null after the merge with the `type` default values.
  */
 export declare const hydrateColumnsWidth: (rawState: GridColumnsRawState, viewportInnerWidth: number) => GridColumnsState;
+/**
+ * Apply the order and the dimensions of the initial state.
+ * The columns not registered in `orderedFields` will be placed after the imported columns.
+ */
+export declare const applyInitialState: (columnsState: Omit<GridColumnsRawState, 'columnVisibilityModel'>, initialState: GridColumnsInitialState | undefined) => Omit<GridColumnsRawState, "columnVisibilityModel">;
 /**
  * @deprecated Should have been internal only, you can inline the logic.
  */
-export declare const getGridColDef: (columnTypes: GridColumnTypesRecord, type: GridColType | undefined) => import("../../../models").GridColTypeDef;
-export declare const createColumnsState: ({ apiRef, columnsToUpsert, columnsTypes, currentColumnVisibilityModel, shouldRegenColumnVisibilityModelFromColumns, reset, }: {
+export declare const getGridColDef: (columnTypes: GridColumnTypesRecord, type: GridColType | undefined) => import("../../../models").GridColTypeDef<any, any>;
+export declare const createColumnsState: ({ apiRef, columnsToUpsert, initialState, columnTypes, currentColumnVisibilityModel, shouldRegenColumnVisibilityModelFromColumns, keepOnlyColumnsToUpsert, }: {
     columnsToUpsert: GridColDef[];
-    columnsTypes: GridColumnTypesRecord;
+    initialState: GridColumnsInitialState | undefined;
+    columnTypes: GridColumnTypesRecord;
     currentColumnVisibilityModel?: GridColumnVisibilityModel | undefined;
     shouldRegenColumnVisibilityModelFromColumns: boolean;
+    keepOnlyColumnsToUpsert: boolean;
     apiRef: React.MutableRefObject<GridApiCommunity>;
-    reset: boolean;
 }) => GridColumnsState;
-export declare const setColumnsState: (columnsState: GridColumnsState) => (state: GridStateCommunity) => GridStateCommunity;
+export declare const mergeColumnsState: (columnsState: GridColumnsState) => (state: GridStateCommunity) => GridStateCommunity;
+export declare function getFirstNonSpannedColumnToRender({ firstColumnToRender, apiRef, firstRowToRender, lastRowToRender, visibleRows, }: {
+    firstColumnToRender: number;
+    apiRef: React.MutableRefObject<GridApiCommon>;
+    firstRowToRender: number;
+    lastRowToRender: number;
+    visibleRows: GridRowEntry[];
+}): number;
+export declare function getFirstColumnIndexToRender({ firstColumnIndex, minColumnIndex, columnBuffer, firstRowToRender, lastRowToRender, apiRef, visibleRows, }: {
+    firstColumnIndex: number;
+    minColumnIndex: number;
+    columnBuffer: number;
+    apiRef: React.MutableRefObject<GridApiCommon>;
+    firstRowToRender: number;
+    lastRowToRender: number;
+    visibleRows: GridRowEntry[];
+}): number;

package/hooks/features/columns/gridColumnsUtils.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { DEFAULT_GRID_COL_TYPE_KEY, getGridDefaultColumnTypes } from '../../../models';
+import { DEFAULT_GRID_COL_TYPE_KEY, getGridDefaultColumnTypes } from '../../../colDef';
 import { gridColumnsSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector';
 import { clamp } from '../../../utils/utils';
+export const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'];
 export const computeColumnTypes = (customColumnTypes = {}) => {
   const mergedColumnTypes = _extends({}, getGridDefaultColumnTypes());
 
@@ -167,6 +168,61 @@ export const hydrateColumnsWidth = (rawState, viewportInnerWidth) => {
   });
 };
 let columnTypeWarnedOnce = false;
+/**
+ * Apply the order and the dimensions of the initial state.
+ * The columns not registered in `orderedFields` will be placed after the imported columns.
+ */
+
+export const applyInitialState = (columnsState, initialState) => {
+  if (!initialState) {
+    return columnsState;
+  }
+
+  const {
+    orderedFields = [],
+    dimensions = {}
+  } = initialState;
+  const columnsWithUpdatedDimensions = Object.keys(dimensions);
+
+  if (columnsWithUpdatedDimensions.length === 0 && orderedFields.length === 0) {
+    return columnsState;
+  }
+
+  const orderedFieldsLookup = {};
+  const cleanOrderedFields = [];
+
+  for (let i = 0; i < orderedFields.length; i += 1) {
+    const field = orderedFields[i]; // Ignores the fields in the initialState that matches no field on the current column state
+
+    if (columnsState.lookup[field]) {
+      orderedFieldsLookup[field] = true;
+      cleanOrderedFields.push(field);
+    }
+  }
+
+  const newOrderedFields = cleanOrderedFields.length === 0 ? columnsState.all : [...cleanOrderedFields, ...columnsState.all.filter(field => !orderedFieldsLookup[field])];
+
+  const newColumnLookup = _extends({}, columnsState.lookup);
+
+  for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) {
+    const field = columnsWithUpdatedDimensions[i];
+
+    const newColDef = _extends({}, newColumnLookup[field], {
+      hasBeenResized: true
+    });
+
+    Object.entries(dimensions[field]).forEach(([key, value]) => {
+      newColDef[key] = value === -1 ? Infinity : value;
+    });
+    newColumnLookup[field] = newColDef;
+  }
+
+  const newColumnsState = {
+    all: newOrderedFields,
+    lookup: newColumnLookup
+  };
+  return newColumnsState;
+};
 /**
  * @deprecated Should have been internal only, you can inline the logic.
  */
@@ -192,16 +248,18 @@ export const getGridColDef = (columnTypes, type) => {
 export const createColumnsState = ({
   apiRef,
   columnsToUpsert,
-  columnsTypes,
+  initialState,
+  columnTypes,
   currentColumnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
   shouldRegenColumnVisibilityModelFromColumns,
-  reset
+  keepOnlyColumnsToUpsert = false
 }) => {
   var _apiRef$current$getRo, _apiRef$current$getRo2, _apiRef$current, _apiRef$current$getRo3;
 
+  const isInsideStateInitializer = !apiRef.current.state.columns;
   let columnsStateWithoutColumnVisibilityModel;
 
-  if (reset) {
+  if (isInsideStateInitializer) {
     columnsStateWithoutColumnVisibilityModel = {
       all: [],
       lookup: {}
@@ -209,73 +267,184 @@ export const createColumnsState = ({
   } else {
     const currentState = gridColumnsSelector(apiRef.current.state);
     columnsStateWithoutColumnVisibilityModel = {
-      all: [...currentState.all],
-      lookup: _extends({}, currentState.lookup)
+      all: keepOnlyColumnsToUpsert ? [] : [...currentState.all],
+      lookup: _extends({}, currentState.lookup) // Will be cleaned later if keepOnlyColumnsToUpsert=true
+
     };
   }
 
+  let columnsToKeep = {};
+
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    columnsToKeep = Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).reduce((acc, key) => _extends({}, acc, {
+      [key]: false
+    }), {});
+  }
+
   const columnsToUpsertLookup = {};
   columnsToUpsert.forEach(newColumn => {
-    columnsToUpsertLookup[newColumn.field] = true;
-
-    if (columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] == null) {
+    const {
+      field
+    } = newColumn;
+    columnsToUpsertLookup[field] = true;
+    columnsToKeep[field] = true;
+    let existingState = columnsStateWithoutColumnVisibilityModel.lookup[field];
+
+    if (existingState == null) {
       // New Column
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = _extends({}, getGridColDef(columnsTypes, newColumn.type), newColumn);
-      columnsStateWithoutColumnVisibilityModel.all.push(newColumn.field);
-    } else {
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field], newColumn);
+      existingState = _extends({}, getGridColDef(columnTypes, newColumn.type), {
+        // TODO v6: Inline `getGridColDef`
+        field,
+        hasBeenResized: false
+      });
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
+    } else if (keepOnlyColumnsToUpsert) {
+      columnsStateWithoutColumnVisibilityModel.all.push(field);
     }
+
+    let hasBeenResized = existingState.hasBeenResized;
+    COLUMNS_DIMENSION_PROPERTIES.forEach(key => {
+      if (newColumn[key] !== undefined) {
+        hasBeenResized = true;
+
+        if (newColumn[key] === -1) {
+          newColumn[key] = Infinity;
+        }
+      }
+    });
+    columnsStateWithoutColumnVisibilityModel.lookup[field] = _extends({}, existingState, {
+      hide: newColumn.hide == null ? false : newColumn.hide
+    }, newColumn, {
+      hasBeenResized
+    });
   });
 
+  if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
+    Object.keys(columnsStateWithoutColumnVisibilityModel.lookup).forEach(field => {
+      if (!columnsToKeep[field]) {
+        delete columnsStateWithoutColumnVisibilityModel.lookup[field];
+      }
+    });
+  }
+
   const columnsLookupBeforePreProcessing = _extends({}, columnsStateWithoutColumnVisibilityModel.lookup);
 
-  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPreProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
+  const columnsStateWithPreProcessing = apiRef.current.unstable_applyPipeProcessors('hydrateColumns', columnsStateWithoutColumnVisibilityModel); // TODO v6: remove the sync between the columns `hide` option and the model.
 
   let columnVisibilityModel = {};
 
   if (shouldRegenColumnVisibilityModelFromColumns) {
-    if (reset) {
-      columnsStateWithPreProcessing.all.forEach(field => {
-        columnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
-      });
-    } else {
-      const newColumnVisibilityModel = _extends({}, currentColumnVisibilityModel);
-
-      let hasModelChanged = false;
-      columnsStateWithPreProcessing.all.forEach(field => {
-        var _currentColumnVisibil;
-
-        // If neither the `columnsToUpsert` nor the pre-processors updated the column,
-        // Then we don't want to update the visibility status of the column in the model.
-        if (!columnsToUpsertLookup[field] && columnsLookupBeforePreProcessing[field] === columnsStateWithPreProcessing.lookup[field]) {
-          return;
-        }
+    let hasModelChanged = false;
 
-        const isVisibleBefore = (_currentColumnVisibil = currentColumnVisibilityModel[field]) != null ? _currentColumnVisibil : true;
-        const isVisibleAfter = !columnsStateWithPreProcessing.lookup[field].hide;
+    const newColumnVisibilityModel = _extends({}, currentColumnVisibilityModel);
 
-        if (isVisibleAfter !== isVisibleBefore) {
+    if (isInsideStateInitializer) {
+      columnsStateWithPreProcessing.all.forEach(field => {
+        newColumnVisibilityModel[field] = !columnsStateWithoutColumnVisibilityModel.lookup[field].hide;
+      });
+    } else if (keepOnlyColumnsToUpsert) {
+      // At this point, `keepOnlyColumnsToUpsert` has a new meaning: keep the columns
+      // passed via `columnToUpsert` + columns added by the pre-processors. We do the following
+      // cleanup because a given column may have been removed from the `columns` prop but it still
+      // exists in the state.
+      Object.keys(newColumnVisibilityModel).forEach(field => {
+        if (!columnsStateWithPreProcessing.lookup[field]) {
+          delete newColumnVisibilityModel[field];
           hasModelChanged = true;
-          newColumnVisibilityModel[field] = isVisibleAfter;
         }
       });
+    }
 
-      if (hasModelChanged) {
-        columnVisibilityModel = newColumnVisibilityModel;
-      } else {
-        columnVisibilityModel = currentColumnVisibilityModel;
+    columnsStateWithPreProcessing.all.forEach(field => {
+      // If neither the `columnsToUpsert` nor the pre-processors updated the column,
+      // Then we don't want to update the visibility status of the column in the model.
+      if (!columnsToUpsertLookup[field] && columnsLookupBeforePreProcessing[field] === columnsStateWithPreProcessing.lookup[field]) {
+        return;
+      } // We always assume that a column not in the model is visible by default. However, there's an
+      // edge case where the column is not in the model but it also doesn't exist in the `columns`
+      // prop, meaning that the column is being added. In that case, we assume that the column was
+      // not visible before for it be added to the model.
+
+
+      let isVisibleBefore = currentColumnVisibilityModel[field];
+
+      if (isVisibleBefore === undefined) {
+        if (isInsideStateInitializer) {
+          isVisibleBefore = true;
+        } else {
+          const currentState = gridColumnsSelector(apiRef.current.state);
+          isVisibleBefore = !!currentState.lookup[field];
+        }
+      }
+
+      const isVisibleAfter = !columnsStateWithPreProcessing.lookup[field].hide;
+
+      if (isVisibleAfter !== isVisibleBefore) {
+        hasModelChanged = true;
+        newColumnVisibilityModel[field] = isVisibleAfter;
       }
+    });
+
+    if (hasModelChanged || isInsideStateInitializer) {
+      columnVisibilityModel = newColumnVisibilityModel;
+    } else {
+      columnVisibilityModel = currentColumnVisibilityModel;
     }
   } else {
     columnVisibilityModel = currentColumnVisibilityModel;
   }
 
-  const columnsState = _extends({}, columnsStateWithPreProcessing, {
+  const columnsStateWithPortableColumns = applyInitialState(columnsStateWithPreProcessing, initialState);
+
+  const columnsState = _extends({}, columnsStateWithPortableColumns, {
     columnVisibilityModel
   });
 
   return hydrateColumnsWidth(columnsState, (_apiRef$current$getRo = (_apiRef$current$getRo2 = (_apiRef$current = apiRef.current).getRootDimensions) == null ? void 0 : (_apiRef$current$getRo3 = _apiRef$current$getRo2.call(_apiRef$current)) == null ? void 0 : _apiRef$current$getRo3.viewportInnerSize.width) != null ? _apiRef$current$getRo : 0);
 };
-export const setColumnsState = columnsState => state => _extends({}, state, {
+export const mergeColumnsState = columnsState => state => _extends({}, state, {
   columns: columnsState
-});
+});
+export function getFirstNonSpannedColumnToRender({
+  firstColumnToRender,
+  apiRef,
+  firstRowToRender,
+  lastRowToRender,
+  visibleRows
+}) {
+  let firstNonSpannedColumnToRender = firstColumnToRender;
+
+  for (let i = firstRowToRender; i < lastRowToRender; i += 1) {
+    const row = visibleRows[i];
+
+    if (row) {
+      const rowId = visibleRows[i].id;
+      const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, firstColumnToRender);
+
+      if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
+        firstNonSpannedColumnToRender = cellColSpanInfo.leftVisibleCellIndex;
+      }
+    }
+  }
+
+  return firstNonSpannedColumnToRender;
+}
+export function getFirstColumnIndexToRender({
+  firstColumnIndex,
+  minColumnIndex,
+  columnBuffer,
+  firstRowToRender,
+  lastRowToRender,
+  apiRef,
+  visibleRows
+}) {
+  const initialFirstColumnToRender = Math.max(firstColumnIndex - columnBuffer, minColumnIndex);
+  const firstColumnToRender = getFirstNonSpannedColumnToRender({
+    firstColumnToRender: initialFirstColumnToRender,
+    apiRef,
+    firstRowToRender,
+    lastRowToRender,
+    visibleRows
+  });
+  return firstColumnToRender;
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+export declare const useGridColumnSpanning: (apiRef: React.MutableRefObject<GridApiCommunity>) => void;