# 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. > Live demo: State maintenance - https://svgrid.com/demos/55-state-maintenance/ ## Slices | Slice | Where it lives | How to read | How to write | | ----- | -------------- | ----------- | ------------ | | Visibility | `` internal | `api.isColumnVisible(id)` | `api.setColumnVisible(id, visible)` | | Width | `` internal (resize handles) | drag the right edge of a header | - | | Pinning | `` internal | via column menu | via column menu | | Sort | `state.sorting` | `grid.getState().sorting` | `api.setSort(id, dir)` / `api.clearSort()` | | Filter | `state.columnFilters` | `grid.getState().columnFilters` | `api.setFilter(id, ...)` / `api.clearFilter(id)` | ## 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: ```svelte { 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](https://svgrid.com/docs/help/missing-features/). - Column **pinning** is controlled by the column menu; there is no public setter on the API today. Same caveat as above. ## Hiding a column from code There is no `hide` flag on a column definition - visibility is runtime state, so it lives on the api. That is what lets a user's choice survive a column list that changes underneath it. ```svelte (api = next)} /> ``` ## Sizing to the content `autosizeColumn` measures the rendered cells and fits the column to them. `autosizeAllColumns` does the lot - worth wiring to a toolbar button rather than running on load, since it costs a measure pass. ```svelte
(api = next)} /> ``` ## See also - [Column moving](https://svgrid.com/docs/help/columns/column-moving/) - [Column pinning](https://svgrid.com/docs/help/columns/column-pinning/) - [Updating definitions](https://svgrid.com/docs/help/columns/updating-definitions/) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/columns/column-state/ . All docs: https://svgrid.com/llms.txt