@elabs-ai/components-data 4.0.0 → 4.2.0

package/src/data-table/data-table.tsx

@@ -1,6 +1,14 @@
 "use client";
 
-import { forwardRef, useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
 import {
   flexRender,
   getCoreRowModel,
@@ -12,18 +20,127 @@ import {
   type ColumnDef,
   type ColumnFiltersState,
   type ColumnPinningState,
+  type ColumnSizingState,
   type OnChangeFn,
   type PaginationState,
   type Row,
+  type RowData,
+  type RowSelectionState,
   type SortingState,
   type Table as TanstackTable,
   type VisibilityState,
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
-import { Button, Skeleton, Spinner, useLocale } from "@elabs-ai/components-ui";
+// Row drag-reorder (#13). @dnd-kit is the only DnD primitive in the repo (reuse
+// audit found none) — MIT-licensed, attributed in scripts/attributions.sources.json.
+// KeyboardSensor + sortableKeyboardCoordinates already implement the exact key
+// model the issue asks for (Space/Enter lift, arrows move, Space/Enter drop,
+// Escape cancel) and DndContext's built-in `Accessibility` component renders the
+// aria-live announcer — this file supplies the localized announcement text, the
+// localized screen-reader instructions + role description (#98 — dnd-kit ships
+// its own hardcoded-English defaults for both, which need an explicit override
+// same as everything else this feature says out loud), and the token-driven
+// visuals.
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type Announcements,
+  type DragCancelEvent,
+  type DragEndEvent,
+  type DragOverEvent,
+  type DragStartEvent,
+  type DraggableAttributes,
+  type DraggableSyntheticListeners,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { ArrowDown, ArrowUp, ArrowUpDown, GripVertical } from "lucide-react";
+import { Button, Checkbox, Skeleton, Spinner, useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 
+// ─── Column meta seam (#69) ─────────────────────────────────────────────────────
+// `columnDef.meta` is where TanStack lets a caller attach column-specific,
+// renderer-agnostic data — `DataTable` reads exactly two keys from it so
+// numeric-column styling (interaction-guidelines.md § Micro-typography:
+// "tabular-nums for any number column … DataTable numeric cells") is the
+// component's job, not a per-caller convention rediscovered at every call
+// site. Exported (not just declared) so a consumer's own `ColumnDef` literal
+// type-checks against a NAMED type, per component-api.md § Types.
+
+/**
+ * `DataTable`'s `columnDef.meta` contract, read by the header/body/skeleton
+ * cell renderers. Set `numeric: true` on a column to get `tabular-nums` +
+ * end-alignment on both the `<th>` and every `<td>` (including the loading
+ * skeleton) for free.
+ */
+export interface DataTableColumnMeta {
+  /** Numeric column: tabular figures + end alignment on header and cells. */
+  numeric?: boolean;
+  /**
+   * Explicit alignment override for when `numeric` isn't the right cue (or
+   * to align a non-numeric column). Independent of `numeric` — `numeric`
+   * alone still drives `tabular-nums` even when `align` overrides the
+   * alignment away from `"end"`.
+   */
+  align?: "start" | "center" | "end";
+}
+
+declare module "@tanstack/react-table" {
+  // `TData`/`TValue` must stay in the signature to match the interface being
+  // augmented, even though `DataTableColumnMeta` (deliberately) doesn't use
+  // them; the empty extends-body is how TanStack's own module-augmentation
+  // pattern for `ColumnMeta` is documented.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-object-type
+  interface ColumnMeta<TData extends RowData, TValue> extends DataTableColumnMeta {}
+}
+
+/**
+ * `<th>`/`<td>`/skeleton-`<td>` className for a column's `meta.numeric`/`meta.align`
+ * (#69). A pure, module-level helper (no component state) so all three call
+ * sites — header, body cell, loading skeleton — stay in lockstep; a drift
+ * between them is exactly the "skeleton doesn't mirror the real layout" bug
+ * loading-states.md warns about. `meta` is typed as the exported
+ * `DataTableColumnMeta` (structurally satisfied by TanStack's augmented
+ * `ColumnMeta<TData, TValue>`) so the helper doesn't need the table's generic
+ * row type.
+ *
+ * Deliberately takes NO options and NO padding branch: round-1 (#82
+ * follow-up) briefly reserved an extra 36px of trailing `<th>` padding here
+ * to clear the resize handle, but that moved the header's alignment
+ * reference point 24px away from the body `<td>`'s (which keeps the plain
+ * 12px `px-3`) — an end-aligned numeric column's own header no longer lined
+ * up with the values it labels, defeating the whole point of #69. Reserving
+ * space via padding necessarily desyncs header from body, because only the
+ * header has a handle to clear. The round-2 fix instead resolves the
+ * hit-test collision at the CONTROL that needs to win it — see the sort
+ * button's `relative z-10` below — so header and body padding stay
+ * byte-identical and this helper only ever contributes alignment +
+ * tabular-nums classes.
+ */
+function numericColumnClasses(meta: DataTableColumnMeta | undefined) {
+  if (!meta?.numeric && !meta?.align) return undefined;
+  const alignClass =
+    meta?.align === "start"
+      ? "text-start"
+      : meta?.align === "center"
+        ? "text-center"
+        : meta?.align === "end"
+          ? "text-end"
+          : meta?.numeric
+            ? "text-end"
+            : undefined;
+  return cn(alignClass, meta?.numeric && "tabular-nums");
+}
+
 // ─── Public types ─────────────────────────────────────────────────────────────
 
 /** Snapshot of table slice state — used for saved-view serialise/rehydrate. */
@@ -39,6 +156,17 @@ export interface DataTableViewState {
    * that already constructs a `DataTableViewState` literal.
    */
   columnPinning?: ColumnPinningState;
+  /**
+   * Which rows are checked (#11), keyed by row id — see `getRowId`. OPTIONAL
+   * like `columnPinning`, for the same reason: the other members predate it.
+   */
+  rowSelection?: RowSelectionState;
+  /**
+   * Per-column widths after resizing (#12), keyed by column id. OPTIONAL like
+   * `columnPinning`/`rowSelection`, for the same reason: the other members
+   * predate it.
+   */
+  columnSizing?: ColumnSizingState;
 }
 
 /**
@@ -135,6 +263,83 @@ export interface DataTableProps<TData, TValue> extends Omit<
   columnPinning?: ColumnPinningState;
   onColumnPinningChange?: OnChangeFn<ColumnPinningState>;
 
+  /**
+   * Opt in to column resizing (#12): a drag handle renders on every
+   * resizable column's trailing edge — pointer-draggable (TanStack's own
+   * `header.getResizeHandler()`) and keyboard-operable (ArrowLeft/ArrowRight
+   * on the focused handle, per the WAI-ARIA separator-as-slider practice).
+   * Default `false` so a table that doesn't opt in renders byte-identical
+   * markup to before this feature existed — no handle, no per-cell width
+   * styling.
+   */
+  enableColumnResizing?: boolean;
+  /**
+   * When `columnSizing` updates: `"onChange"` (default here — TanStack's own
+   * default is `"onEnd"`) live-updates while dragging; `"onEnd"` updates once
+   * on release. Only meaningful when `enableColumnResizing` is set.
+   */
+  columnResizeMode?: "onChange" | "onEnd";
+  /**
+   * Controlled column-widths state (#12), keyed by column id — the SAME
+   * controlled/uncontrolled shape as `columnPinning`/`rowSelection`.
+   * Uncontrolled sizing can be seeded once via `initialView.columnSizing`.
+   *
+   * A pinned column's sticky offset (`getStart("left")`/`getAfter("right")`)
+   * already sums `column.getSize()`, which folds in a `columnSizing`
+   * override automatically — so pinning and resizing compose with no extra
+   * wiring once this state reaches the table.
+   *
+   * Sizing is a LAYOUT concern, like `columnPinning`/`rowSelection` — it is
+   * client-only and never joins `DataTableServerArgs` / `onServerChange`.
+   */
+  columnSizing?: ColumnSizingState;
+  onColumnSizingChange?: OnChangeFn<ColumnSizingState>;
+
+  /**
+   * Controlled row-selection state (#11) — which rows are checked, keyed by
+   * row id (see `getRowId`). When provided the component is
+   * selection-controlled; otherwise it manages the slice internally and can
+   * be seeded once via `initialView.rowSelection`. Pair it with a selection
+   * column built by `createSelectionColumn` (or drive it yourself off the
+   * `table` instance handed to `toolbar`).
+   *
+   * Selection is a LAYOUT/UI concern, not a query concern — like
+   * `columnPinning`, it is client-only and never joins `DataTableServerArgs` /
+   * `onServerChange`.
+   */
+  rowSelection?: RowSelectionState;
+  onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+  /**
+   * Which rows can be selected: `true`/`false` for all rows, or a predicate
+   * evaluated per row. Passed straight through to `useReactTable`. Default
+   * (TanStack's own): `true`.
+   */
+  enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
+  /**
+   * Allow more than one row to be selected at once. Default (TanStack's own):
+   * `true`. Set `false` for single-select (radio-style) behaviour.
+   */
+  enableMultiRowSelection?: boolean;
+  /**
+   * Stable row id, independent of row INDEX. TanStack's default id is set
+   * ONCE per row object when the core row model is built, then reused by
+   * reference through sorting/filtering — so a client-side sort or filter
+   * does NOT disturb selection identity even without this prop. The real
+   * hazard is a `data` array replacement: when the app passes NEW object
+   * references (a re-fetch, an optimistic update), TanStack rebuilds the
+   * core row model from scratch and reassigns default (index-based) ids, so a
+   * row that kept its position but got a new object still keeps its
+   * selection — but one that MOVED position silently inherits whatever
+   * selection belonged to the id now sitting at its old index. This is
+   * unavoidable under `manualPagination`: each page IS a fresh `data` array,
+   * so the default index-based id restarts at `0` on every page and a
+   * selection made on one page can collide with a different record on the
+   * next. Supply `getRowId` whenever `data` can be replaced with new object
+   * references (including every server-paginated table) so identity survives
+   * the replacement instead of falling back to index.
+   */
+  getRowId?: (row: TData, index: number) => string;
+
   /**
    * One-shot rehydrate for uncontrolled slices only (ignored for any slice
    * whose corresponding controlled prop is set). Maps to `useReactTable`'s
@@ -210,6 +415,54 @@ export interface DataTableProps<TData, TValue> extends Omit<
    */
   zebra?: boolean;
 
+  /**
+   * Draw a quiet `--rule` hairline between columns (header and body). Off by
+   * default. Pinned cells keep their own seam and never take a divider.
+   */
+  columnDividers?: boolean;
+
+  // ── Row drag-reorder (#13) ───────────────────────────────────────────────
+  /**
+   * Opt-in row drag-reorder. Off by default — an existing table renders
+   * byte-identical markup with no extra DOM per row until this is set.
+   * Fully controlled like every other slice: the component never mutates
+   * `data` itself, it only reports the move via `onRowReorder`; the caller
+   * re-orders `data` in response.
+   *
+   * Keyboard-operable out of the box (`@dnd-kit`'s default keyboard sensor):
+   * Space/Enter picks a row up, Arrow Up/Down moves it, Space/Enter drops it,
+   * Escape cancels. Every position change is announced through a live region
+   * (WCAG 4.1.3).
+   *
+   * Mutually exclusive with `enableRowVirtualization` — a windowed table
+   * can't keep dnd-kit's sortable list and a virtualizer in sync, so reorder
+   * is silently disabled (a dev warning fires) when both are set. Combining
+   * it with active `sorting` also fires a dev warning (both still work, but
+   * a sort re-orders the very rows a drag just moved, which reads as broken).
+   */
+  enableRowReorder?: boolean;
+  /**
+   * Fires when a row is dropped in a new position. `from`/`to` are indices
+   * into the **`data` array you passed in** — never into the sorted, filtered
+   * or paginated view the table renders — so they are safe to use directly
+   * with `arrayMove`/`slice`+`splice`/immer against your own `data`, unchanged
+   * by an active sort or by client-side pagination (the dragged row's true
+   * index in the full array, not its index on the current page). Under
+   * `manualPagination`, `data` IS the current page, so `from`/`to` are
+   * page-relative — reorder that page's own array with them. `row` is the
+   * moved record (`data[from]`).
+   */
+  onRowReorder?: (from: number, to: number, row: TData) => void;
+  /**
+   * Where the drag activator lives. `"cell"` (default) renders a dedicated
+   * grip-handle column so the rest of the row keeps its ordinary click/
+   * keyboard behavior untouched. `"row"` makes the whole row itself the drag
+   * activator (no extra column) — reach for this only when the row has no
+   * other primary interaction (e.g. no `onRowClick`), since a whole-row
+   * activator and a row click target the same surface.
+   */
+  rowReorderHandle?: "cell" | "row";
+
   /**
    * Fires when a row is activated (#337). Setting it adds ONE activation
    * target per row: a visually-hidden `<button>` rendered inside the row's
@@ -291,6 +544,14 @@ function isActiveTextSelection(): boolean {
 const PINNED_SEAM_CLASS =
   "after:pointer-events-none after:absolute after:inset-y-0 after:w-px after:bg-border-strong after:content-['']";
 
+/**
+ * Opt-in `columnDividers` hairline. `--rule`, not `--border-strong`: the column
+ * is already told apart by alignment and whitespace, so this line is a
+ * redundant boundary (ADR 0010). A real border is fine here, unlike the pinned
+ * seam above — pinned cells never take it.
+ */
+const COLUMN_DIVIDER_CLASS = "border-e border-rule last:border-e-0";
+
 /**
  * Ids of leaf columns whose ORIGINAL `ColumnDef` declares no `size` (#333).
  *
@@ -328,6 +589,194 @@ function unsizedColumnIds<TData, TValue>(defs: readonly ColumnDef<TData, TValue>
   return out;
 }
 
+// ─── Column resizing (#12) ────────────────────────────────────────────────────
+
+/**
+ * Explicit width/min/max triad for one column at its CURRENT size.
+ *
+ * The table is auto-layout (see the note on `pinnedCellGeometry` below), so
+ * without an explicit width an unpinned column is pure browser auto-layout —
+ * `column.getSize()` can change (via a drag or a keyboard resize) with
+ * nothing rendering differently. A pinned cell already gets this triad from
+ * `pinnedCellGeometry`'s own `style`; this is the same triad for the
+ * UNPINNED case, so every call site can compute it once and use it in both
+ * the pinned-or-not branches (`geometry?.style ?? resizeWidthStyle(size)`).
+ * Every call site gates this behind `enableColumnResizing`, so a table that
+ * doesn't opt in renders byte-identical markup to before this feature
+ * existed.
+ */
+function resizeWidthStyle(size: number): React.CSSProperties {
+  return { width: size, minWidth: size, maxWidth: size };
+}
+
+// ─── Row-selection column (#11) ──────────────────────────────────────────────
+//
+// `flexRender` mounts a function `header`/`cell` as a real React component
+// (`React.createElement(Comp, props)`, not a bare function call — see
+// `@tanstack/react-table`'s `flexRender`), so these are ordinary components:
+// hooks (`useLocale`) are safe inside them.
+
+/**
+ * The row's own "primary identifier" — the first visible DATA column's value,
+ * skipping display columns that carry no `accessorKey`/`accessorFn` (e.g. a
+ * leading `createSelectionColumn()` checkbox, or a decorative avatar column).
+ * `column.accessorFn` is public TanStack API, populated for any
+ * `accessorKey`/`accessorFn` column and `undefined` for a pure display column
+ * (`core/column.ts`) — so this is a reliable "is this a data column" test.
+ * Shared by `rowActionName` (#337) and the selection column's per-row
+ * accessible name (#11 I4/I6), so a leading selection column can't silently
+ * degrade either one to its generic fallback.
+ */
+function firstDataCellValue<TData>(row: Row<TData>): string | undefined {
+  for (const cell of row.getVisibleCells()) {
+    if (!cell.column.accessorFn) continue;
+    const value = cell.getValue();
+    if (typeof value === "string" && value.trim() !== "") return value;
+    if (typeof value === "number") return String(value);
+  }
+  return undefined;
+}
+
+/**
+ * Select-all header cell. Radix `Checkbox` renders a genuinely distinct
+ * `indeterminate` glyph + `aria-checked="mixed"` for a partial page
+ * selection (see `checkbox.tsx`), so the visual and the accessible state
+ * agree without any extra wiring here.
+ */
+function SelectAllHeaderCell<TData>({ table }: { table: TanstackTable<TData> }) {
+  const { t } = useLocale();
+  const allSelected = table.getIsAllPageRowsSelected();
+  const someSelected = table.getIsSomePageRowsSelected();
+  return (
+    <Checkbox
+      data-slot="data-table-select-all"
+      checked={allSelected ? true : someSelected ? "indeterminate" : false}
+      onCheckedChange={(checked) => table.toggleAllPageRowsSelected(checked === true)}
+      aria-label={t("data.table.selectAllRows")}
+    />
+  );
+}
+
+/**
+ * Per-row checkbox cell — disabled when `enableRowSelection` excludes the
+ * row. Names each checkbox from the row's own data (#11 I4) instead of the
+ * identical generic label every row previously shared, using the same
+ * "first data cell" lookup `rowActionName` (#337) already uses.
+ */
+function SelectRowCell<TData>({ row }: { row: Row<TData> }) {
+  const { t } = useLocale();
+  const name = firstDataCellValue(row);
+  return (
+    <Checkbox
+      data-slot="data-table-select-cell"
+      checked={row.getIsSelected()}
+      disabled={!row.getCanSelect()}
+      onCheckedChange={(checked) => row.toggleSelected(checked === true)}
+      aria-label={name ? t("data.table.selectRowNamed", { name }) : t("data.table.selectRow")}
+    />
+  );
+}
+
+/**
+ * Ready-made checkbox selection column (#11): header select-all (with a real
+ * `indeterminate` state for a partial page selection) + a per-row checkbox,
+ * both built on `@elabs-ai/components-ui`'s `Checkbox` — never hand-roll one.
+ *
+ * Add it to `columns` and pair it with `rowSelection` / `onRowSelectionChange`
+ * (or leave both uncontrolled and read `table.getSelectedRowModel()` from a
+ * `toolbar` render-prop to build a bulk-action bar).
+ *
+ * Declares an explicit `size` (40px) so it plays nicely if a caller pins it —
+ * every pinned column must declare one (#333) — without the dev warning.
+ */
+export function createSelectionColumn<TData>(): ColumnDef<TData> {
+  return {
+    id: "select",
+    size: 40,
+    enableSorting: false,
+    enableHiding: false,
+    header: ({ table }) =>
+      // #11 C1: `toggleAllPageRowsSelected` wipes-then-sets on every row when
+      // `enableMultiRowSelection` is off (TanStack's `mutateRowIsSelected`), so
+      // a select-all header under single-select leaves only the LAST row
+      // selected and pins the header at indeterminate forever. Suppress it.
+      table.options.enableMultiRowSelection === false ? null : (
+        <SelectAllHeaderCell table={table} />
+      ),
+    cell: ({ row }) => <SelectRowCell row={row} />,
+  };
+}
+
+// ─── Row drag-reorder (#13) ─────────────────────────────────────────────────
+
+/** Render-prop payload `SortableDataRow` hands its child — the live dnd-kit
+ * registration for one row. */
+interface SortableRowRenderArgs {
+  setNodeRef: (node: HTMLElement | null) => void;
+  setActivatorNodeRef: (node: HTMLElement | null) => void;
+  attributes: DraggableAttributes;
+  listeners: DraggableSyntheticListeners;
+  isDragging: boolean;
+  style: React.CSSProperties;
+}
+
+/**
+ * Per-row `@dnd-kit` registration, defined ONCE at module level.
+ *
+ * This must be a real component, not a hook call inlined into `rows.map()`
+ * (that would call `useSortable` a variable number of times across renders —
+ * the classic "hook in a loop" Rules-of-Hooks violation the moment the row
+ * count changes) and not a component DEFINED inside `DataTableInner`'s body
+ * either (a function created fresh every render gets a new `type` identity,
+ * so React would tear down and remount the whole row subtree, including
+ * dnd-kit's own internal drag state, on every re-render). A stable top-level
+ * component keyed by `id` gives every row its own persistent `useSortable`
+ * state via ordinary type+key reconciliation.
+ *
+ * `transition: null` is deliberate — dnd-kit's own transition is a raw
+ * inline `ms` duration, which would bypass the gated `duration-*`/`ease-*`
+ * utilities (quality-gates.md "Motion-tokened"). The moving row instead gets
+ * `transition-transform duration-base ease-standard motion-reduce:transition-none`
+ * as a class at the call site; only the live `transform` stays inline.
+ */
+function SortableDataRow({
+  id,
+  disabled,
+  attributesOverride,
+  children,
+}: {
+  id: string;
+  disabled?: boolean;
+  /**
+   * `rowReorderHandle: "row"` applies `attributes`/`listeners` straight to
+   * the `<tr>` (no separate activator element), so dnd-kit's DEFAULT
+   * `role="button"` would replace the table's own `role="row"` on that
+   * element — destroying its row semantics. Override the role in that mode
+   * only; `"cell"` mode leaves `role` unset because the grip `<button>` —
+   * not the `<tr>` — receives `attributes`/`listeners`. `roleDescription` is
+   * overridden in BOTH modes (#98) — it carries dnd-kit's localized
+   * `aria-roledescription`, which the activator needs regardless of which
+   * element is the activator.
+   */
+  attributesOverride?: { role?: string; roleDescription?: string; tabIndex?: number };
+  children: (args: SortableRowRenderArgs) => ReactNode;
+}) {
+  const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, isDragging } =
+    useSortable({ id, disabled, transition: null, attributes: attributesOverride });
+  return (
+    <>
+      {children({
+        setNodeRef,
+        setActivatorNodeRef,
+        attributes,
+        listeners,
+        isDragging,
+        style: { transform: CSS.Transform.toString(transform) },
+      })}
+    </>
+  );
+}
+
 // ─── Component (inner, generic) ───────────────────────────────────────────────
 
 /**
@@ -368,6 +817,15 @@ function DataTableInner<TData, TValue>(
     onPaginationChange: onPaginationChangeProp,
     columnPinning: columnPinningProp,
     onColumnPinningChange: onColumnPinningChangeProp,
+    enableColumnResizing = false,
+    columnResizeMode = "onChange",
+    columnSizing: columnSizingProp,
+    onColumnSizingChange: onColumnSizingChangeProp,
+    rowSelection: rowSelectionProp,
+    onRowSelectionChange: onRowSelectionChangeProp,
+    enableRowSelection,
+    enableMultiRowSelection,
+    getRowId,
 
     // Saved views rehydration
     initialView,
@@ -391,6 +849,13 @@ function DataTableInner<TData, TValue>(
     maxBodyHeight = "32rem",
 
     zebra = true,
+    columnDividers = false,
+
+    // Row drag-reorder (#13)
+    enableRowReorder = false,
+    onRowReorder,
+    rowReorderHandle = "cell",
+
     onRowClick,
     rowActionLabel,
     rowClassName,
@@ -403,7 +868,13 @@ function DataTableInner<TData, TValue>(
 ) {
   // Component microcopy goes through the locale seam (ADR 0017) — a screen-reader
   // user in a non-English locale has no workaround for a hardcoded accessible name.
-  const { t } = useLocale();
+  // `dir` also drives column-resize direction below (#12 review, P1): the resize
+  // handle already sits at the column's logical `end` edge (`end-0`, which
+  // Tailwind's logical properties flip to the physical LEFT under RTL), so both
+  // TanStack's own pointer-drag math and the hand-rolled keyboard path must be
+  // told the active direction too, or dragging/pressing an arrow moves the width
+  // opposite the visible boundary.
+  const { t, dir, formatNumber } = useLocale();
 
   // ── Controlled/uncontrolled detection ────────────────────────────────────
   const isSortingControlled = sortingProp !== undefined;
@@ -412,6 +883,8 @@ function DataTableInner<TData, TValue>(
   const isPaginationControlled = paginationProp !== undefined;
   const isFilterControlled = globalFilterProp !== undefined;
   const isColumnPinningControlled = columnPinningProp !== undefined;
+  const isColumnSizingControlled = columnSizingProp !== undefined;
+  const isRowSelectionControlled = rowSelectionProp !== undefined;
 
   // ── Internal state (only drives a slice when uncontrolled) ───────────────
   const [internalSorting, setInternalSorting] = useState<SortingState>(
@@ -436,6 +909,12 @@ function DataTableInner<TData, TValue>(
   const [internalColumnPinning, setInternalColumnPinning] = useState<ColumnPinningState>(
     () => initialView?.columnPinning ?? { left: [], right: [] },
   );
+  const [internalColumnSizing, setInternalColumnSizing] = useState<ColumnSizingState>(
+    () => initialView?.columnSizing ?? {},
+  );
+  const [internalRowSelection, setInternalRowSelection] = useState<RowSelectionState>(
+    () => initialView?.rowSelection ?? {},
+  );
 
   // ── Resolved state (controlled wins over internal) ───────────────────────
   const sorting = isSortingControlled ? sortingProp : internalSorting;
@@ -446,6 +925,8 @@ function DataTableInner<TData, TValue>(
   const pagination = isPaginationControlled ? paginationProp : internalPagination;
   const globalFilter = isFilterControlled ? globalFilterProp : internalGlobalFilter;
   const columnPinning = isColumnPinningControlled ? columnPinningProp : internalColumnPinning;
+  const columnSizing = isColumnSizingControlled ? columnSizingProp : internalColumnSizing;
+  const rowSelection = isRowSelectionControlled ? rowSelectionProp : internalRowSelection;
 
   // ── Refs for post-change server callback ─────────────────────────────────
   // We need the current values of ALL slices when any one fires; use refs to
@@ -462,6 +943,10 @@ function DataTableInner<TData, TValue>(
   columnVisibilityRef.current = columnVisibility;
   const columnPinningRef = useRef(columnPinning);
   columnPinningRef.current = columnPinning;
+  const columnSizingRef = useRef(columnSizing);
+  columnSizingRef.current = columnSizing;
+  const rowSelectionRef = useRef(rowSelection);
+  rowSelectionRef.current = rowSelection;
 
   // ── Dev-only guard: manualPagination needs a total to compute page count ──
   // Without `rowCount` (or `pageCount`), TanStack's `getPageCount()` falls back
@@ -486,6 +971,120 @@ function DataTableInner<TData, TValue>(
     }
   }, [manualPagination, rowCount, pageCount]);
 
+  // ── Dev-only guard: manualPagination + rowSelection with no getRowId ──────
+  // Under `manualPagination` each page IS a fresh `data` array, so TanStack's
+  // default index-based row id restarts at `0` on every page — a selection
+  // made on page 1's row 0 can silently apply to page 2's row 0 too (#11 I3).
+  // Warn once per mount so this footgun is diagnosable instead of silent (same
+  // idiom as the #227 warning above). Heuristic, not full usage tracing: fires
+  // whenever selection LOOKS wired up (controlled, or a change handler was
+  // passed) — it cannot see an uncontrolled table that never renders a
+  // selection column at all.
+  const warnedManualSelectionRef = useRef(false);
+  useEffect(() => {
+    if (
+      process.env.NODE_ENV !== "production" &&
+      manualPagination &&
+      getRowId === undefined &&
+      (isRowSelectionControlled || onRowSelectionChangeProp !== undefined) &&
+      !warnedManualSelectionRef.current
+    ) {
+      warnedManualSelectionRef.current = true;
+      console.warn(
+        "[DataTable] `rowSelection` is wired up under `manualPagination` with no `getRowId` " +
+          "— each page is a fresh `data` array, so the default index-based id restarts at " +
+          '"0" per page and a selection made on one page can silently apply to a different ' +
+          "record on the next. Pass `getRowId` so selection is keyed to a stable identity " +
+          "instead of position.",
+      );
+    }
+  }, [manualPagination, getRowId, isRowSelectionControlled, onRowSelectionChangeProp]);
+
+  // ── Dev-only guard: enableRowReorder + active sorting (#13) ───────────────
+  // Both keep working — this doesn't disable anything — but a sort re-orders
+  // the very rows a drag just moved, which reads as broken rather than merely
+  // confusing. Warn once per mount, same idiom as the two guards above.
+  const warnedReorderSortingRef = useRef(false);
+  useEffect(() => {
+    if (
+      process.env.NODE_ENV !== "production" &&
+      enableRowReorder &&
+      sorting.length > 0 &&
+      !warnedReorderSortingRef.current
+    ) {
+      warnedReorderSortingRef.current = true;
+      console.warn(
+        "[DataTable] `enableRowReorder` is set while a column is sorted — the sort will " +
+          "keep re-ordering rows out from under a manual drag. Clear `sorting` (or avoid " +
+          "enabling both at once) so a drag's new order stays stable.",
+      );
+    }
+  }, [enableRowReorder, sorting.length]);
+
+  // ── Dev-only guard: enableRowReorder + enableRowVirtualization (#13) ──────
+  // A windowed table can't keep dnd-kit's sortable list in sync with a
+  // virtualizer that only mounts a subset of rows, so the two are mutually
+  // exclusive — virtualization wins (same precedent as enablePagination vs.
+  // enableRowVirtualization) and reorder is silently disabled below
+  // (`rowReorderActive`). This warning is the diagnostic for why.
+  const warnedReorderVirtualizedRef = useRef(false);
+  useEffect(() => {
+    if (
+      process.env.NODE_ENV !== "production" &&
+      enableRowReorder &&
+      enableRowVirtualization &&
+      !warnedReorderVirtualizedRef.current
+    ) {
+      warnedReorderVirtualizedRef.current = true;
+      console.warn(
+        "[DataTable] `enableRowReorder` has no effect while `enableRowVirtualization` is " +
+          "set — the two are mutually exclusive. Virtualization wins; row reorder is disabled.",
+      );
+    }
+  }, [enableRowReorder, enableRowVirtualization]);
+
+  // Only wired up in the non-virtualized body — see the warning above.
+  const rowReorderActive = enableRowReorder && !enableRowVirtualization;
+  const hasGripColumn = rowReorderActive && rowReorderHandle === "cell";
+
+  const reorderSensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+  // Backing store for `getReorderRowId` (defined below, once `rows` is in
+  // scope) — see its own doc comment for why a WeakMap keyed by row object
+  // reference is the round-1 fix for findings 1 & 3.
+  const reorderIdentityMapRef = useRef<WeakMap<object, string>>(new WeakMap());
+  const reorderIdentityCounterRef = useRef(0);
+  // Positions in `data` whose record REPEATS an object reference that already
+  // appeared earlier in the array — 2nd and later occurrences only (round-2
+  // finding 6). `getReorderRowId` below keys its identity on the record's own
+  // object reference, which is exactly what makes an id survive the array
+  // REPLACEMENT every reorder idiom performs; the cost is that a record the
+  // caller listed twice IS one reference, so both rows would be handed one id
+  // — one React key, one dnd-kit registration, and a drop that can only ever
+  // name the first occurrence. The positions listed here get their own data
+  // index folded into the id so the occurrences stay separately addressable.
+  // Only the repeats are suffixed, so a table with no repeated record keeps
+  // byte-identical ids (and with them the round-1 focus restore).
+  const reorderRepeatedPositions = useMemo(() => {
+    const repeats = new Set<number>();
+    if (!rowReorderActive) return repeats;
+    const seen = new Set<unknown>();
+    data.forEach((record, index) => {
+      if (record === null || typeof record !== "object") return;
+      if (seen.has(record)) repeats.add(index);
+      else seen.add(record);
+    });
+    return repeats;
+  }, [data, rowReorderActive]);
+  // The component's OWN `aria-live="polite"` announcer state — round-1
+  // finding 4 (dnd-kit's built-in region is hardcoded `assertive` with no
+  // override). `reorderLastAnnouncedPositionRef` de-dupes a same-position
+  // re-fire (the pickup self-collision, a no-op arrow press at a boundary).
+  const [reorderLiveMessage, setReorderLiveMessage] = useState("");
+  const reorderLastAnnouncedPositionRef = useRef<number | null>(null);
+
   /** Fire onServerChange with the LATEST slice values (post-update). */
   function fireServerChange(overrides: Partial<DataTableServerArgs> = {}) {
     if (!onServerChange) return;
@@ -526,6 +1125,16 @@ function DataTableInner<TData, TValue>(
   ): ColumnPinningState {
     return typeof updater === "function" ? updater(columnPinningRef.current) : updater;
   }
+  function resolveColumnSizing(
+    updater: Parameters<OnChangeFn<ColumnSizingState>>[0],
+  ): ColumnSizingState {
+    return typeof updater === "function" ? updater(columnSizingRef.current) : updater;
+  }
+  function resolveRowSelection(
+    updater: Parameters<OnChangeFn<RowSelectionState>>[0],
+  ): RowSelectionState {
+    return typeof updater === "function" ? updater(rowSelectionRef.current) : updater;
+  }
 
   // ── Row models — omit client model for manual slices ─────────────────────
   const sortedRowModel = manualSorting ? {} : { getSortedRowModel: getSortedRowModel() };
@@ -542,7 +1151,16 @@ function DataTableInner<TData, TValue>(
   const table = useReactTable({
     data,
     columns,
-    state: { sorting, columnVisibility, columnFilters, globalFilter, pagination, columnPinning },
+    state: {
+      sorting,
+      columnVisibility,
+      columnFilters,
+      globalFilter,
+      pagination,
+      columnPinning,
+      columnSizing,
+      rowSelection,
+    },
 
     // Sorting
     onSortingChange: (updater) => {
@@ -605,6 +1223,40 @@ function DataTableInner<TData, TValue>(
       onColumnPinningChangeProp?.(updater);
     },
 
+    // Column resizing (#12) — a LAYOUT slice, like column pinning: a column's
+    // width changes nothing the server would need to re-query, so this never
+    // fires onServerChange either. Routed through by BOTH the pointer path
+    // (TanStack's own `header.getResizeHandler()`, wired below) and the
+    // keyboard path (`handleResizeKeyDown`, via `table.setColumnSizing`) so
+    // the two input modes can never diverge in controlled/uncontrolled
+    // behaviour.
+    columnResizeMode,
+    // RTL fix (#12 review, P1): TanStack's pointer-drag math hardcodes LTR
+    // unless told otherwise — `deltaDirection = columnResizeDirection ===
+    // 'rtl' ? -1 : 1` internally — so under `dir="rtl"` (the resize handle's
+    // own edge already flips via `end-0`, see the `useLocale()` call above)
+    // dragging would otherwise move the column's width opposite the visible
+    // boundary. `handleResizeKeyDown` below mirrors this for the keyboard path.
+    columnResizeDirection: dir,
+    enableColumnResizing,
+    onColumnSizingChange: (updater) => {
+      const next = resolveColumnSizing(updater);
+      if (!isColumnSizingControlled) setInternalColumnSizing(next);
+      onColumnSizingChangeProp?.(updater);
+    },
+
+    // Row selection (#11) — also a LAYOUT/UI slice, so it never fires
+    // onServerChange: which rows are checked changes nothing the server
+    // would need to re-query.
+    onRowSelectionChange: (updater) => {
+      const next = resolveRowSelection(updater);
+      if (!isRowSelectionControlled) setInternalRowSelection(next);
+      onRowSelectionChangeProp?.(updater);
+    },
+    enableRowSelection,
+    enableMultiRowSelection,
+    getRowId,
+
     getCoreRowModel: getCoreRowModel(),
     ...sortedRowModel,
     ...filteredRowModel,
@@ -635,6 +1287,185 @@ function DataTableInner<TData, TValue>(
   const headerRowCount = table.getHeaderGroups().length;
   const ariaRowCount = (rowCount ?? rows.length) + headerRowCount;
 
+  // ── Row drag-reorder (#13) ────────────────────────────────────────────────
+  // `rowActionName` (defined below, but hoisted as a function declaration) is
+  // the SAME row-naming lookup `onRowClick`'s hidden button uses (#337) —
+  // reusing it means a reorder announcement names a row exactly the way its
+  // click target already does, rather than inventing a second convention.
+  function reorderRowName(id: string): string {
+    const row = rows.find((r) => getReorderRowId(r) === id);
+    return row ? rowActionName(row) : id;
+  }
+  function reorderPosition(id: string): number {
+    return rows.findIndex((r) => getReorderRowId(r) === id) + 1;
+  }
+
+  // ── Stable identity for drag reconciliation (round-1 fix, findings 1 & 3) ──
+  // `getRowId`'s own doc comment above states TanStack's fallback: default row
+  // ids are assigned ONCE per row object when the core row model is built from
+  // the current `data` ARRAY REFERENCE, then carried by reference through
+  // sort/filter — but a `data` array REPLACEMENT (exactly what every
+  // `onRowReorder` consumer does: `arrayMove`/`slice`+`splice`/immer all
+  // return a new array) rebuilds the core row model and reassigns ids by
+  // POSITION IN THE NEW ARRAY. So the id that used to denote "the row now at
+  // index 1" keeps denoting index 1 even though a different record moved
+  // there — which is what let a keyboard drop leave focus on the wrong row
+  // (a different record now sits at the id the focus restore targets).
+  // Requiring every consumer to hand-roll `getRowId` would leave the DEFAULT
+  // configuration broken, so when the caller hasn't supplied one, mint an id
+  // keyed by the row's own OBJECT REFERENCE (`row.original`) in a `WeakMap` —
+  // unlike TanStack's default, this id follows the object wherever it lands
+  // in a new array, because every reorder idiom MOVES the element reference,
+  // it never clones it. When `getRowId` IS supplied it is already exactly
+  // this kind of identity, so it's reused as-is instead of minting a second,
+  // divergent id namespace.
+  function getReorderRowId(row: Row<TData>): string {
+    if (getRowId) return row.id;
+    const original: unknown = row.original;
+    if (original !== null && typeof original === "object") {
+      const map = reorderIdentityMapRef.current;
+      let id = map.get(original);
+      if (id === undefined) {
+        id = `__reorder-${reorderIdentityCounterRef.current++}`;
+        map.set(original, id);
+      }
+      // A repeated record shares ONE object reference, so the id minted above
+      // is by construction identical for both of its rows — round-2 finding
+      // 6. Fold the data position into the repeats so each occupant is its
+      // own draggable. Two identical records are interchangeable to the user,
+      // so the weaker cross-replacement stability of a suffixed id costs
+      // nothing the first-occurrence rule doesn't already give back.
+      return reorderRepeatedPositions.has(row.index) ? `${id}__${row.index}` : id;
+    }
+    // Primitive `TData` (rare) has no object reference to key off — same
+    // documented limitation `getRowId`'s own comment already carries for
+    // TanStack's own default identity.
+    return row.id;
+  }
+
+  // dnd-kit's own `Accessibility` component's `LiveRegion` hardcodes
+  // `aria-live="assertive"` with no way to override it from `DndContext`
+  // (`@dnd-kit/accessibility` 3.1.1 accepts an `ariaLiveType` prop on
+  // `LiveRegion` itself, but nothing forwards one through `accessibility`) —
+  // round-1 finding 4. `.claude/rules/accessibility.md` reserves assertive
+  // for terminal errors (`role="alert"`); a sortable list's own position
+  // updates are `polite` status. So dnd-kit's built-in announcer is silenced
+  // below (every callback returns `undefined`, which `useAnnouncement`
+  // treats as "no update" — the region stays permanently empty and never
+  // fires) and DataTable renders its OWN `aria-live="polite"` region
+  // (`reorderLiveMessage`, wired to the `data-table-reorder-live-region`
+  // node near the bottom of this function) from the `onDragStart`/
+  // `onDragOver`/`onDragEnd`/`onDragCancel` handlers below.
+  const silentDragAnnouncements: Announcements = {
+    onDragStart: () => undefined,
+    onDragOver: () => undefined,
+    onDragEnd: () => undefined,
+    onDragCancel: () => undefined,
+  };
+
+  /**
+   * Pickup always announces — it's the start of a new, meaningful gesture.
+   * Seeding `reorderLastAnnouncedPositionRef` with the row's OWN starting
+   * position (not `null`) is what suppresses dnd-kit's immediate self-
+   * collision `onDragOver` (over === active, at the same position) that
+   * otherwise fires in the same tick and would stomp this message before it
+   * is ever observable (WCAG 4.1.3 needs it heard, not just rendered).
+   */
+  function handleRowDragStart(event: DragStartEvent) {
+    const activeRowId = String(event.active.id);
+    reorderLastAnnouncedPositionRef.current = reorderPosition(activeRowId);
+    setReorderLiveMessage(t("data.table.reorderPickedUp", { name: reorderRowName(activeRowId) }));
+  }
+
+  /**
+   * Announces a real position change only — round-1 finding 4 measured 4
+   * announcements for a 2-step move, one of them a same-position self-
+   * collision that buried the "picked up" message. De-duping on the actual
+   * computed position (not on the raw event) means a screen reader hears one
+   * `polite` (queued, non-interrupting) announcement per genuine move, not
+   * one per keystroke.
+   */
+  function handleRowDragOver(event: DragOverEvent) {
+    const { active, over } = event;
+    if (!over) return;
+    const position = reorderPosition(String(over.id));
+    if (position === reorderLastAnnouncedPositionRef.current) return;
+    reorderLastAnnouncedPositionRef.current = position;
+    setReorderLiveMessage(
+      t("data.table.reorderMoved", {
+        name: reorderRowName(String(active.id)),
+        position,
+        total: rows.length,
+      }),
+    );
+  }
+
+  function handleRowDragCancel(event: DragCancelEvent) {
+    const activeRowId = String(event.active.id);
+    setReorderLiveMessage(
+      t("data.table.reorderCancelled", {
+        name: reorderRowName(activeRowId),
+        position: reorderPosition(activeRowId),
+        total: rows.length,
+      }),
+    );
+    reorderLastAnnouncedPositionRef.current = null;
+  }
+
+  /**
+   * The component never mutates `data` itself (D5 — presentation layer, not
+   * an SDK): it only reports the move, the same "controlled slice" contract
+   * every other DataTable feature follows. A no-op drop (dropped on itself,
+   * or outside any droppable) fires nothing on the data callback, but still
+   * announces (matching the "dropped back where it started" reality).
+   *
+   * `from`/`to` resolve against the ORIGINAL `data` array the caller passed
+   * in, never against the sorted/paginated VIEW (`rows`) — round-1 finding 1.
+   * Reporting `rows.findIndex(...)` positions meant a caller doing
+   * `arrayMove(data, from, to)` (the idiom both shipped stories use) silently
+   * moved the WRONG records whenever an active sort or a client-side page
+   * had changed which record sat at which view position — measured: a
+   * paginated drag on page 2 reported `(0, 1, …)`, corrupting `data[0]`/
+   * `data[1]` on page 1. Resolving against `data` itself makes the contract
+   * "indices into the `data` you gave me" — correct under any sort/filter,
+   * correct under client-side pagination (the dragged record's true index in
+   * the full array), and correct under `manualPagination` too (there `data`
+   * IS the current page, so `from`/`to` are page-relative, which is exactly
+   * what a caller reordering that page's own array needs).
+   */
+  function handleRowDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    const activeRowId = String(active.id);
+    setReorderLiveMessage(
+      t("data.table.reorderDropped", {
+        name: reorderRowName(activeRowId),
+        position: reorderPosition(String(over ? over.id : active.id)),
+        total: rows.length,
+      }),
+    );
+    reorderLastAnnouncedPositionRef.current = null;
+
+    if (!over || active.id === over.id) return;
+    const movedRow = rows.find((r) => getReorderRowId(r) === activeRowId);
+    const targetRow = rows.find((r) => getReorderRowId(r) === String(over.id));
+    if (!movedRow || !targetRow) return;
+    // Round-2 finding 6: this used to build a `Map` keyed by `row.original`
+    // and read `from`/`to` out of it. A `data` array that repeats a record —
+    // the same object reference, or the same primitive, at two positions —
+    // can only occupy ONE slot in such a map, so the later occurrence was
+    // reported as the earlier one and the documented `arrayMove(data, from,
+    // to)` idiom moved a row the user never dragged, silently. `Row.index` is
+    // the position TanStack already assigned this row when it built the core
+    // row model FROM `data`, carried by reference through sort/filter/
+    // pagination (the same property the round-1 fix above relies on) — so it
+    // keeps the "indices into the `data` you gave me" contract without the
+    // value-equality lookup that collapsed the repeats.
+    const from = movedRow.index;
+    const to = targetRow.index;
+    if (from < 0 || from >= data.length || to < 0 || to >= data.length) return;
+    onRowReorder?.(from, to, movedRow.original);
+  }
+
   // ── Pinning (#333) ────────────────────────────────────────────────────────
   // Are there any pinned columns at all? Everything pinning-related is gated on
   // this so a table with no pinning renders byte-identical markup to before.
@@ -736,7 +1567,7 @@ function DataTableInner<TData, TValue>(
       // in Chromium on `Data/DataTable → PinnedColumns`: with `border-e` the
       // seam pixel read `143,143,143` (light `--border-strong`) at
       // scrollLeft 0 and `245,245,245` (the plain cell fill — i.e. GONE) once
-      // scrolled, in all three themes and on both edges. So the one cue vanished
+      // scrolled, in every theme and on both edges. So the one cue vanished
       // exactly when the freeze was doing something. The `::after` lives in the
       // sticky cell's own stacking context, so it moves with it.
       edgeClass:
@@ -750,6 +1581,76 @@ function DataTableInner<TData, TValue>(
     };
   }
 
+  // ── Column resizing keyboard path (#12) ───────────────────────────────────
+  // TanStack's own `header.getResizeHandler()` is pointer/touch-only — no
+  // keyboard path exists in the library — so the WAI-ARIA separator-as-slider
+  // practice (drag handle operable via ArrowLeft/ArrowRight when focused)
+  // needs one small hand-rolled step. It goes through `table.setColumnSizing`
+  // (`table.setColumnSizing = updater => table.options.onColumnSizingChange
+  // ?.(updater)`, TanStack's own `ColumnSizing` feature), which is the SAME
+  // `onColumnSizingChange` handler passed to `useReactTable` above — so
+  // keyboard and pointer resizing share one controlled/uncontrolled code path
+  // and can never diverge in behaviour.
+  const RESIZE_STEP = 10;
+  // ARIA fallback ceiling for the resize separator's `aria-valuemax` when the
+  // column declares no explicit `maxSize` — a `ColumnDef` with no `maxSize`
+  // resolves through TanStack's own default to `Number.MAX_SAFE_INTEGER`,
+  // which is not a value any AT should announce, so the header below omits
+  // `aria-valuemax` entirely in that case. Per the WAI-ARIA separator-as-
+  // widget pattern, an ELEMENT WITH NO `aria-valuemax` is read with an
+  // IMPLICIT default of 100 — so a column at its ordinary starting width
+  // (150) already announces as "150 of 100", out of its own stated range
+  // (#12 review, P2). `Math.max` with the live size at the call site below
+  // keeps this always containing the current value: a column dragged past
+  // this floor simply raises its own announced ceiling instead of going out
+  // of range again.
+  const RESIZE_UNBOUNDED_ARIA_MAX = 2000;
+  function handleResizeKeyDown(event: React.KeyboardEvent, column: Column<TData, unknown>) {
+    let delta = 0;
+    if (event.key === "ArrowRight") delta = RESIZE_STEP;
+    else if (event.key === "ArrowLeft") delta = -RESIZE_STEP;
+    else return;
+    event.preventDefault();
+    // Mirror TanStack's own `columnResizeDirection` reversal (passed to
+    // `useReactTable` above) for the keyboard path: the handle sits at the
+    // column's logical `end` edge, which `end-0` renders on the physical
+    // LEFT under `dir="rtl"` — so ArrowRight (physical right, toward the
+    // column's own body) must SHRINK the column and ArrowLeft must GROW it,
+    // the mirror image of LTR. Without this the keyboard path would diverge
+    // from the now-direction-aware pointer path.
+    if (dir === "rtl") delta = -delta;
+    const minSize = column.columnDef.minSize ?? 20;
+    const maxSize = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
+    const nextSize = Math.min(maxSize, Math.max(minSize, column.getSize() + delta));
+    table.setColumnSizing((old) => ({ ...old, [column.id]: nextSize }));
+  }
+
+  // #51 — double-click resets a resize handle's column back to its declared
+  // `ColumnDef.size`, falling back to TanStack's own default (150, the same
+  // fallback idiom as `minSize ?? 20`/`maxSize ?? MAX_SAFE_INTEGER` above) when
+  // the author left it unset — by REMOVING any explicit `columnSizing` entry
+  // for the column, not by writing the size back in as a literal (PR #81
+  // review, "Remove the sizing override when resetting a column"). `columnSizing`
+  // only ever carries EXPLICIT per-column overrides; a column absent from it
+  // always tracks its live `ColumnDef.size` (or the 150 default). Writing the
+  // CURRENT declared size back in as a value looks identical today but turns
+  // the default into a permanent override: if the `columns` prop later
+  // changes this column's authored `size` (e.g. switching table
+  // configurations), a column that was never resized follows the new
+  // definition for free, while a double-click-reset column would stay pinned
+  // to the OLD number forever. Deleting the entry keeps it dynamic, exactly
+  // like a column that was never touched. Still goes through the SAME
+  // `table.setColumnSizing` dispatch path as `handleResizeKeyDown` — never
+  // `column.resetSize()` — so a controlled `columnSizing` consumer observes
+  // the reset via `onColumnSizingChange` exactly like every other resize.
+  function handleResizeDoubleClick(column: Column<TData, unknown>) {
+    table.setColumnSizing((old) => {
+      if (!(column.id in old)) return old;
+      const { [column.id]: _removed, ...rest } = old;
+      return rest;
+    });
+  }
+
   // ── Scroll container ref for virtualizer ─────────────────────────────────
   const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -839,6 +1740,11 @@ function DataTableInner<TData, TValue>(
       >
         {table.getHeaderGroups().map((headerGroup, groupIndex) => (
           <tr key={headerGroup.id} aria-rowindex={withRowIndex ? groupIndex + 1 : undefined}>
+            {hasGripColumn && (
+              <th key="__reorder" scope="col" className="h-10 w-10 px-3 align-middle">
+                <span className="sr-only">{t("data.table.reorderColumnHeader")}</span>
+              </th>
+            )}
             {headerGroup.headers.map((header) => {
               const geometry = pinnedCellGeometry(header.column);
               const canSort = header.column.getCanSort();
@@ -853,6 +1759,15 @@ function DataTableInner<TData, TValue>(
                 sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "not sorted";
               const SortIcon =
                 sorted === "asc" ? ArrowUp : sorted === "desc" ? ArrowDown : ArrowUpDown;
+              // #12: every column gets the same explicit width triad a pinned
+              // column already has, gated behind `enableColumnResizing` so a
+              // table that doesn't opt in stays byte-identical to before.
+              const resizeStyle = enableColumnResizing
+                ? resizeWidthStyle(header.getSize())
+                : undefined;
+              const canResize =
+                enableColumnResizing && !header.isPlaceholder && header.column.getCanResize();
+              const resizeMax = header.column.columnDef.maxSize;
               return (
                 <th
                   key={header.id}
@@ -867,9 +1782,24 @@ function DataTableInner<TData, TValue>(
                       : undefined
                   }
                   data-pinned={geometry?.pinned ?? undefined}
-                  style={geometry?.style}
+                  style={geometry?.style ?? resizeStyle}
                   className={cn(
-                    "h-10 px-3 text-start align-middle font-medium text-muted-foreground",
+                    // Same `px-3` the body `<td>` uses (below) — deliberately
+                    // NOT split into `ps-3`/`pe-3` for a resize-handle
+                    // override (round-1 briefly did this, see the round-2
+                    // note on `numericColumnClasses`): the header's padding
+                    // must stay byte-identical to the body's so an
+                    // end-aligned numeric column's header lines up with its
+                    // own values.
+                    "h-10 px-3 text-start align-middle font-table-header text-muted-foreground",
+                    // #69: a numeric column's `meta` overrides the default
+                    // `text-start` — placed right after the base string so
+                    // tailwind-merge lets it win over that default.
+                    numericColumnClasses(header.column.columnDef.meta),
+                    // `sticky`/pinned already establishes a positioning context
+                    // for the resize handle's `absolute`; an unpinned resizable
+                    // header needs its own.
+                    !geometry && canResize && "relative",
                     // A pinned HEADER cell is the corner where both freezes meet,
                     // so it stacks above the sticky header row (z-20) which is
                     // above the pinned body cells (z-10). It needs an OPAQUE
@@ -896,6 +1826,7 @@ function DataTableInner<TData, TValue>(
                     // it must not read as a "boundary + fill in one class string"
                     // redundancy (separation:check).
                     geometry?.edgeClass,
+                    columnDividers && !geometry && COLUMN_DIVIDER_CLASS,
                   )}
                 >
                   {header.isPlaceholder ? null : canSort ? (
@@ -903,7 +1834,31 @@ function DataTableInner<TData, TValue>(
                       type="button"
                       onClick={header.column.getToggleSortingHandler()}
                       aria-label={`Sort by ${headerLabel}, ${sortStateLabel}`}
-                      className="inline-flex items-center gap-1 rounded-sm transition-colors duration-fast ease-standard hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                      // `relative z-10` (round-2 fix, #82 follow-up — replaces
+                      // round-1's padding-based clearance, see the note on
+                      // `numericColumnClasses`): on a resizable column the
+                      // resize handle below is `absolute`, and CSS painting
+                      // order always puts a positioned descendant above
+                      // non-positioned in-flow content in the SAME stacking
+                      // context, regardless of DOM order — so without this,
+                      // the handle's 24px hit box would win every hit-test
+                      // where it overlaps this button's own trailing edge
+                      // (measured: a 12px overlap on an end-aligned
+                      // sortable+resizable column) no matter which element
+                      // renders first in markup. Giving the button its own
+                      // explicit positive z-index (not just `relative`, which
+                      // alone would still lose — see the code comment on
+                      // `numericColumnClasses` above) promotes it into a
+                      // later, higher-stacked paint step than the handle's
+                      // implicit `z-index: auto`, so the button wins the
+                      // overlap purely at the hit-test/paint layer — the
+                      // header's padding, and therefore its alignment with
+                      // the body `<td>`, never has to move. The handle's own
+                      // visible drag affordance (the `after:` seam, 0-8px
+                      // from the cell's trailing edge) sits entirely outside
+                      // this button's box (which ends at the same 12px inset
+                      // as the body), so dragging is unaffected.
+                      className="relative z-10 inline-flex items-center gap-1 rounded-sm transition-colors duration-fast ease-standard hover:text-foreground focus-ring"
                     >
                       {flexRender(header.column.columnDef.header, header.getContext())}
                       <SortIcon
@@ -914,6 +1869,106 @@ function DataTableInner<TData, TValue>(
                   ) : (
                     flexRender(header.column.columnDef.header, header.getContext())
                   )}
+                  {canResize && (
+                    <div
+                      role="separator"
+                      aria-orientation="vertical"
+                      aria-valuenow={Math.round(header.getSize())}
+                      aria-valuemin={header.column.columnDef.minSize}
+                      aria-valuemax={
+                        resizeMax !== undefined && resizeMax < Number.MAX_SAFE_INTEGER
+                          ? resizeMax
+                          : Math.max(header.getSize(), RESIZE_UNBOUNDED_ARIA_MAX)
+                      }
+                      // #51: a bare number reads to AT as a dimensionless
+                      // ordinal ("150") rather than a size — aria-valuetext
+                      // supplies the unit while aria-valuenow (above) stays
+                      // the plain numeric value TanStack/AT expect. PR #81
+                      // review, "Format the announced resize value for the
+                      // active locale": `count` (the raw number) drives
+                      // PluralMessage category selection so a locale whose
+                      // plural rules pick something other than "other" is
+                      // reachable, and `size` goes through `formatNumber` so
+                      // an overriding locale renders its own digits/grouping
+                      // instead of a raw Latin-digit JS number.
+                      aria-valuetext={t("data.table.resizeColumnValue", {
+                        count: Math.round(header.getSize()),
+                        size: formatNumber(Math.round(header.getSize())),
+                      })}
+                      aria-label={t("data.table.resizeColumn", { name: headerLabel })}
+                      tabIndex={0}
+                      data-slot="data-table-resize-handle"
+                      onMouseDown={header.getResizeHandler()}
+                      onTouchStart={header.getResizeHandler()}
+                      onKeyDown={(event) => handleResizeKeyDown(event, header.column)}
+                      // #51: double-click resets the column to its declared
+                      // (or default) size — see `handleResizeDoubleClick`.
+                      // Pointer-only; it doesn't touch the keyboard path above.
+                      onDoubleClick={() => handleResizeDoubleClick(header.column)}
+                      className={cn(
+                        // #51: the hit box is a literal 24px (clamped to half
+                        // the header cell so it can never overlap a neighbour,
+                        // even at `minSize=20`) rather than the `w-2` Tailwind
+                        // spacing-scale utility. `w-2` compiles to
+                        // `calc(var(--spacing) * 2)`, and `--spacing` is what
+                        // `data-density="compact"` rescales — so the old 8px
+                        // hit box shrank further under compact density
+                        // (~7.1px). A literal px value is density-independent
+                        // by construction, which is the actual defect the
+                        // maintainer's review corrected (NOT `--type-factor`,
+                        // which this handle never used). Do not widen via
+                        // overhang into the neighbouring cell instead — on the
+                        // last column that lands inside the `overflow-auto`
+                        // box (#330 false positive) and a pinned neighbour
+                        // paints over/hit-tests away the extra area.
+                        "absolute inset-y-0 end-0 w-[min(24px,50%)] cursor-col-resize touch-none select-none",
+                        // #51: the focus ring moves to the `after:` pseudo-
+                        // element (the drawn seam) rather than the box itself
+                        // — the box is now a 24px hit target, and a 24px focus
+                        // rectangle would replace the deliberately slim ring
+                        // already reviewed/approved as the #12 a11y fix
+                        // (da9b29e). `focus-visible:after:*` targets the
+                        // pseudo-element the same way `hover:after:w-2` /
+                        // `focus-visible:after:w-2` below already do.
+                        "focus-visible:outline-none",
+                        // a11y fix (#12 review, blocking): this handle is the
+                        // SOLE boundary between two adjacent header cells once
+                        // resizing is on — no fill/elevation change separates
+                        // them otherwise — so per the border/border-strong
+                        // decision test (styling-and-tokens.md) it needs a
+                        // rung that clears WCAG 1.4.11's 3:1 on its OWN, in
+                        // EVERY state, including rest (a control with no
+                        // affordance until hover is unusable without a
+                        // pointer). `border-strong` measures only 2.86-2.96:1
+                        // against this `bg-surface-muted` header — that rung
+                        // is guaranteed only vs `--card`/`--background`, not a
+                        // same-tone surface, which is the exact trap the rule
+                        // warns about. `muted-foreground` is guaranteed AA
+                        // text contrast against `--surface-muted`
+                        // (TEXT_SURFACES), so it clears the 3:1 non-text
+                        // minimum with wide margin (measured ~5.3-6.4:1 in
+                        // both themes, unaffected by density) and is already
+                        // the header's own label color. A slim persistent
+                        // `after:` seam (not just a hover reveal) gives the
+                        // real resting boundary; hover/focus widen the drawn
+                        // seam to 8px (`after:w-2`) using the same compliant
+                        // color — a separate width from the 24px pointer hit
+                        // box below (#51), which the seam does not fill.
+                        // Dragging keeps the pre-existing full-fill
+                        // `bg-primary` treatment — that is a drag AFFORDANCE,
+                        // not a focus indicator, and it is redundant with the
+                        // pointer capture, so it is out of scope here. The
+                        // keyboard focus indicator on both branches is the
+                        // shared compound one (#67), applied to the drawn seam
+                        // via `focus-visible:after:focus-ring-static`: the
+                        // element itself is a 24px transparent hit box, so
+                        // ringing IT would ring nothing a user can see.
+                        header.column.getIsResizing()
+                          ? "after:absolute after:inset-y-0 after:end-0 after:w-2 after:bg-primary after:content-[''] focus-visible:after:focus-ring-static"
+                          : "after:absolute after:inset-y-0 after:end-0 after:w-px after:bg-muted-foreground after:content-[''] hover:after:w-2 focus-visible:after:w-2 focus-visible:after:focus-ring-static",
+                      )}
+                    />
+                  )}
                 </th>
               );
             })}
@@ -928,17 +1983,25 @@ function DataTableInner<TData, TValue>(
    * under virtualization (a CSS `even:`/`odd:` variant would "swim" as the
    * windowed `<tr>`s recycle).
    *
-   * - zebra (default): a gentle `foreground/5` wash on alternate rows is the ONE
+   * - zebra (default): a gentle `--table-stripe` wash on alternate rows is the ONE
    *   separation gesture; rows carry NO divider (#173's strong divider was the cue
    *   only because nothing else was — the stripe replaces it, so a border would now
-   *   be redundant per the surface-separation rule).
+   *   be redundant per the surface-separation rule). A theme that turns the stripe
+   *   off (`--table-stripe: transparent`) sets `--table-row-rule-width` to put the
+   *   strong divider back as the sole cue; it is `0px` by default, so the stock
+   *   stripe carries no border and no extra pixel.
    * - lines (`zebra={false}`): the classic `border-border-strong` divider between
    *   rows; `last:border-b-0` so the final divider doesn't double with the
    *   container's own bottom border (which reads as a heavy edge / shadow).
    */
   function rowSeparationClass(rowIndex: number): string {
     if (!zebra) return "border-b border-border-strong last:border-b-0";
-    return rowIndex % 2 === 1 ? "bg-foreground/5" : "";
+    return cn(
+      "border-b-(length:--table-row-rule-width) border-border-strong last:border-b-0",
+      // Separate cn() argument: the stripe and the (theme-gated) rule are
+      // alternative cues, never both at once — see the jsdoc above.
+      rowIndex % 2 === 1 && "bg-table-stripe",
+    );
   }
 
   /**
@@ -976,25 +2039,24 @@ function DataTableInner<TData, TValue>(
     return cn(
       "bg-card",
       "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-['']",
-      zebra && rowIndex % 2 === 1 && "before:bg-foreground/5",
-      "group-hover/row:before:bg-foreground/10",
+      zebra && rowIndex % 2 === 1 && "before:bg-table-stripe",
+      "group-hover/row:before:bg-table-row-hover",
       "group-data-[state=selected]/row:before:bg-accent",
     );
   }
 
   /**
    * Accessible name for a row's hidden activation button (#337). Prefers the
-   * caller's `rowActionLabel`, then the first visible cell's primitive value
-   * (the row's primary identifier — the same name a link in that cell would
-   * get, so screen-reader users hear "billing, button", not five identically
-   * named buttons), then the localized generic fallback.
+   * caller's `rowActionLabel`, then the row's first DATA column value (via
+   * `firstDataCellValue` — skips a leading display column with no accessor,
+   * e.g. `createSelectionColumn()`'s own checkbox column, #11 I6), then the
+   * localized generic fallback.
    */
   function rowActionName(row: (typeof rows)[number]): string {
     const explicit = rowActionLabel?.(row);
     if (explicit) return explicit;
-    const firstValue = row.getVisibleCells()[0]?.getValue();
-    if (typeof firstValue === "string" && firstValue.trim() !== "") return firstValue;
-    if (typeof firstValue === "number") return String(firstValue);
+    const name = firstDataCellValue(row);
+    if (name !== undefined) return name;
     return t("data.table.rowAction");
   }
 
@@ -1003,6 +2065,18 @@ function DataTableInner<TData, TValue>(
     row: (typeof rows)[number],
     rowIndex: number,
     extras?: React.HTMLAttributes<HTMLTableRowElement>,
+    // Reorder metadata for THIS row, present in either handle mode whenever
+    // reorder is active — `activator` is set only in `"cell"` mode, where the
+    // grip button (not the row) is the drag activator (dnd-kit's
+    // `setActivatorNodeRef` pattern).
+    dragHandle?: {
+      isDragging: boolean;
+      activator?: {
+        setActivatorNodeRef: (node: HTMLElement | null) => void;
+        attributes: DraggableAttributes;
+        listeners: DraggableSyntheticListeners;
+      };
+    },
   ) {
     // #337: `onRowClick` adds exactly ONE activation target per row — a
     // visually-hidden <button> in the first cell. The <tr> stays a plain `row`
@@ -1034,7 +2108,17 @@ function DataTableInner<TData, TValue>(
           // (only movement is neutralized); the gated duration-fast/ease-standard
           // pair already collapses toward ~0ms via --motion-factor when the user
           // or OS asks for reduced motion, matching the header sort button.
-          "transition-colors duration-fast ease-standard hover:bg-foreground/10 data-[state=selected]:bg-accent",
+          "transition-colors duration-fast ease-standard hover:bg-table-row-hover data-[state=selected]:bg-accent",
+          // #13: the dragged row's live `transform` (set inline via `extras.style`,
+          // see `SortableDataRow`) is what actually MOVES it — this class only
+          // makes that movement glide instead of snapping, through the gated
+          // duration/ease utilities (never a raw ms/ease value —
+          // quality-gates.md "Motion-tokened") with a reduced-motion
+          // neutralizer. Raising the dragged row's stacking + opacity is a
+          // colour/composite-only cue, so it isn't gated by the same rule.
+          dragHandle &&
+            "relative transition-transform duration-base ease-standard motion-reduce:transition-none",
+          dragHandle?.isDragging && "z-20 opacity-90 shadow-md",
           // Named group (#333) so a PINNED cell can re-apply the row's hover /
           // selected wash on top of its own opaque fill — only CSS knows the
           // pointer is over a sibling cell. Purely a selector hook: `group/row`
@@ -1048,33 +2132,64 @@ function DataTableInner<TData, TValue>(
           // ring paints on the ROW the user is about to activate, even though
           // focus lives on the sr-only control inside it.
           clickable &&
-            "cursor-pointer has-[[data-slot=data-table-row-action]:focus-visible]:outline-2 has-[[data-slot=data-table-row-action]:focus-visible]:-outline-offset-2 has-[[data-slot=data-table-row-action]:focus-visible]:outline-ring",
+            "cursor-pointer has-[[data-slot=data-table-row-action]:focus-visible]:focus-ring-static-inset",
           rowClassName?.(row),
         )}
         {...extras}
       >
+        {dragHandle?.activator && (
+          <td className="w-10 px-3 py-2 align-middle">
+            <button
+              type="button"
+              ref={dragHandle.activator.setActivatorNodeRef}
+              data-slot="data-table-row-drag-handle"
+              aria-label={t("data.table.reorderHandle", { name: rowActionName(row) })}
+              className={cn(
+                "inline-flex size-7 cursor-grab items-center justify-center rounded-sm text-muted-foreground transition-colors duration-fast ease-standard hover:bg-foreground/10 hover:text-foreground focus-ring active:cursor-grabbing",
+                dragHandle.isDragging && "text-foreground",
+              )}
+              {...dragHandle.activator.attributes}
+              {...dragHandle.activator.listeners}
+            >
+              <GripVertical aria-hidden="true" className="size-4" />
+            </button>
+          </td>
+        )}
         {row.getVisibleCells().map((cell, cellIndex) => {
           const geometry = pinnedCellGeometry(cell.column);
+          // #12: same width triad as the header cell — see `resizeWidthStyle`.
+          const resizeStyle = enableColumnResizing
+            ? resizeWidthStyle(cell.column.getSize())
+            : undefined;
           return (
             <td
               key={cell.id}
               data-pinned={geometry?.pinned ?? undefined}
-              style={geometry?.style}
+              style={geometry?.style ?? resizeStyle}
               className={cn(
                 "px-3 py-2 align-middle",
+                // #69: same numeric-column seam as the header — see
+                // `numericColumnClasses`.
+                numericColumnClasses(cell.column.columnDef.meta),
                 // z-10: above the normal (unpositioned) cells it scrolls over,
                 // below the sticky header row (z-20) and the pinned corner (z-30).
                 geometry && "sticky z-10",
                 geometry && pinnedCellFillClass(rowIndex),
                 // Separate cn() argument — see pinnedCellGeometry's edgeClass.
                 geometry?.edgeClass,
+                columnDividers && !geometry && COLUMN_DIVIDER_CLASS,
               )}
             >
               {clickable && cellIndex === 0 && (
                 <button
                   type="button"
                   data-slot="data-table-row-action"
-                  className="sr-only"
+                  // #311: `sr-only` removes the box from the visual layout but
+                  // not the browser's own focus ring — the ROW paints the
+                  // deliberate compound indicator (via the `has-[…]` selector
+                  // above), so the proxy's own native ring must be suppressed
+                  // or it leaks as a stray dot at the row's edge.
+                  className="sr-only focus-visible:outline-none"
                   onClick={(event) => onRowClick?.(row, event)}
                 >
                   {rowActionName(row)}
@@ -1093,10 +2208,28 @@ function DataTableInner<TData, TValue>(
    * renderers so a markup/token/a11y fix only needs to be made once (#231).
    */
   function renderSkeletonBody(count: number) {
+    // #69: iterate the real leaf columns (not just a count) so each skeleton
+    // `<td>` can read the same `meta.numeric`/`meta.align` as the loaded
+    // header/body cells — a loading table whose skeleton didn't mirror the
+    // real alignment is exactly the column-shift-on-load bug
+    // loading-states.md § "CLS / space reservation" warns about.
+    const visibleColumns = table.getVisibleLeafColumns();
     return Array.from({ length: count }).map((_, i) => (
       <tr key={`skeleton-${i}`} aria-hidden="true" className={rowSeparationClass(i)}>
-        {Array.from({ length: colCount }).map((_, j) => (
-          <td key={j} className="px-3 py-2 align-middle">
+        {hasGripColumn && (
+          <td className="w-10 px-3 py-2 align-middle">
+            <Skeleton className="size-4" />
+          </td>
+        )}
+        {visibleColumns.map((column) => (
+          <td
+            key={column.id}
+            className={cn(
+              "px-3 py-2 align-middle",
+              numericColumnClasses(column.columnDef.meta),
+              columnDividers && COLUMN_DIVIDER_CLASS,
+            )}
+          >
             <Skeleton className="h-4 w-full" />
           </td>
         ))}
@@ -1111,7 +2244,10 @@ function DataTableInner<TData, TValue>(
   function renderEmptyBody() {
     return (
       <tr>
-        <td colSpan={colCount} className="h-24 px-3 text-center text-muted-foreground">
+        <td
+          colSpan={colCount + (hasGripColumn ? 1 : 0)}
+          className="h-24 px-3 text-center text-muted-foreground"
+        >
           {emptyMessage}
         </td>
       </tr>
@@ -1123,8 +2259,68 @@ function DataTableInner<TData, TValue>(
     if (showSkeletons) {
       return <tbody>{renderSkeletonBody(skeletonRowCount)}</tbody>;
     }
+    if (showEmpty) {
+      return <tbody>{renderEmptyBody()}</tbody>;
+    }
+    if (!rowReorderActive) {
+      return <tbody>{rows.map((row, i) => renderRow(row, i))}</tbody>;
+    }
 
-    return <tbody>{showEmpty ? renderEmptyBody() : rows.map((row, i) => renderRow(row, i))}</tbody>;
+    // #13: `SortableContext` renders no DOM element of its own (a plain
+    // context Provider), so nesting it around `<tbody>` here does not insert
+    // anything between `<table>` and `<tbody>` — the real DOM stays valid.
+    return (
+      <SortableContext
+        items={rows.map((r) => getReorderRowId(r))}
+        strategy={verticalListSortingStrategy}
+      >
+        <tbody>
+          {rows.map((row, i) => (
+            <SortableDataRow
+              key={getReorderRowId(row)}
+              id={getReorderRowId(row)}
+              attributesOverride={{
+                // #98: dnd-kit's own `roleDescription: 'sortable'` default is
+                // hardcoded English; override it with the localized value in
+                // BOTH handle modes — `role` stays row-mode-only (see the
+                // `attributesOverride` prop doc above).
+                roleDescription: t("data.table.reorderRoleDescription"),
+                ...(rowReorderHandle === "row" ? { role: "row" } : null),
+              }}
+            >
+              {({ setNodeRef, setActivatorNodeRef, attributes, listeners, isDragging, style }) =>
+                renderRow(
+                  row,
+                  i,
+                  {
+                    ref: setNodeRef,
+                    style,
+                    // `aria-pressed` is a `DraggableAttributes` field meant for a
+                    // real `<button>` activator; spread onto a `<tr role="row">`
+                    // (row-handle mode) it fails axe's `aria-allowed-attr` (that
+                    // ARIA state is not permitted on the `row` role), so strip it
+                    // here rather than exempt it downstream.
+                    ...(rowReorderHandle === "row"
+                      ? (() => {
+                          const { "aria-pressed": _ariaPressed, ...rowAttributes } = attributes;
+                          return { ...rowAttributes, ...listeners };
+                        })()
+                      : {}),
+                  } as React.HTMLAttributes<HTMLTableRowElement>,
+                  {
+                    isDragging,
+                    activator:
+                      rowReorderHandle === "cell"
+                        ? { setActivatorNodeRef, attributes, listeners }
+                        : undefined,
+                  },
+                )
+              }
+            </SortableDataRow>
+          ))}
+        </tbody>
+      </SortableContext>
+    );
   }
 
   // ─── Virtualized tbody ────────────────────────────────────────────────────
@@ -1236,11 +2432,16 @@ function DataTableInner<TData, TValue>(
         <div
           ref={scrollRef}
           tabIndex={0}
-          // Names the focus stop (WCAG 4.1.2) without a landmark role — a `role="region"`
-          // here would add a redundant landmark over the inner real <table>.
+          // Names the focus stop (WCAG 4.1.2). A naming-capable role is required
+          // for that name to compute at all — `aria-label` on a plain `<div>`
+          // (role `generic`) is not guaranteed to produce an accessible name.
+          // `group`, not `region`: a landmark per table would be redundant over
+          // the real <table> and collide under axe `landmark-unique` when two
+          // tables share a page.
+          role="group"
           aria-label={t("data.table.scrollRegion")}
           aria-busy={loading || undefined}
-          className="relative overflow-auto rounded-lg border bg-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="relative overflow-auto rounded-lg border bg-card focus-ring"
           style={{ maxHeight: maxBodyHeight, ...pinnedScrollPadding }}
         >
           {/* Loading overlay */}
@@ -1255,7 +2456,7 @@ function DataTableInner<TData, TValue>(
               className="absolute inset-0 z-40 flex items-center justify-center rounded-lg bg-card/80"
             >
               <Spinner aria-hidden="true" className="text-foreground" />
-              <span className="sr-only">Loading table data…</span>
+              <span className="sr-only">{t("data.table.loading")}</span>
             </div>
           )}
           <table
@@ -1281,7 +2482,7 @@ function DataTableInner<TData, TValue>(
   // fades) and an INNER scrolling div (the focusable, `overflow-auto` scroll
   // region) so the edge-fade affordance can stay pinned to the visible edges
   // instead of scrolling away with the table content.
-  return (
+  const nonVirtualizedContent = (
     <div ref={ref} className={cn("space-y-3", className)} {...rest}>
       {toolbar ? toolbar(table) : null}
       {/* Outer border is redundant (surface change) → plain border per #173 spec */}
@@ -1301,7 +2502,7 @@ function DataTableInner<TData, TValue>(
             className="absolute inset-0 z-40 flex items-center justify-center rounded-lg bg-card/80"
           >
             <Spinner aria-hidden="true" className="text-foreground" />
-            <span className="sr-only">Loading table data…</span>
+            <span className="sr-only">{t("data.table.loading")}</span>
           </div>
         )}
         {/* The tab stop exists ONLY while the region measurably overflows: without
@@ -1309,16 +2510,21 @@ function DataTableInner<TData, TValue>(
             axe `scrollable-region-focusable`) — but adding it unconditionally would
             give every table that FITS a focus stop that does nothing and announces
             "scrollable" when it isn't. `aria-label` moves with it (WCAG 4.1.2:
-            a name for a stop that exists, none for one that doesn't). No
-            `role="region"` — that would add a redundant landmark over the real
-            <table> inside it. */}
+            a name for a stop that exists, none for one that doesn't) — and
+            `role="group"` moves with BOTH of them: `aria-label` on a plain
+            `<div>` (role `generic`) is not guaranteed to compute into an
+            accessible name, so the stop needs a naming-capable role. `group`,
+            never the `region` landmark: that would be redundant over the real
+            <table> and collide (axe `landmark-unique`) with every other
+            overflowing table on the page. */}
         <div
           ref={plainScrollRef}
           data-slot="data-table-scroll-region"
           tabIndex={scrollOverflows ? 0 : undefined}
+          role={scrollOverflows ? "group" : undefined}
           aria-label={scrollOverflows ? t("data.table.scrollRegion") : undefined}
           onScroll={updateScrollAffordance}
-          className="overflow-auto rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+          className="overflow-auto rounded-lg focus-ring-inset"
           style={hasLeftPinned || hasRightPinned ? pinnedScrollPadding : undefined}
         >
           <table aria-busy={loading || undefined} className="w-full caption-bottom text-body">
@@ -1356,6 +2562,45 @@ function DataTableInner<TData, TValue>(
       {renderPagination()}
     </div>
   );
+
+  // #13: `DndContext` renders no wrapping DOM element around `children` either
+  // — it composes `children` alongside its own hidden a11y nodes (the
+  // screen-reader instructions, plus a `role="status"` `LiveRegion` that is
+  // permanently silent — see `silentDragAnnouncements` above) as SIBLINGS.
+  // Wrapping the whole component root here (rather than reaching inside the
+  // `<table>`) is what keeps those hidden nodes out of the table's own DOM —
+  // they land beside the table's outer `<div>`, never inside a
+  // `<thead>`/`<tbody>`, which is the only place in HTML that would reject
+  // them. DataTable's OWN `aria-live="polite"` region (`reorderLiveMessage`)
+  // is a further sibling here for the same reason.
+  if (!rowReorderActive) return nonVirtualizedContent;
+  return (
+    <DndContext
+      sensors={reorderSensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleRowDragStart}
+      onDragOver={handleRowDragOver}
+      onDragEnd={handleRowDragEnd}
+      onDragCancel={handleRowDragCancel}
+      accessibility={{
+        announcements: silentDragAnnouncements,
+        // #98: dnd-kit's own hidden keyboard-instructions node is hardcoded
+        // English (`defaultScreenReaderInstructions`) unless overridden here.
+        screenReaderInstructions: { draggable: t("data.table.reorderInstructions") },
+      }}
+    >
+      {nonVirtualizedContent}
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        data-slot="data-table-reorder-live-region"
+        className="sr-only"
+      >
+        {reorderLiveMessage}
+      </div>
+    </DndContext>
+  );
 }
 
 // ─── Public export with forwardRef + generic cast ─────────────────────────────