[DataGrid] Add column order and dimensions to the portable state

docs/data/data-grid/state/RestoreStateApiRef.js

@@ -142,6 +142,8 @@ ViewListItem.propTypes = {
     value: PropTypes.shape({
       columns: PropTypes.shape({
         columnVisibilityModel: PropTypes.object,
+        dimensions: PropTypes.object,
+        orderedFields: PropTypes.arrayOf(PropTypes.string),
       }),
       detailPanel: PropTypes.shape({
         expandedRowIds: PropTypes.arrayOf(

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

@@ -3,7 +3,7 @@
     "name": "allGridColumnsFieldsSelector",
     "returnType": "string[]",
     "description": "",
-    "supportsApiRef": false
+    "supportsApiRef": true
   },
   {
     "name": "allGridColumnsSelector",

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

@@ -3,7 +3,7 @@
     "name": "allGridColumnsFieldsSelector",
     "returnType": "string[]",
     "description": "",
-    "supportsApiRef": false
+    "supportsApiRef": true
   },
   {
     "name": "allGridColumnsSelector",

packages/grid/_modules_/grid/hooks/features/columns/gridColumnsInterfaces.ts

@@ -1,6 +1,7 @@
 import type { GridRowId, GridApiCommon } from '../../../models';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef';
+import type { GridColumnDimensionProperties } from './gridColumnsUtils';
 
 export type GridColumnLookup<Api extends GridApiCommon = GridApiCommunity> = {
   [field: string]: GridStateColDef<Api>;
@@ -11,13 +12,20 @@ export type GridColumnRawLookup<Api extends GridApiCommon = GridApiCommunity> =
 };
 
 export interface GridColumnsState<Api extends GridApiCommon = GridApiCommunity> {
+  /**
+   * TODO v6: Rename `orderedFields`
+   */
   all: string[];
   lookup: GridColumnLookup<Api>;
   columnVisibilityModel: GridColumnVisibilityModel;
 }
 
+export type GridColumnDimensions = Pick<GridStateColDef, GridColumnDimensionProperties>;
+
 export interface GridColumnsInitialState {
   columnVisibilityModel?: GridColumnVisibilityModel;
+  orderedFields?: string[];
+  dimensions?: Record<string, GridColumnDimensions>;
 }
 
 export type GridColumnsRawState<Api extends GridApiCommon = GridApiCommunity> = Omit<

packages/grid/_modules_/grid/hooks/features/columns/gridColumnsSelector.ts

@@ -4,7 +4,10 @@ import { GridStateCommunity } from '../../../models/gridStateCommunity';
 export const gridColumnsSelector = (state: GridStateCommunity) => state.columns;
 
 // It includes even the hidden columns
-export const allGridColumnsFieldsSelector = (state: GridStateCommunity) => state.columns.all;
+export const allGridColumnsFieldsSelector = createSelector(
+  gridColumnsSelector,
+  (columns) => columns.all,
+);
 
 export const gridColumnLookupSelector = (state: GridStateCommunity) => state.columns.lookup;
 

packages/grid/_modules_/grid/hooks/features/columns/gridColumnsUtils.ts

@@ -3,6 +3,8 @@ import {
   GridColumnsState,
   GridColumnsRawState,
   GridColumnVisibilityModel,
+  GridColumnRawLookup,
+  GridColumnsInitialState,
 } from './gridColumnsInterfaces';
 import {
   DEFAULT_GRID_COL_TYPE_KEY,
@@ -16,6 +18,10 @@ import { GridColDef, GridStateColDef } from '../../../models/colDef/gridColDef';
 import { gridColumnsSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector';
 import { clamp } from '../../../utils/utils';
 
+export const COLUMNS_DIMENSION_PROPERTIES = ['maxWidth', 'minWidth', 'width', 'flex'] as const;
+
+export type GridColumnDimensionProperties = typeof COLUMNS_DIMENSION_PROPERTIES[number];
+
 export const computeColumnTypes = (customColumnTypes: GridColumnTypesRecord = {}) => {
   const allColumnTypes = { ...getGridDefaultColumnTypes(), ...customColumnTypes };
   const mergedColumnTypes: GridColumnTypesRecord = {};
@@ -91,6 +97,61 @@ export const hydrateColumnsWidth = (
 
 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: Omit<GridColumnsRawState, 'columnVisibilityModel'>,
+  initialState: GridColumnsInitialState | undefined,
+) => {
+  if (!initialState) {
+    return columnsState;
+  }
+
+  const { orderedFields = [], dimensions = {} } = initialState;
+
+  const columnsWithUpdatedDimensions = Object.keys(dimensions);
+  if (columnsWithUpdatedDimensions.length === 0 && orderedFields.length === 0) {
+    return columnsState;
+  }
+
+  const orderedFieldsLookup: Record<string, true> = {};
+  const cleanOrderedFields: string[] = [];
+
+  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: GridColumnRawLookup = { ...columnsState.lookup };
+  for (let i = 0; i < columnsWithUpdatedDimensions.length; i += 1) {
+    const field = columnsWithUpdatedDimensions[i];
+    newColumnLookup[field] = {
+      ...newColumnLookup[field],
+      ...dimensions[field],
+      hasBeenResized: true,
+    };
+  }
+
+  const newColumnsState: Omit<GridColumnsRawState, 'columnVisibilityModel'> = {
+    all: newOrderedFields,
+    lookup: newColumnLookup,
+  };
+
+  return newColumnsState;
+};
+
 /**
  * @deprecated Should have been internal only, you can inline the logic.
  */
@@ -124,19 +185,26 @@ export const getGridColDef = (
 export const createColumnsState = ({
   apiRef,
   columnsToUpsert,
+  initialState,
   columnsTypes,
   currentColumnVisibilityModel = gridColumnVisibilityModelSelector(apiRef),
   shouldRegenColumnVisibilityModelFromColumns,
   reset,
 }: {
   columnsToUpsert: GridColDef[];
+  initialState: GridColumnsInitialState | undefined;
   columnsTypes: GridColumnTypesRecord;
   currentColumnVisibilityModel?: GridColumnVisibilityModel;
   shouldRegenColumnVisibilityModelFromColumns: boolean;
   apiRef: React.MutableRefObject<GridApiCommunity>;
   reset: boolean;
 }) => {
-  let columnsStateWithoutColumnVisibilityModel: Omit<GridColumnsRawState, 'columnVisibilityModel'>;
+  let columnsStateWithoutColumnVisibilityModel: Omit<
+    GridColumnsRawState,
+    'columnVisibilityModel' | 'lookup'
+  > & {
+    lookup: { [field: string]: Omit<GridStateColDef, 'computedWidth'> };
+  };
   if (reset) {
     columnsStateWithoutColumnVisibilityModel = {
       all: [],
@@ -161,10 +229,19 @@ export const createColumnsState = ({
       };
       columnsStateWithoutColumnVisibilityModel.all.push(newColumn.field);
     } else {
-      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = {
+      const mergedColumn = {
         ...columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field],
         ...newColumn,
       };
+
+      if (
+        !mergedColumn.hasBeenResized &&
+        COLUMNS_DIMENSION_PROPERTIES.some((propertyName) => newColumn[propertyName] !== undefined)
+      ) {
+        mergedColumn.hasBeenResized = true;
+      }
+
+      columnsStateWithoutColumnVisibilityModel.lookup[newColumn.field] = mergedColumn;
     }
   });
 
@@ -217,8 +294,13 @@ export const createColumnsState = ({
     columnVisibilityModel = currentColumnVisibilityModel;
   }
 
+  const columnsStateWithPortableColumns = applyInitialState(
+    columnsStateWithPreProcessing,
+    initialState,
+  );
+
   const columnsState: GridColumnsRawState = {
-    ...columnsStateWithPreProcessing,
+    ...columnsStateWithPortableColumns,
     columnVisibilityModel,
   };
 

packages/grid/_modules_/grid/hooks/features/columns/useGridColumns.ts

@@ -22,12 +22,18 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { useGridStateInit } from '../../utils/useGridStateInit';
 import { GridColumnVisibilityChangeParams } from '../../../models';
 import { GridPreProcessor, useGridRegisterPreProcessor } from '../../core/preProcessing';
-import { GridColumnsState, GridColumnVisibilityModel } from './gridColumnsInterfaces';
+import {
+  GridColumnDimensions,
+  GridColumnsInitialState,
+  GridColumnsState,
+  GridColumnVisibilityModel,
+} from './gridColumnsInterfaces';
 import {
   hydrateColumnsWidth,
   computeColumnTypes,
   createColumnsState,
   setColumnsState,
+  COLUMNS_DIMENSION_PROPERTIES,
 } from './gridColumnsUtils';
 import { GridStateColDef } from '../../../models/colDef/gridColDef';
 
@@ -70,6 +76,7 @@ export function useGridColumns(
       apiRef,
       columnsTypes,
       columnsToUpsert: props.columns,
+      initialState: props.initialState?.columns,
       shouldRegenColumnVisibilityModelFromColumns: !shouldUseVisibleColumnModel,
       currentColumnVisibilityModel:
         props.columnVisibilityModel ?? props.initialState?.columns?.columnVisibilityModel ?? {},
@@ -153,6 +160,7 @@ export function useGridColumns(
             apiRef,
             columnsTypes,
             columnsToUpsert: [],
+            initialState: undefined,
             shouldRegenColumnVisibilityModelFromColumns: false,
             currentColumnVisibilityModel: model,
             reset: false,
@@ -170,6 +178,7 @@ export function useGridColumns(
         apiRef,
         columnsTypes,
         columnsToUpsert: columns,
+        initialState: undefined,
         shouldRegenColumnVisibilityModelFromColumns: true,
         reset: false,
       });
@@ -217,7 +226,7 @@ export function useGridColumns(
 
   const setColumnIndex = React.useCallback<GridColumnApi['setColumnIndex']>(
     (field, targetIndexPosition) => {
-      const allColumns = allGridColumnsFieldsSelector(apiRef.current.state);
+      const allColumns = allGridColumnsFieldsSelector(apiRef);
       const oldIndexPosition = allColumns.findIndex((col) => col === field);
       if (oldIndexPosition === targetIndexPosition) {
         return;
@@ -280,23 +289,40 @@ export function useGridColumns(
    */
   const stateExportPreProcessing = React.useCallback<GridPreProcessor<'exportState'>>(
     (prevState) => {
-      if (!shouldUseVisibleColumnModel) {
-        return prevState;
+      const columnsStateToExport: GridColumnsInitialState = {};
+
+      if (shouldUseVisibleColumnModel) {
+        const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
+        const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(
+          (value) => value === false,
+        );
+
+        if (hasHiddenColumns) {
+          columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport;
+        }
       }
 
-      const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
-      const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(
-        (value) => value === false,
-      );
-      if (!hasHiddenColumns) {
-        return prevState;
+      columnsStateToExport.orderedFields = allGridColumnsFieldsSelector(apiRef);
+
+      const columns = allGridColumnsSelector(apiRef);
+      const dimensions: Record<string, GridColumnDimensions> = {};
+      columns.forEach((colDef) => {
+        if (colDef.hasBeenResized) {
+          const colDefDimensions = {};
+          COLUMNS_DIMENSION_PROPERTIES.forEach((propertyName) => {
+            colDefDimensions[propertyName] = colDef[propertyName];
+          });
+          dimensions[colDef.field] = colDefDimensions;
+        }
+      });
+
+      if (Object.keys(dimensions).length > 0) {
+        columnsStateToExport.dimensions = dimensions;
       }
 
       return {
         ...prevState,
-        columns: {
-          columnVisibilityModel: columnVisibilityModelToExport,
-        },
+        columns: columnsStateToExport,
       };
     },
     [apiRef, shouldUseVisibleColumnModel],
@@ -308,17 +334,23 @@ export function useGridColumns(
         return params;
       }
 
-      const columnVisibilityModel = context.stateToRestore.columns?.columnVisibilityModel;
-      if (columnVisibilityModel != null) {
+      const columnVisibilityModelToImport = context.stateToRestore.columns?.columnVisibilityModel;
+      const initialState = context.stateToRestore.columns;
+      if (columnVisibilityModelToImport != null || initialState != null) {
         const columnsState = createColumnsState({
           apiRef,
           columnsTypes,
           columnsToUpsert: [],
+          initialState,
           shouldRegenColumnVisibilityModelFromColumns: false,
-          currentColumnVisibilityModel: columnVisibilityModel,
+          currentColumnVisibilityModel: columnVisibilityModelToImport,
           reset: false,
         });
         apiRef.current.setState(setColumnsState(columnsState));
+
+        if (initialState != null) {
+          apiRef.current.publishEvent(GridEvents.columnsChange, columnsState.all);
+        }
       }
       return params;
     },
@@ -345,6 +377,7 @@ export function useGridColumns(
         apiRef,
         columnsTypes,
         columnsToUpsert: [],
+        initialState: undefined,
         shouldRegenColumnVisibilityModelFromColumns: !shouldUseVisibleColumnModel,
         reset: false,
       });
@@ -389,6 +422,7 @@ export function useGridColumns(
     const columnsState = createColumnsState({
       apiRef,
       columnsTypes,
+      initialState: undefined,
       // If the user provides a model, we don't want to set it in the state here because it has it's dedicated `useEffect` which calls `setColumnVisibilityModel`
       shouldRegenColumnVisibilityModelFromColumns: !shouldUseVisibleColumnModel,
       columnsToUpsert: props.columns,

packages/grid/_modules_/grid/models/colDef/gridColDef.ts

@@ -261,6 +261,10 @@ export type GridColTypeDef<Api extends GridApiCommon = GridApiCommunity> = Omit<
 export type GridStateColDef<Api extends GridApiCommon = GridApiCommunity> =
   GridEnrichedColDef<Api> & {
     computedWidth: number;
+    /**
+     * If `true`, it means that at least one of the dimension's property of this column has been modified since the last time the column prop has changed.
+     */
+    hasBeenResized?: boolean;
   };
 
 /**