DataGrid persistent columns state

[straps]

Order ID 💳

50772

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

I cannot figure out how to save and restore the state of a DataGrid

For state I intend saving column visibility, disposition and order

I read the documentation but I'm not really understanding how and where to do it

All your code samples make use of the useGridApiContext via a button on the Toolbar, but I don't want it. I want it to be automatic for the user, it has not to press any button

Your environment 🌎

`npx @mui/envinfo`

  Browser: Google Chome 105.0.5195.125
  System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
  Binaries:
    Node: 18.8.0 - /usr/bin/node
    Yarn: 1.22.19 - /opt/node/bin/yarn
    npm: 8.18.0 - /usr/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Firefox: 104.0
  npmPackages:
    @emotion/react: 11.10.4 => 11.10.4 
    @emotion/styled: 11.10.4 => 11.10.4 
    @mui/base:  5.0.0-alpha.97 
    @mui/core-downloads-tracker:  5.10.5 
    @mui/lab: 5.0.0-alpha.99 => 5.0.0-alpha.99 
    @mui/material: 5.10.5 => 5.10.5 
    @mui/private-theming:  5.10.3 
    @mui/styled-engine:  5.10.5 
    @mui/system:  5.10.5 
    @mui/types:  7.2.0 
    @mui/utils:  5.10.3 
    @mui/x-data-grid:  5.17.3 
    @mui/x-data-grid-premium: ^5.17.3 => 5.17.3 
    @mui/x-data-grid-pro:  5.17.3 
    @mui/x-date-pickers:  5.0.2 
    @mui/x-date-pickers-pro: ^5.0.2 => 5.0.2 
    @mui/x-license-pro: ^5.17.0 => 5.17.0 
    @types/react: 18.0.20 => 18.0.20 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ^4.8.3 => 4.8.3 

[cherniavskii]

Hey @straps
Here's a quick demo that uses onColumnVisibilityModelChange, onColumnOrderChange and onColumnWidthChange to save grid state to localStorage: https://codesandbox.io/s/keen-heisenberg-xu8fvm?file=/demo.tsx:918-947
Is this what you are looking for?

[straps]

Hi, thank you very much, problem solved 🙏