apiRef.restoreState has inconsistent behavior with column ordering after moving from a state with pinned columns

[kiara0318]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://mui.com/x/react-data-grid/state/#restore-the-state-with-apiref

Steps:

1. Save current view without making changes. (default view)
2. Once default view is saved, drag and drop Commodity column to first position and pin it. Save this View.
3. Switch from this view to the Default view

Current behavior 😯

The state is restored but column order is not respected. Commodity stays in the same position after being unpinned. Had to select default view a second time to get correct column ordering. It's a weird bug because once you select default view a second time and then switch back and forth between the views, there is no issue.

Expected behavior 🤔

I'd expect that switching between saved views would completely restore a state, column order included. This shouldn't have to be clicked twice to restore the state after unpinning.

Context 🔦

Currently building a component that needs to switch between views and be able to reset to an initial state. This affects my work because there is inconsistent behavior for restoring the state. I've found similar issues but they appear to be closed.

https://github.com/mui/mui-x/issues/3422

Your environment 🌎

npx @mui/envinfo

System: OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa) CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900HK Memory: 24.26 GB / 31.19 GB Container: Yes Shell: 5.0.17 - /bin/bash Binaries: Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node Yarn: 1.22.18 - ~/.nvm/versions/node/v16.16.0/bin/yarn npm: 9.6.2 - ~/apps-ui/package/node_modules/.bin/npm Managers: Apt: 2.0.9 - /usr/bin/apt Maven: 3.6.3 - /usr/bin/mvn Utilities: Make: 4.2.1 - /usr/bin/make GCC: 9.4.0 - /usr/bin/gcc Git: 2.25.1 - /usr/bin/git Virtualization: Docker: 20.10.22 - /usr/local/bin/docker IDEs: Nano: 4.8 - /usr/bin/nano VSCode: 1.74.3 - /mnt/c/Users/Kiara/AppData/Local/Programs/Microsoft VS Code/bin/code Vim: 8.1 - /usr/bin/vim Languages: Bash: 5.0.17 - /usr/bin/bash Java: 1.8.0_352 - /usr/lib/jvm/java-8-openjdk-amd64/bin/javac Perl: 5.30.0 - /usr/bin/perl Python3: 3.8.10 - /usr/bin/python3 Browsers: Chrome: 108.0.5359.71

Order ID or Support key 💳 (optional)

61771

[m4theushw]

I've added it to our backlog.

[kiara0318]

I've added it to our backlog.

Thank you. I'm trying to work out a workaround solution for now, if you know of any that would be great

[kiara0318]

@m4theushw Can this be marked as a bug? Or is there a workaround solution for this. exportState should be respecting column ordering no matter what?

[claudioctonha]

I'm having a similar issue. apiRef.current.restoreState is not restoring state.columns.dimensions.

I noticed if orderedFields from the currentState is undefined, the lookup property (with dimensions) is not filled.. So the dimensions are not restored. I had to use timeout to restore the dimensions..

`apiRef?.current?.restoreState(state);

if (state?.columns?.dimensions) { setTimeout(() => apiRef?.current?.restoreState({ columns: { dimensions: state.columns.dimensions }, }), 1000); }`

Check the file gridColumnsUtils.js, method applyInitialState..

[KevinGC28]

I'm having the same issue. Any solution ? :/

[slayer1551]

Same here