MUI DataGrid Pro - restoreState with Column dimensions and columnVisibilityModel ignores column dimensions

[chrisandrewsprocessunity]

Steps to reproduce

Link to live example: (required)
https://codesandbox.io/p/sandbox/magical-bird-wj8r87?file=%2Fsrc%2FDemo.tsx

Steps:

1. Use MUI DataGrid w/ columnVisbilityModel
2. Using the DataGrid apiRef, use restoreState that contains both columns -> dimensions and columns -> columnVisibilityModel
3. Note that dimensions are not applied.

Current behavior

The dimensions object is ignored when used with columnVisbilityModel

Expected behavior

All parts of the legitimate state object should be restored when using restoreState. Specifically in this case, the column dimensions should be applied/adjusted.

Context

Currently using exportState and restoreState to preserve the users state of the grid across logins and refreshes.

Your environment

npx @mui/envinfo

Using Chrome

System:
OS: Windows 11 10.0.22621
Binaries:
Node: 16.12.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Chromium (120.0.2210.77)
npmPackages:
@emotion/react: 11.10.5
@emotion/styled: 11.10.5
@mui/base: 5.0.0-alpha.110
@mui/core-downloads-tracker: 5.11.2
@mui/icons-material: 5.11.0
@mui/lab: 5.0.0-alpha.112
@mui/material: 5.11.2
@mui/private-theming: 5.11.2
@mui/styled-engine: 5.11.0
@mui/styles: 5.11.2
@mui/system: 5.11.2
@mui/types: 7.2.3
@mui/utils: 5.14.18
@mui/x-data-grid: 6.18.5
@mui/x-data-grid-pro: 6.18.5
@mui/x-date-pickers: 5.0.12
@mui/x-date-pickers-pro: 5.0.12
@mui/x-license-pro: 5.17.12
@types/react: 18.0.26
react: 18.2.0
react-dom: 18.2.0
typescript: 3.9.10

Search keywords: restoreState dimension columnVisbilityModel
Order ID: 65003

[DanailH]

Seems like a valid bug.

[vidup]

I can reproduce (scratched our heads with a colleague on the same issue). We used to save/restore automatically with a wrapper around the grid. Save works, but restore does not, for views that pass a columnVisibilityModel as prop.

Here is a workaround until the issue is fixed: you can pass an initial state as a prop with the same object.

Basically something like this (from localStorage in my case):

const initialState = useMemo(() => {
  const persistedState = localStorage.getItem(`grid-${persistenceID}`);
  return {
    pagination: { paginationModel: { page: 0, pageSize: 20 } },
    pinnedColumns: {
      left: [GRID_CHECKBOX_SELECTION_COL_DEF.field],
      right: ["actions"],
    },
    ...JSON.parse(persistedState ?? "{}"),
  };
}, [persistenceID]);