New to KendoReact? Learn about KendoReact Free.

Persisting State

Updated on Sep 3, 2026

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.

Loading ...

Setup

To persist the state of the Grid:

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' }]
});

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);
const createInitialColumnsState = () => initialColumnsState.map((column) => ({ ...column }));
const [columnsState, setColumnsState] = React.useState(createInitialColumnsState);

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));
};

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>

Persisting State

Setup

Reset Column Layout

Suggested Links