Drag to Reorder Table Columns — HTML5 Header Drag and Drop

Row reordering and column reordering solve different problems — this is the column axis: dragging a header left or right to change which order columns display in, with every row's cells following along automatically. This snippet implements it with genuine HTML5 drag-and-drop on the <th> elements themselves — draggable="true", dragstart/dragover/drop — distinct from a row drag reorder table, which drags <tr>s vertically instead.

Column order lives in one array, not in the DOM

Rather than physically moving <th> and <td> DOM nodes around during a drag, the current column order is tracked as a simple array of keys, order. Both renderHead() and renderBody() iterate order to decide which column renders where — dragging a header never touches the DOM directly, it only ever mutates this one array and re-renders, which is what keeps headers and every row's cells perfectly in sync automatically.

Left-half vs right-half drop detection

On every dragover, the handler compares the cursor's X position against the hovered header's getBoundingClientRect() midpoint — landing in the left half signals "insert before this column," the right half signals "insert after." A highlighted inset border on the corresponding edge of the target header shows which side the drop will land on, live as you drag across different headers, computed fresh on every dragover rather than as a static highlight.

Splice-then-reinsert column math

On drop, the dragged column's key is spliced out of order first, then reinserted at the target column's current index (or one past it, depending on which half was hovered) — the same core technique as row reordering, but applied to a flat array of column keys instead of row objects. Because the removal happens before the target index is looked up again, the insertion always lands in the correct final position regardless of whether the drag moved the column left or right.

Every row's cells follow the same order array

The critical detail that makes this a genuine column reorder rather than just a shuffled header: renderBody() maps over the exact same order array to decide each row's cell sequence. There's no separate bookkeeping for "which cell goes where" — header and body both read from one source of truth, so the moment order changes, every single row's cells reflow to match on the very next render with zero chance of drifting out of sync.

A guard against dropping a column onto itself

Both dragover and drop explicitly check th.dataset.key === dragKey and bail out — without this, dropping a header back onto its own current position would still run through the splice/reinsert logic and could produce a visually confusing no-op highlight or an unnecessary re-render.

Customizing it

Persist the column order to localStorage or a user preference, combine with resizable columns so width and order are both adjustable, or add a "reset order" control. Pair with a frozen columns table — just make sure frozen columns are excluded from the draggable set.