# Persisting State

A common requirement for web apps is to save the user customization and settings when interacting with your app, and then restore them once the user comes back at some point in the future. The KendoReact Grid exposes the capability to save and restore settings that were previously applied.

The following example demonstrates how to persist the Grid state.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/persist-state/func/source.txt)

## Setup

To persist the state of the Grid:

1. Keep the initial skip, take and sort settings inside the `dataState`:

   ```tsx
   const [dataState, setDataState] = React.useState<GridState>({
       data: formattedOrders,
       total: formattedOrders.length,
       filter: { logic: 'and', filters: [] },
       skip: 0,
       take: 20,
       sort: [{ field: 'orderDate', dir: 'desc' }]
   });
   ```

2. Define column configuration with stable `id` values and an initial column state. The Grid uses the column definitions to render columns and `columnsState` to control their current order, size, visibility, and locked state:

   ```tsx
   const initialColumnsState = [
       { id: 'customerID', field: 'customerID', width: 200, orderIndex: 0 },
       { id: 'orderDate', field: 'orderDate', width: 200, orderIndex: 1 },
       { id: 'shipName', field: 'shipName', width: 200, orderIndex: 2 },
       { id: 'freight', field: 'freight', width: 200, orderIndex: 3 },
       { id: 'shippedDate', field: 'shippedDate', width: 200, orderIndex: 4 },
       { id: 'employeeID', field: 'employeeID', width: 200, orderIndex: 5 },
       { id: 'orderID', field: 'orderID', width: 200, orderIndex: 6 }
   ];

   const columns = initialColumnsState.map(({ orderIndex, ...column }) => column);
   // Copy each entry so state updates never mutate the initial layout.
   const createInitialColumnsState = () => initialColumnsState.map((column) => ({ ...column }));
   const [columnsState, setColumnsState] = React.useState(createInitialColumnsState);
   ```

3. Create a `saveStateToLocalStorage` function that retrieves the current state and sets it in `localStorage`:

   ```tsx
   const saveStateToLocalStorage = () => {
       const state = {
           dataState,
           columnsState
       };
       localStorage.setItem('gridState', JSON.stringify(state));
   };
   ```

4. Create a `loadStateFromLocalStorage` function that retrieves the saved state from `localStorage` and restores the Grid state:

   ```tsx
   const loadStateFromLocalStorage = () => {
       const savedState = localStorage.getItem('gridState');
       if (savedState) {
           const { dataState: savedDataState, columnsState: savedColumnsState } =
               JSON.parse(savedState);
           setDataState(savedDataState);
           setColumnsState(savedColumnsState);
       }
   };
   ```

## Reset Column Layout

When the Grid uses controlled `columnsState`, resetting the column definitions does not reset a layout that users changed. Use the column definitions to render `GridColumn` components and `columnsState` to control their current layout. Save the initial `GridColumnState[]` and set it back through the state setter to restore the initial layout. Include `orderIndex` in the initial state to explicitly restore the initial column order.

The following snippet resets the current column layout:

```tsx
const resetColumnsState = () => {
    setColumnsState(createInitialColumnsState());
};
```

Use the `onColumnsStateChange` event to keep the controlled state synchronized with user-driven column changes:

```tsx
<Grid
    columnsState={columnsState}
    onColumnsStateChange={(event) => setColumnsState(event.columnsState)}
>
    {columns.map((column) => (
        <GridColumn key={column.id} {...column} />
    ))}
</Grid>
```

## Suggested Links

* [Grid State Management](https://www.telerik.com/kendo-react-ui-develop/components/grid/state-management)
* [API Reference of the Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops)
* [API Index of the Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api)