# Named views
A "view" is a saved snapshot of the grid's state - sort, filters, column
order/width/visibility, page, grouping. Named views let a user save the layout
they like and switch between them. SvGrid ships this as a small manager over
the grid's `getState()` / `setState()`, with pluggable storage.
> Live demo: Named views - https://svgrid.com/demos/143-named-views/
```svelte
```
## The manager API
`createNamedViews(api, { storage })` returns:
| Method | Does |
| ----------------- | ---------------------------------------------------------- |
| `list()` | All saved views, oldest first. |
| `save(name)` | Capture the current state under `name` (overwrites a dup). |
| `load(name)` | Apply a saved view. Returns `false` if unknown. |
| `remove(name)` | Delete a view. Returns `false` if unknown. |
| `rename(a, b)` | Rename, unless `b` already exists. |
| `has(name)` | Whether a view exists. |
It's pure and synchronous - all persistence goes through the storage adapter.
## Storage adapters
- **`localStorageViews(key)`** - persists per browser. SSR-safe (no-ops when
`localStorage` is unavailable).
- **`memoryViews()`** - in-memory only (the default if you pass no storage).
- **Custom** - implement `ViewStorage` (`read()` / `write(views)`) to sync
views to a server or a per-user account:
```ts
const serverStorage: ViewStorage = {
read: () => cachedViews,
write: (views) => { cachedViews = views; fetch('/api/views', { method: 'PUT', body: JSON.stringify(views) }) },
}
createNamedViews(api, { storage: serverStorage })
```
## Notes
- A view stores whatever `api.getState()` returns; restoring calls
`api.setState(view.state)`, which applies only the keys present.
- This is the building block; the demo wires a simple save-box + chips UI on
top, but the manager is headless so you can render views however you like.
See the live [Named views](https://svgrid.com/demos/143-named-views/) demo.
## Save a view, change things, switch back
`api.getState()` hands you the whole view - sort, filters, column widths,
order, pinning, page - as one serializable object, and `api.setState()` puts a
snapshot back. A named view is nothing more than a record of those. Sort a
column, drag one wider, save it, disturb everything, then pick it from the list.
```svelte
(api = next)}
/>
```
## Views survive a reload when you put them somewhere
The only difference between a view that disappears on refresh and one that
does not is where the object lives. The snapshot is plain JSON, so `localStorage`
is the cheapest place; a row keyed by user is the one you actually want once
views are shared. `setState` takes a partial, which is why restoring an old
snapshot that predates a column still works - the keys it does not carry are
simply left alone.
```svelte
{status}
(api = next)} />
```
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/state/named-views/ . All docs: https://svgrid.com/llms.txt