[docs] Add a recipe for saving and restoring state externally (#10722)

Signed-off-by: Michel Engelen <[email protected]>
Co-authored-by: Andrew Cherniavskii <[email protected]>

docs/data/data-grid/state/SaveAndRestoreStateInitialState.js

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import { DataGridPremium, useGridApiRef } from '@mui/x-data-grid-premium';
+
+export default function SaveAndRestoreStateInitialState() {
+  const apiRef = useGridApiRef();
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    maxColumns: 10,
+  });
+
+  const [initialState, setInitialState] = React.useState();
+
+  React.useEffect(() => {
+    const stateFromLocalStorage = localStorage?.getItem('dataGridState');
+    setInitialState(stateFromLocalStorage ? JSON.parse(stateFromLocalStorage) : {});
+  }, []);
+
+  const saveSnapshot = React.useCallback(() => {
+    if (apiRef?.current && localStorage) {
+      const currentState = apiRef.current.exportState();
+      localStorage.setItem('dataGridState', JSON.stringify(currentState));
+    }
+  }, [apiRef]);
+
+  if (!initialState) {
+    return <CircularProgress />;
+  }
+
+  return (
+    <Box sx={{ height: 300, width: '100%' }}>
+      <DataGridPremium
+        {...data}
+        apiRef={apiRef}
+        loading={loading}
+        onStateChange={saveSnapshot}
+        initialState={{
+          ...data.initialState,
+          ...initialState,
+        }}
+      />
+    </Box>
+  );
+}

docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import { DataGridPremium, useGridApiRef } from '@mui/x-data-grid-premium';
+import { GridInitialStatePremium } from '@mui/x-data-grid-premium/models/gridStatePremium';
+
+export default function SaveAndRestoreStateInitialState() {
+  const apiRef = useGridApiRef();
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+    maxColumns: 10,
+  });
+
+  const [initialState, setInitialState] = React.useState<GridInitialStatePremium>();
+
+  React.useEffect(() => {
+    const stateFromLocalStorage = localStorage?.getItem('dataGridState');
+    setInitialState(stateFromLocalStorage ? JSON.parse(stateFromLocalStorage) : {});
+  }, []);
+
+  const saveSnapshot = React.useCallback(() => {
+    if (apiRef?.current && localStorage) {
+      const currentState = apiRef.current.exportState();
+      localStorage.setItem('dataGridState', JSON.stringify(currentState));
+    }
+  }, [apiRef]);
+
+  if (!initialState) {
+    return <CircularProgress />;
+  }
+
+  return (
+    <Box sx={{ height: 300, width: '100%' }}>
+      <DataGridPremium
+        {...data}
+        apiRef={apiRef}
+        loading={loading}
+        onStateChange={saveSnapshot}
+        initialState={{
+          ...data.initialState,
+          ...initialState,
+        }}
+      />
+    </Box>
+  );
+}

docs/data/data-grid/state/SaveAndRestoreStateInitialState.tsx.preview

@@ -0,0 +1,10 @@
+<DataGridPremium
+  {...data}
+  apiRef={apiRef}
+  loading={loading}
+  onStateChange={saveSnapshot}
+  initialState={{
+    ...data.initialState,
+    ...initialState,
+  }}
+/>

docs/data/data-grid/state/state.md

@@ -93,6 +93,13 @@ If you restore the page using `initialState` before the data is fetched, the Dat
 
 {{"demo": "RestoreStateInitialState.js", "bg": "inline", "defaultCodeOpen": false}}
 
+### Save and restore the state from external storage
+
+You can use `apiRef.current.exportState()` to save a snapshot of the state to an external storage (e.g. using `localStorage` or `redux`).
+This way the state can be persisted when refreshing the page or navigating to another page.
+
+{{"demo": "SaveAndRestoreStateInitialState.js", "bg": "inline", "defaultCodeOpen": false}}
+
 ### Restore the state with apiRef
 
 You can pass the state returned by `apiRef.current.exportState()` to the `apiRef.current.restoreState` method.

docs/scripts/pages/playground/index.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export default function Playground() {
+  return (
+    <div>A playground for a fast iteration development cycle in isolation outside of git.</div>
+  );
+}