# Save and restore view state

View state saves user configuration such as column widths, order, sorting, filters, and selection. Distinguish it from data snapshots that back up original order values.

Canonical: https://grid.syidax.com/docs/guides/grid-state/

<a id="understand"></a>

## How it works and when to use it

getState() returns a versioned state object. setState() reports applied portions and problems, so do not assume every restore succeeds completely.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

- [Installation and integration · Shared sample data](https://grid.syidax.com/docs/guides/getting-started.md)

<a id="example-1"></a>

## Example 1. Save views per user

Read state from a Grid whose data and columns are ready.

```javascript
const state = await grid.getState();
localStorage.setItem('orders-grid-state', JSON.stringify(state));
```

Verify the result: Save the current configuration in the browser. Include user and view identifiers in the storage key to keep states separate.

<a id="example-2"></a>

## Example 2. Restore an existing view

Handle failures to parse the saved JSON in your app.

```javascript
const text = localStorage.getItem('orders-grid-state');
if (text) {
  const report = await grid.setState(JSON.parse(text));
  console.log(report);
}
```

Verify the result: If columns were removed or some state is unsupported, read the report and tell the user about the partial restore.

<a id="example-3"></a>

## Example 3. Initial rendering and column-only state

Pass initialState before mounting to restore from the first render. If only column layout is needed, use getColumnState()/applyColumnState() to reduce the saved scope.

Verify the result: Initial state is applied once. Use setState() to restore a running Grid. Callback functions and source data are not recreated from JSON state.

<a id="pitfalls"></a>

## Combining features and troubleshooting

Selection and focus restoration require stable row IDs and column identifiers for the same data. Do not force selection of deleted rows.

Check getStateCaptureReport() and the restore report for omitted information. Use snapshots to restore original values.

<a id="related-api"></a>

## APIs used by this feature

Review the shared settings together with the related documentation below.

- [Grid properties](https://grid.syidax.com/docs/options.md)
- [Column settings](https://grid.syidax.com/docs/columns.md)
- [Methods](https://grid.syidax.com/docs/methods.md)

<a id="next"></a>

## Related reading

- [How rows, columns, and IDs relate](https://grid.syidax.com/docs/guides/concepts.md)
- [Connect results and events](https://grid.syidax.com/docs/guides/data-event-access.md)
- [Explore in Features](https://grid.syidax.com/grid/grid-state) — The guide describes which interactions are available to try.