Drag-drop columns to reorder
Live in demo 54-columns-hierarchy.
When
Re-order columns by dragging them in a side panel; live grid reflects the new order.
How
Key API surface:
api.setColumnPinning({...})your reordering callback updates the columns prop
See the demo source for the full implementation; this recipe pins the pattern + the surface so you can copy-paste it confidently. The doc page that explains the underlying feature in depth is linked from the recipes index.
See also
- Demo 54-columns-hierarchy source
- Demo 54-columns-hierarchy prompt sidecar - drop into an LLM context window
- Recipes index
Related articles
- Row Drag-and-Drop Reordering in a Svelte Data Grid - Wire up drag-to-reorder rows in SvGrid using a handle cell, native HTML5 drag events, and a reactive state array - no library required.
- Building a Kanban Board in Svelte 5 (Without a Board Library) - How to turn a Svelte data grid into a drag-and-drop Kanban board with one prop - lanes, WIP limits, swimlanes, keyboard moves, and virtualized lanes for large boards.
- Multi-Level (Grouped) Column Headers in SvGrid - Band related columns under a shared parent header using SvGrid's nested column definition - how to nest, pin, combine with sorting and filtering, and when NOT to use grouping.