# Column moving (drag to reorder) There are two ways to move columns in sv-grid: 1. **`enableColumnReorder` prop** - the built-in drag-to-reorder UX. Every header becomes draggable, the grid paints a drop indicator, and the order is emitted via `onColumnOrderChange`. Recommended for v1. 2. **Reassign the `columns` prop** - the array order IS the display order, so you can swap items in your own state. > Live demo: Column reorder - https://svgrid.com/demos/109-column-reorder-engine/ ## Built-in drag-to-reorder The examples on this page run against these rows: ```svelte ``` ```svelte (order = [...next])} /> ``` When `enableColumnReorder` is `true`, the grid: - Sets `draggable=true` on every header (``). - Paints a vertical drop indicator before / after the hovered header. - On drop, updates its internal order and fires `onColumnOrderChange(orderedIds)`. - Respects column pinning - dragging across pin zones is allowed, but a column dropped into a pin zone stays in that zone's natural slot. ### Props | Prop | Type | Notes | | --- | --- | --- | | `enableColumnReorder` | `boolean` | Defaults to `false`. Set `true` to opt in. | | `columnOrder` | `ReadonlyArray` | Initial / controlled order. Reassign to drive externally. | | `onColumnOrderChange` | `(order: string[]) => void` | Fires after each change (user drag or `api.setColumnOrder`). | ### Imperative API `SvGridApi` exposes two methods for command-palette / shortcut wiring: ```ts api.setColumnOrder(['symbol', 'price', 'name', 'pe']) const current = api.getColumnOrder() ``` `setColumnOrder` accepts a subset of ids; columns not in the array keep their existing relative position after the listed ones. Unknown ids are skipped. ## Pin groups + reorder Column reorder composes cleanly with column pinning: ```svelte { api.setColumnPinning({ left: ['symbol'], right: ['changePct'] }) }} /> ``` The reorder logic operates on the column ids; the pin grouping is then layered on top, so left-pinned columns stay on the left and right-pinned on the right. ## Reassign the columns prop (no `enableColumnReorder`) If you prefer to own the order entirely in user-land (e.g. a dropdown picker rather than drag): ```svelte ``` This was the only option before `enableColumnReorder` shipped. Demo 104 shows a user-land header-drag pattern built on top of this approach. ## Persisting + saved views The emitted `string[]` is JSON-serialisable, so the most common pattern is: - Save to `localStorage` for "remember my last layout". - Save under a name for "Saved views" feature (combine with column widths, pinning, and filter state). - Serialise to a URL param for shareable views. ## Dragging a column `enableColumnReorder` lets a user drag a header into a new position. The order they choose is state, not configuration - the column list you pass stays the starting point, not the law. ```svelte ``` ## Reordering with pinned edges A pinned column stays pinned while the rest reorder around it, which is what makes "keep the name visible, arrange the rest" work without extra handling. ```svelte ``` ## See also - Demo 109: Column reorder (engine prop) - Demo 104: Column reorder (user-land drag-handle pattern) - `Saved views` recipe in `docs/recipes/saved-views.md` - `api.setColumnPinning` and `api.getColumnPinning` --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/columns/column-moving/ . All docs: https://svgrid.com/llms.txt