Column Reorder Table Block for React

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.

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.

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.

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.

No. Every row of the list and every cell of the table has a fixed height, the status line keeps its own line, and reordering only changes which column is where. Opening the list on a smaller screen does make the block taller, as any disclosure does.

The order lives in one useState of column keys; nothing is saved or sent. To keep it, store the array with the user's settings and pass it as the initial order. Reset returns to INITIAL, the order the columns are written in.