DataGrid persistent columns state

[straps]

Order ID 💳

50772

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] 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