# Drag-drop columns to reorder > Live in [demo 54-columns-hierarchy](https://svgrid.com/demos/54-columns-hierarchy/). > Live demo: Columns hierarchy + manager - https://svgrid.com/demos/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](https://github.com/sv-grid/sv-grid/blob/main/docs/recipes/index.md). ## See also - [Demo 54-columns-hierarchy source](https://github.com/sv-grid/sv-grid/blob/main/examples/src/demos/54-columns-hierarchy.svelte) - [Demo 54-columns-hierarchy prompt sidecar](https://github.com/sv-grid/sv-grid/blob/main/examples/src/demos/prompts/54-columns-hierarchy.md) - drop into an LLM context window - [Recipes index](https://github.com/sv-grid/sv-grid/blob/main/docs/recipes/index.md) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/recipes/drag-drop-columns/ . All docs: https://svgrid.com/llms.txt