@mui/x-data-grid 5.6.0 → 5.8.0

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
@@ -63,38 +63,38 @@ export declare const gridFilterableColumnLookupSelector: import("../../../utils/
  * @deprecated Use `gridColumnFieldsSelector` instead.
  * @ignore - do not document.
  */
-export declare const allGridColumnsFieldsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string[]>;
+export declare const allGridColumnsFieldsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string[]> | ((...args: any[]) => any);
 /**
  * @category Columns
  * @deprecated Use `gridColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
-export declare const allGridColumnsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridStateColDef[]>;
+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[]>;
+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[]>;
+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).
  * @ignore - do not document.
  */
-export declare const filterableGridColumnsIdsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string[]>;
+export declare const filterableGridColumnsIdsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string[]> | ((...args: any[]) => any);
 /**
  * Get the amount of visible columns.
  * @category Visible Columns
- * @deprecated Use the length of `gridVisibleColumnDefinitionsSelector` instead.
+ * @deprecated Use the length of the array returned by `gridVisibleColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
-export declare const visibleGridColumnsLengthSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
+export declare const visibleGridColumnsLengthSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number> | ((...args: any[]) => any);
 /**
  * @category Visible Columns
  * @deprecated Use `gridColumnsTotalWidthSelector` or `gridColumnPositionsSelector` instead.
@@ -103,4 +103,4 @@ export declare const visibleGridColumnsLengthSelector: import("../../../utils/cr
 export declare const gridColumnsMetaSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
     totalWidth: number;
     positions: number[];
-}>;
+}> | ((...args: any[]) => any);

package/hooks/features/columns/gridColumnsSelector.js

@@ -1,11 +1,12 @@
 import { createSelector } from '../../../utils/createSelector';
-
+import { wrapWithWarningOnCall } from '../../../utils/warning';
 /**
  * @category Columns
  * @deprecated Use the selector returning exactly the value you are looking for.
  * @ignore - do not document.
  * TODO v6: Rename `gridColumnsStateSelector`
  */
+
 export const gridColumnsSelector = state => state.columns;
 /**
  * Get the field of each column.
@@ -98,50 +99,50 @@ export const gridFilterableColumnLookupSelector = createSelector(gridColumnDefin
  * @ignore - do not document.
  */
 
-export const allGridColumnsFieldsSelector = gridColumnFieldsSelector;
+export const allGridColumnsFieldsSelector = wrapWithWarningOnCall(gridColumnFieldsSelector, ['MUI: The method allGridColumnsFieldsSelector is deprecated and will be removed in the next major version.', 'Use gridColumnFieldsSelector instead']);
 /**
  * @category Columns
  * @deprecated Use `gridColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
 
-export const allGridColumnsSelector = gridColumnDefinitionsSelector;
+export const allGridColumnsSelector = wrapWithWarningOnCall(gridColumnDefinitionsSelector, ['MUI: The method allGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridColumnDefinitionsSelector instead']);
 /**
  * @category Visible Columns
  * @deprecated Use `gridVisibleColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
 
-export const visibleGridColumnsSelector = gridVisibleColumnDefinitionsSelector;
+export const visibleGridColumnsSelector = wrapWithWarningOnCall(gridVisibleColumnDefinitionsSelector, ['MUI: The method visibleGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridVisibleColumnDefinitionsSelector instead']);
 /**
  * @category Columns
  * @deprecated Use `gridFilterableColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
 
-export const filterableGridColumnsSelector = gridFilterableColumnDefinitionsSelector;
+export const filterableGridColumnsSelector = wrapWithWarningOnCall(gridFilterableColumnDefinitionsSelector, ['MUI: The method filterableGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridFilterableColumnDefinitionsSelector instead']);
 /**
  * @category Columns
  * @deprecated Use `gridFilterableColumnLookupSelector` instead (not the same return format).
  * @ignore - do not document.
  */
 
-export const filterableGridColumnsIdsSelector = createSelector(gridFilterableColumnDefinitionsSelector, columns => columns.map(col => col.field));
+export const filterableGridColumnsIdsSelector = wrapWithWarningOnCall(createSelector(gridFilterableColumnDefinitionsSelector, columns => columns.map(col => col.field)), ['MUI: The method filterableGridColumnsIdsSelector is deprecated and will be removed in the next major version.', 'Use gridFilterableColumnDefinitionsSelector instead.', 'The return format is now a lookup, if you want to get the same output as before, use the following code:', '', 'const lookup = gridFilterableColumnLookupSelector(apiRef);', 'const fields = gridColumnFieldsSelector(apiRef).filter(field => lookup[field]);']);
 /**
  * Get the amount of visible columns.
  * @category Visible Columns
- * @deprecated Use the length of `gridVisibleColumnDefinitionsSelector` instead.
+ * @deprecated Use the length of the array returned by `gridVisibleColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
 
-export const visibleGridColumnsLengthSelector = createSelector(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.length);
+export const visibleGridColumnsLengthSelector = wrapWithWarningOnCall(createSelector(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.length), ['MUI: The method visibleGridColumnsLengthSelector is deprecated and will be removed in the next major version.', 'Use the length of the array returned by gridVisibleColumnDefinitionsSelector instead.']);
 /**
  * @category Visible Columns
  * @deprecated Use `gridColumnsTotalWidthSelector` or `gridColumnPositionsSelector` instead.
  * @ignore - do not document.
  */
 
-export const gridColumnsMetaSelector = createSelector(gridColumnPositionsSelector, gridColumnsTotalWidthSelector, (positions, totalWidth) => ({
+export const gridColumnsMetaSelector = wrapWithWarningOnCall(createSelector(gridColumnPositionsSelector, gridColumnsTotalWidthSelector, (positions, totalWidth) => ({
   totalWidth,
   positions
-}));
+})), ['MUI: The method gridColumnsMetaSelector is deprecated and will be removed in the next major version.', 'Use gridColumnsTotalWidthSelector or gridColumnPositionsSelector instead']);

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

@@ -1,9 +1,11 @@
 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';
+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.
@@ -31,16 +33,22 @@ 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;

package/hooks/features/columns/gridColumnsUtils.js

@@ -1,14 +1,17 @@
 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 allColumnTypes = _extends({}, getGridDefaultColumnTypes(), customColumnTypes);
+  const mergedColumnTypes = _extends({}, getGridDefaultColumnTypes());
 
-  const mergedColumnTypes = {};
-  Object.entries(allColumnTypes).forEach(([colType, colTypeDef]) => {
-    colTypeDef = _extends({}, allColumnTypes[colTypeDef.extendType || DEFAULT_GRID_COL_TYPE_KEY], colTypeDef);
-    mergedColumnTypes[colType] = colTypeDef;
+  Object.entries(customColumnTypes).forEach(([colType, colTypeDef]) => {
+    if (mergedColumnTypes[colType]) {
+      mergedColumnTypes[colType] = _extends({}, mergedColumnTypes[colType], colTypeDef);
+    } else {
+      mergedColumnTypes[colType] = _extends({}, mergedColumnTypes[colTypeDef.extendType || DEFAULT_GRID_COL_TYPE_KEY], colTypeDef);
+    }
   });
   return mergedColumnTypes;
 };
@@ -165,6 +168,55 @@ 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];
+    newColumnLookup[field] = _extends({}, newColumnLookup[field], dimensions[field], {
+      hasBeenResized: true
+    });
+  }
+
+  const newColumnsState = {
+    all: newOrderedFields,
+    lookup: newColumnLookup
+  };
+  return newColumnsState;
+};
 /**
  * @deprecated Should have been internal only, you can inline the logic.
  */
@@ -190,16 +242,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: {}
@@ -207,73 +261,137 @@ 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 hasValidDimension = false;
+
+    if (!existingState.hasBeenResized) {
+      hasValidDimension = COLUMNS_DIMENSION_PROPERTIES.some(key => newColumn[key] !== undefined);
+    }
+
+    columnsStateWithoutColumnVisibilityModel.lookup[field] = _extends({}, existingState, {
+      hide: newColumn.hide == null ? false : newColumn.hide
+    }, newColumn, {
+      hasBeenResized: existingState.hasBeenResized || hasValidDimension
+    });
   });
 
+  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;
+    let hasModelChanged = false;
 
-        // 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;
-        }
-
-        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
 });

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

@@ -8,4 +8,4 @@ export declare const columnsStateInitializer: GridStateInitializer<Pick<DataGrid
  * @requires useGridDimensions (method, event) - can be after
  * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
  */
-export declare function useGridColumns(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'columns' | 'onColumnVisibilityChange' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'columnTypes' | 'checkboxSelection' | 'classes'>): void;
+export declare function useGridColumns(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'columns' | 'onColumnVisibilityChange' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'columnTypes' | 'checkboxSelection' | 'classes' | 'components' | 'componentsProps'>): void;