Column state

"Column state" is the bag of per-column settings that change at runtime: visibility, width, pinning, sort, filter. SvGrid keeps these as separate state slices inside the grid instance.

Slices

Persisting state

To round-trip column state (e.g. through localStorage or the URL), subscribe via the wrapper's change callbacks and re-apply on mount through the imperative API:

<script lang="ts">
  import type { SvGridApi } from 'sv-grid-community'

  const KEY = 'people-grid-state'

  function loadState() {
    try { return JSON.parse(localStorage.getItem(KEY) ?? '{}') }
    catch { return {} }
  }
  const initial = loadState()

  let sorting = $state<Array<{ id: string; desc: boolean }>>(initial.sorting ?? [])
  let filters = $state<Array<{ id: string; operator: string; value: string }>>(
    initial.filters ?? [],
  )
  let api = $state<SvGridApi<typeof features, Person> | null>(null)

  $effect(() => {
    localStorage.setItem(KEY, JSON.stringify({ sorting, filters }))
  })
</script>

<SvGrid
  data={rows}
  columns={columns}
  features={features}
  filterMode="menu"
  onApiReady={(next) => {
    api = next
    // Re-apply saved state on first mount.
    for (const s of initial.sorting ?? []) api.setSort(s.id, s.desc ? 'desc' : 'asc')
    for (const f of initial.filters ?? []) api.setFilter(f.id, { operator: f.operator, value: f.value })
  }}
  onSortingChange={(next) => (sorting = next)}
  onFiltersChange={(next) => (filters = next.columns)}
/>

Resetting state

There is no single "reset" API today. To revert:

• Sort: api.clearSort()
• Filters: iterate the active list and call api.clearFilter(id)
• Visibility: walk your columns and call setColumnVisible(id, true)

Wrap whichever subset you need into your own helper if you do this often.

Gotchas

• Column width is currently tracked per column id inside the SvGrid component and is not exposed on SvGridApi. If you need to persist user resizes you'll have to read the cells after the grid renders or PR an accessor onto the API. See missing-features.md.
• Column pinning is controlled by the column menu; there is no public setter on the API today. Same caveat as above.

See also

• Column moving
• Column pinning
• Updating definitions