# Persist column layout to URL
Goal: when a user sorts, filters, or pages the grid, the URL updates so
that copy-pasting the link gives the recipient the same view. On
reload the grid restores from the URL.
## What lives in the URL
Stick to the slices that are cheap to serialise and unambiguous to
parse:
- **sort**: `Array<{ id, desc }>` → JSON
- **filters**: `Array<{ id, operator, value }>` → JSON
- **page** + **pageSize**: numbers
Column width, pinning, and visibility persist better in `localStorage`
than in the URL - they're per-user, not per-link. See
[Saved views](https://svgrid.com/docs/help/saved-views/) for that pattern.
## Implementation
The examples on this page run against these rows:
```svelte
```
```svelte
(sort = next)}
onFiltersChange={(next) => (filters = next.columns)}
/>
```
## Notes
- **`replaceState` not `pushState`** - sort/filter changes shouldn't
pollute the browser history. The user pressing Back should leave
the page, not undo their last filter.
- **Debounce the write, not the read** - reading the URL on mount
needs to be synchronous so the grid renders with the right state.
The write-back is what's noisy.
- **`?sort=` URLs survive page reloads** without needing a server -
the `URLSearchParams` parse happens client-side. Perfect for
Vite/SvelteKit static deploys.
- **`hashchange`** is a fine alternative if your router uses `#/`
(the gallery does). Replace `window.location.search` with
`window.location.hash.split('?')[1]` and `window.history.replaceState`
with `window.location.hash = ...`.
- **Sharing tip**: add a "Copy link" button next to the grid header
that does `navigator.clipboard.writeText(window.location.href)`. The
link is already the view.
## Try it
The sort state round-trips through a query string. Change the sort, watch the
link update; the parse direction is the same code read backwards.
```svelte
(sorting = next)}
/>
Shareable link: {query}
```
In a real app the `$derived` becomes a `replaceState` so the address bar tracks
the grid, and a `+page.ts` reads it back on load.
## See also
- [Filter API](https://svgrid.com/docs/help/filtering/filter-api/)
- [Row sorting](https://svgrid.com/docs/help/rows/row-sorting/)
- [Saved views](https://svgrid.com/docs/help/saved-views/) - for the multi-view picker
pattern beyond URL state
---
SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/recipes/persist-column-layout-to-url/ . All docs: https://svgrid.com/llms.txt