---
name: sortable-table
category: data
summary: "Drag/keyboard row & column reordering plus resizing"
subpath: "@42/core/sortable-table"
deepDoc: docs/llm/sortable-table.md
---

Drag/keyboard row & column reordering plus column resizing on a `<table>`.
Assumes the Nth `[data-c42-sortable-col]` maps to the Nth cell per row.

```html
<table data-c42-sortable-table>
  <thead><tr>
    <th data-c42-sortable-col data-value="name">
      Name<span data-c42-sortable-resize></span>
    </th>
  </tr></thead>
  <tbody>
    <tr data-c42-sortable-row data-value="r1">
      <td><button data-c42-sortable-row-handle></button>Ada</td>
    </tr>
  </tbody>
</table>
```

```ts
import { SortableTable } from '@42/core/sortable-table';
const t = new SortableTable(root, { reorderRows: true, reorderColumns: true, resizeColumns: true });
t.moveRow('r1', 'r3');
```

Keyboard: row handle Up/Down/Home/End; column handle Left/Right; resize handle Left/Right.
Options: `reorderRows` (default true), `reorderColumns` (default false), `resizeColumns` (default false), `resizeStep` (16), `minColumnWidth` (48)
Methods: `getRowOrder()`, `getColumnOrder()`, `moveRow(a,b)`, `moveColumn(a,b)`, `setColumnWidth(value, px)`
Events: `sortabletable:reorder` → `{ axis, from, to, order }`, `sortabletable:resize` → `{ value, width }`