shadcn.io is not affiliated with official shadcn/ui
Column Reorder Table Block for Svelte
A pipeline table with a Column order list beside it: Move earlier and Move later buttons reorder the columns and announce the move, a grip drags as an extra, and Reset restores the default order.
Installation
Overview
Let people read a table in their own column order, with this column reorder table for Svelte with Ark UI. Inside a hairline frame with a plus mark on each corner, a native table of eight sales deals (deal, owner, stage, value, close date and chance) sits at the start and a "Column order" list at its end, always in view. Each row of the list has a grip, its position and two buttons, Move earlier and Move later; the table's columns follow the list at once, and a polite line says what happened ("Owner moved to position 3 of 6."). Focus stays on the button you pressed, so a column can be walked along with repeated presses. The grip also takes a pointer drag, as an extra. Reset puts the columns back, and the rows never change height. Below the large breakpoint the list sits above the table behind a "Column order" button that opens it, and a phone shows the first two columns in the order chosen. It's built from native buttons, Badge and Guides, with a CSS entrance only. For pipelines, reports and any table whose readers want the columns their way.
FAQ
How do I use my own columns?
Edit COLUMNS (a key, a label and whether numbers sit at the end), DEALS and the Value helper that draws a cell for a key. The list, the table's heads and its cells are all drawn from one array of keys, order, so adding a column is a new entry, a case in Value and nothing else. The first column in the order is drawn as the row header, so each row is named by whatever leads it.
How does it work without a mouse?
The Move earlier and Move later buttons are the whole interaction: they are named for their column ("Move Owner later"), the ones that can't move are disabled, and focus stays on the button you pressed or, at an end of the list, moves to its partner so the next press still does something. The polite line announces the move with the new position. The grip and the drag are an extra for the pointer and are hidden from assistive technology.
How does the pointer drag work?
Pressing the grip captures the pointer; as it moves the row follows it and the others make room, one place for each row height it travels, and letting go drops it where it is and announces the new position. It is built from pointer events with no library, so it also works with a finger, and the grip has touch-none so the page doesn't scroll under it. Pressing a button and dragging the grip give the same order.
What happens on a phone and a tablet?
Below the large breakpoint the list collapses behind a "Column order" button (with aria-expanded and aria-controls) above the table. A phone fits two columns, a wider screen four and a tablet all six, always counted from the first in the order chosen, so moving a column to the front brings it into view. Nothing scrolls sideways, and the button says how many are shown.