# Updating column definitions There are two ways to change columns after the grid has mounted: ## 1. Reassign the `columns` prop `` is reactive. Replace the array (or mutate a `$state` array) and the grid re-derives its internal columns. ```svelte ``` ## 2. Use the imperative API The wrapper exposes mutators via `onApiReady`: ```svelte (api = next)} /> ``` Available column mutators on `SvGridApi`: | Method | What it does | | ------ | ------------ | | `addColumn(col, position?)` | Insert one column. `position` is `'left' \| 'right' \| number` (default `'right'`). | | `addColumns(cols, position?)` | Insert many. | | `removeColumn(id)` | Remove by column id (or field when no `id`). | | `setColumnVisible(id, visible)` | Show / hide. | | `isColumnVisible(id)` | Read visibility. | The imperative path is the right choice when the column-change initiator is **outside** the parent that owns the `columns` array - e.g. a toolbar component that doesn't know about the data source. ## What is preserved when columns change When you add or remove a column: - Sort state survives if the sorted column is still present. - Filter state for the removed column is discarded. - Active-cell focus is clamped into bounds. - Column widths set by the user via resize handles are preserved by column id. - Pinning is preserved by column id. When you **reorder** columns by reassigning the array, the grid renders them in the new order; pinned-left and pinned-right groups retain their order relative to themselves. ## Gotchas - Anything that captures `ctx.column.columnDef` inside a `cell` callback will see the **new** column def after a swap. Don't cache it. - If you reassign the entire `columns` array on every render, you'll pay the cost of re-deriving headers each time. Memoise it (build once with `$state.raw` or a one-time IIFE) for hot-loop components. ## More examples ### Autosize columns api.autosizeColumn(id) and api.autosizeAllColumns() snap columns to the widest visible cell via canvas-based text measurement. The column header menu has an "Autosize" item that calls the same code. Manual drag-resize still works. > Live demo: Autosize columns - https://svgrid.com/demos/172-autosize-columns/ ## Columns that change at runtime The column list is an ordinary prop, so deriving it from state is all a "choose your columns" control needs. Rebuild the array and the grid follows - no api call involved. ```svelte
{#each ALL as f} {/each}
``` ## Reordering the same columns Because the array is the source of truth, changing its order changes the grid. That is the cheap version of column reordering when you want the order to come from your own state rather than from a drag. ```svelte ``` ## See also - [Column state](https://svgrid.com/docs/help/columns/column-state/) - [Column moving](https://svgrid.com/docs/help/columns/column-moving/) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/columns/updating-definitions/ . All docs: https://svgrid.com/llms.txt