Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[data grid] Column Order State not saved on navigate away using link #12352

Closed
SMoon-beckman opened this issue Mar 6, 2024 · 2 comments
Closed
Labels
component: data grid This is the name of the generic UI component, not the React module! duplicate This issue or pull request already exists

Comments

@SMoon-beckman
Copy link

SMoon-beckman commented Mar 6, 2024

Steps to reproduce

Link to live example: https://mui.com/x/react-data-grid/state/#save-and-restore-the-state-from-external-storage
I've linked to the example on your site because the behavior is clearly observable there.

Steps:

  1. Using a configured tables, such as the one in the provided link, change the column order
  2. Navigate away from the page by clicking a link (i.e. not using either refresh or the back button)
  3. Navigate back to your DataGrid.
  4. Observe the column order

related: Controlled Column Ordering

Current behavior

Column order does not persist when navigating away (using a click, as opposed to either refresh or the back button)

Expected behavior

Column order state should be maintained when user clicks away.

Context

Using the pattern demonstrated in Restore the state from Storage, I see that my column order state successfully persists when using the back button or hitting refresh on my browser, but it does not do so when navigating to another location. All other state does persist (column visibility, filters, etc.). The beforeunload event does occur, but what I'm seeing is that the api.current.exportState() object does not contain the updated column order state.

Your environment

`npx @mui/envinfo` System: OS: Windows 10 10.0.19045 Binaries: Node: 16.13.1 - C:\Program Files\nodejs\node.EXE npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: 122.0.6261.71 Edge: Chromium (122.0.2365.66) npmPackages: @emotion/react: ^11.11.3 => 11.11.3 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-alpha.127 @mui/core-downloads-tracker: 5.15.6 @mui/icons-material: 5.11.16 => 5.11.16 @mui/lab: 5.0.0-alpha.128 => 5.0.0-alpha.128 @mui/material: ^5.15.6 => 5.15.6 @mui/private-theming: 5.12.0 @mui/styled-engine: 5.12.0 @mui/system: 5.12.1 @mui/types: 7.2.13 @mui/utils: 5.12.0 @mui/x-data-grid: 6.19.4 @mui/x-data-grid-premium: ^6.19.4 => 6.19.4 @mui/x-data-grid-pro: 6.19.4 @mui/x-license-pro: 6.10.2 @types/react: 18.0.9 react: 17.0.1 => 17.0.1 react-dom: 17.0.1 => 17.0.1 styled-components: 5.2.3 => 5.2.3

Search keywords: column state persistence restore
Order ID:

@SMoon-beckman SMoon-beckman added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Mar 6, 2024
@oliviertassinari oliviertassinari added the component: data grid This is the name of the generic UI component, not the React module! label Mar 6, 2024
@oliviertassinari
Copy link
Member

oliviertassinari commented Mar 6, 2024

Duplicate of #11576

@oliviertassinari oliviertassinari marked this as a duplicate of #11576 Mar 6, 2024
@michelengelen michelengelen changed the title Column Order State not saved on navigate away using link [data grid] Column Order State not saved on navigate away using link Mar 7, 2024
@michelengelen michelengelen added duplicate This issue or pull request already exists and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Mar 7, 2024
@michelengelen michelengelen closed this as not planned Won't fix, can't repro, duplicate, stale Mar 7, 2024
Copy link

github-actions bot commented Mar 7, 2024

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @SMoon-beckman?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

3 participants