prime-ui-kit 0.19.0 → 0.20.1

package/src/components/data-table/examples/controlled.tsx

@@ -1,7 +1,14 @@
 /** Sort, page and the column choice owned by the parent (a URL or a store): a header click goes asc → desc → none, a new sort returns to page 1 — `sort`, `onSortChange`, `page`, `onPageChange`, `hiddenColumns`, `onHiddenColumnsChange`. */
-import { DataTable, type DataTableColumn, type DataTableSortState } from "prime-ui-kit";
+import {
+  DataTable,
+  type DataTableColumn,
+  DataTableColumnsMenu,
+  type DataTableSortState,
+} from "prime-ui-kit";
 import * as React from "react";
 
+import styles from "./examples.module.css";
+
 type Order = { id: number; customer: string; city: string; total: number };
 
 const CUSTOMERS = ["Анна Соколова", "Борис Кравец", "Вера Львова", "Глеб Миронов", "Дарья Носова"];
@@ -48,21 +55,29 @@ export default function DataTableControlledExample() {
   const [hiddenColumns, setHiddenColumns] = React.useState<string[]>(["city"]);
 
   return (
-    <DataTable
-      columns={COLUMNS}
-      rows={ORDERS}
-      getRowKey={(row) => row.id}
-      columnsMenu
-      hiddenColumns={hiddenColumns}
-      onHiddenColumnsChange={setHiddenColumns}
-      sort={sort}
-      onSortChange={(next) => {
-        setSort(next);
-        setPage(1);
-      }}
-      page={page}
-      onPageChange={setPage}
-      pageSize={5}
-    />
+    <div className={styles.withTools}>
+      <div className={styles.tools}>
+        <DataTableColumnsMenu
+          columns={COLUMNS}
+          hiddenColumns={hiddenColumns}
+          onHiddenColumnsChange={setHiddenColumns}
+        />
+      </div>
+      <DataTable
+        columns={COLUMNS}
+        rows={ORDERS}
+        getRowKey={(row) => row.id}
+        hiddenColumns={hiddenColumns}
+        onHiddenColumnsChange={setHiddenColumns}
+        sort={sort}
+        onSortChange={(next) => {
+          setSort(next);
+          setPage(1);
+        }}
+        page={page}
+        onPageChange={setPage}
+        pageSize={5}
+      />
+    </div>
   );
 }

package/src/components/data-table/examples/examples.module.css

@@ -1,41 +1,5 @@
 /* Layout of the DataTable scenarios: semantic tokens only. */
 
-/* Toolbar content: two groups pushed to the edges; they wrap on narrow widths. */
-.toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--prime-space-2);
-  width: 100%;
-  min-width: 0;
-}
-
-/* A SmartFilter in the toolbar: the search and filter row over the applied filters. */
-.filterColumn {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: var(--prime-space-3);
-  min-width: 0;
-}
-
-.filters {
-  display: flex;
-  flex: 1 1 auto;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--prime-space-2);
-  min-width: 0;
-}
-
-/* The search grows from 12rem, at most 20rem. */
-.search {
-  flex: 1 1 calc(var(--prime-space-24) * 2);
-  min-width: 0;
-  max-width: calc(var(--prime-space-20) * 4);
-}
-
 /* appearance / content-width: a table with its caption under it. */
 .specimen {
   display: flex;
@@ -73,3 +37,17 @@
   min-width: 0;
   margin-inline: auto;
 }
+
+/* A table under the tools of its page: the column chooser (`DataTableColumnsMenu`) at the end. */
+.withTools {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--prime-space-3);
+  min-width: 0;
+}
+
+.tools {
+  display: flex;
+  justify-content: flex-end;
+  min-width: 0;
+}

package/src/components/data-table/examples/narrow.tsx

@@ -1,5 +1,6 @@
-/** A 320 px support queue: columns scroll inside the table with the first one pinned, the column chooser stays at the end of the header row, the footer reflows and the pager turns compact — `stickyFirstColumn`, `columnsMenu`, `size`. */
-import { Badge, DataTable, type DataTableColumn } from "prime-ui-kit";
+/** A 320 px support queue: columns scroll inside the table with the first one pinned, the column chooser stays in reach above it, the footer reflows and the pager turns compact — `stickyFirstColumn`, `DataTableColumnsMenu`, `size`. */
+import { Badge, DataTable, type DataTableColumn, DataTableColumnsMenu } from "prime-ui-kit";
+import * as React from "react";
 
 import styles from "./examples.module.css";
 
@@ -31,17 +32,29 @@ const COLUMNS: DataTableColumn<Ticket>[] = [
 ];
 
 export default function DataTableNarrowExample() {
+  const [hidden, setHidden] = React.useState<string[]>([]);
+
   return (
     <div className={styles.narrow}>
-      <DataTable
-        size="s"
-        columns={COLUMNS}
-        rows={TICKETS}
-        getRowKey={(row) => row.id}
-        stickyFirstColumn
-        columnsMenu
-        pageSize={5}
-      />
+      <div className={styles.withTools}>
+        <div className={styles.tools}>
+          <DataTableColumnsMenu
+            size="s"
+            columns={COLUMNS}
+            hiddenColumns={hidden}
+            onHiddenColumnsChange={setHidden}
+          />
+        </div>
+        <DataTable
+          size="s"
+          columns={COLUMNS}
+          hiddenColumns={hidden}
+          rows={TICKETS}
+          getRowKey={(row) => row.id}
+          stickyFirstColumn
+          pageSize={5}
+        />
+      </div>
     </div>
   );
 }

package/src/components/data-table/examples/reorder.tsx

@@ -1,8 +1,9 @@
-/** Pipeline stages put in order by the handle or Alt + ↑ / ↓; each move is saved with a spinner in its handle, and sorting by a column turns the handles off — `onReorder`, `getRowLabel`. */
-import { Badge, DataTable, type DataTableColumn, moveBefore } from "prime-ui-kit";
+/** Pipeline stages put in order by a grip at the end of the row, at its start or by the whole row, or with Alt + ↑ / ↓; each move is saved with a spinner in its grip, and sorting by a column turns reordering off — `onReorder`, `reorderHandle`, `getRowLabel`. */
+import { Badge, DataTable, type DataTableColumn, moveBefore, SegmentedControl } from "prime-ui-kit";
 import * as React from "react";
 
 type Stage = { id: string; name: string; owner: string; deals: number; probability: number };
+type Handle = "end" | "start" | "row";
 
 const STAGES: Stage[] = [
   { id: "lead", name: "Новый лид", owner: "Отдел продаж", deals: 48, probability: 10 },
@@ -19,6 +20,12 @@ const STAGES: Stage[] = [
   { id: "payment", name: "Оплата", owner: "Бухгалтерия", deals: 4, probability: 95 },
 ];
 
+const HANDLES: { value: Handle; label: string }[] = [
+  { value: "end", label: "Ручка в конце" },
+  { value: "start", label: "Ручка в начале" },
+  { value: "row", label: "Вся строка" },
+];
+
 const COLUMNS: DataTableColumn<Stage>[] = [
   { id: "name", header: "Этап", accessor: "name", hideable: false },
   { id: "owner", header: "Ответственный", accessor: "owner" },
@@ -38,6 +45,7 @@ const saveOrder = () => new Promise<void>((resolve) => setTimeout(resolve, 700))
 
 export default function DataTableReorderExample() {
   const [stages, setStages] = React.useState(STAGES);
+  const [handle, setHandle] = React.useState<Handle>("end");
   return (
     <DataTable
       columns={COLUMNS}
@@ -45,6 +53,20 @@ export default function DataTableReorderExample() {
       paging="none"
       getRowKey={(row) => row.id}
       getRowLabel={(row) => row.name}
+      reorderHandle={handle}
+      toolbar={
+        <SegmentedControl.Root
+          value={handle}
+          onValueChange={(next) => setHandle(next as Handle)}
+          aria-label="За что брать строку"
+        >
+          {HANDLES.map((item) => (
+            <SegmentedControl.Item key={item.value} value={item.value}>
+              {item.label}
+            </SegmentedControl.Item>
+          ))}
+        </SegmentedControl.Root>
+      }
       onReorder={async (id, beforeId) => {
         await saveOrder();
         setStages((current) =>

package/src/components/data-table/examples/selection.tsx

@@ -2,8 +2,6 @@
 import { Button, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 type Member = { id: string; name: string; email: string; role: string };
 
 const MEMBERS: Member[] = [
@@ -35,25 +33,22 @@ export default function DataTableSelectionExample() {
       onSelectedChange={setSelected}
       paging="none"
       toolbar={
-        <div className={styles.toolbar}>
+        <>
           <Typography as="span" variant="body-s" tone="secondary">
             Выбрано: {selected.length} из {MEMBERS.length}
           </Typography>
-          <div className={styles.filters}>
-            <Button.Root
-              variant="outline"
-              tone="neutral"
-              size="s"
-              disabled={selected.length === 0}
-              onClick={() => setSelected([])}
-            >
-              Снять выбор
-            </Button.Root>
-            <Button.Root variant="soft" tone="danger" size="s" disabled={selected.length === 0}>
-              Удалить
-            </Button.Root>
-          </div>
-        </div>
+          <Button.Root
+            variant="outline"
+            tone="neutral"
+            disabled={selected.length === 0}
+            onClick={() => setSelected([])}
+          >
+            Снять выбор
+          </Button.Root>
+          <Button.Root variant="soft" tone="danger" disabled={selected.length === 0}>
+            Удалить
+          </Button.Root>
+        </>
       }
     />
   );

package/src/components/data-table/examples/server.tsx

@@ -1,8 +1,9 @@
-/** A CRM deal list the server sorts, pages and searches; a new search returns to page 1 — `source`, `rowCount`, `sort`, `page`, `loading`. */
+/** A CRM deal list the server sorts, pages and searches, with its tools in its own row — search, filter and column chooser, the active filters under them; a new search returns to page 1 — `source`, `rowCount`, `sort`, `page`, `loading`, `toolbar`, `toolbarChips`. */
 import {
   Badge,
   DataTable,
   type DataTableColumn,
+  DataTableColumnsMenu,
   type DataTableSortState,
   matchesSmartFilter,
   SmartFilter,
@@ -11,8 +12,6 @@ import {
 } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 type Stage = "new" | "talks" | "won" | "lost";
 type Deal = { id: number; client: string; manager: string; stage: Stage; amount: number };
 type DealsRequest = {
@@ -79,7 +78,15 @@ const RUB = new Intl.NumberFormat("ru-RU", {
 });
 
 const COLUMNS: DataTableColumn<Deal>[] = [
-  { id: "id", header: "Сделка", accessor: "id", sortable: true, numeric: true, align: "start" },
+  {
+    id: "id",
+    header: "Сделка",
+    accessor: "id",
+    sortable: true,
+    numeric: true,
+    align: "start",
+    hideable: false,
+  },
   { id: "client", header: "Клиент", accessor: "client", sortable: true },
   { id: "manager", header: "Менеджер", accessor: "manager", sortable: true },
   {
@@ -125,6 +132,7 @@ export default function DataTableServerExample() {
   const [search, setSearch] = React.useState("");
   const [sort, setSort] = React.useState<DataTableSortState>({ columnId: "amount", order: "desc" });
   const [page, setPage] = React.useState(1);
+  const [hidden, setHidden] = React.useState<string[]>([]);
   const [result, setResult] = React.useState<DealsPage>({ rows: [], total: 0 });
   const [loading, setLoading] = React.useState(true);
 
@@ -153,33 +161,39 @@ export default function DataTableServerExample() {
   };
 
   return (
-    <DataTable
-      source="server"
-      columns={COLUMNS}
-      rows={result.rows}
-      rowCount={result.total}
-      getRowKey={(row) => row.id}
-      pageSize={PAGE_SIZE}
-      page={page}
-      onPageChange={setPage}
-      sort={sort}
-      onSortChange={setSort}
-      loading={loading}
-      empty="Сделок не найдено — измените запрос или фильтры"
-      toolbar={
-        <SmartFilter.Root
-          fields={FIELDS}
-          value={filter}
-          onValueChange={changeFilter}
-          search={search}
-          onSearchChange={changeSearch}
-        >
-          <div className={styles.filterColumn}>
+    <SmartFilter.Root
+      fields={FIELDS}
+      value={filter}
+      onValueChange={changeFilter}
+      search={search}
+      onSearchChange={changeSearch}
+    >
+      <DataTable
+        source="server"
+        columns={COLUMNS}
+        hiddenColumns={hidden}
+        rows={result.rows}
+        rowCount={result.total}
+        getRowKey={(row) => row.id}
+        pageSize={PAGE_SIZE}
+        page={page}
+        onPageChange={setPage}
+        sort={sort}
+        onSortChange={setSort}
+        loading={loading}
+        empty="Сделок не найдено — измените запрос или фильтры"
+        toolbar={
+          <>
             <SmartFilter.Toolbar />
-            <SmartFilter.Chips />
-          </div>
-        </SmartFilter.Root>
-      }
-    />
+            <DataTableColumnsMenu
+              columns={COLUMNS}
+              hiddenColumns={hidden}
+              onHiddenColumnsChange={setHidden}
+            />
+          </>
+        }
+        toolbarChips={<SmartFilter.Chips />}
+      />
+    </SmartFilter.Root>
   );
 }

package/src/components/data-table/examples/toolbar.tsx

@@ -1,4 +1,4 @@
-/** A campaign table with its own search and status filter above it — two table-scoped controls; the empty text when nothing matches — `toolbar`, `empty`. */
+/** A campaign table with its own tools row: the search takes the free room, the status switch keeps its width at the end, and on a narrow table they wrap; the empty text when nothing matches — `toolbar`, `empty`. */
 import {
   Badge,
   DataTable,
@@ -9,8 +9,6 @@ import {
 } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 type Status = "active" | "paused" | "archived";
 type Campaign = { id: string; name: string; status: Status; clicks: number; ctr: number };
 
@@ -86,8 +84,8 @@ export default function DataTableToolbarExample() {
       pageSize={5}
       empty="Ничего не найдено — измените запрос или фильтр"
       toolbar={
-        <div className={styles.filters}>
-          <Input.Root size="s" className={styles.search}>
+        <>
+          <Input.Root>
             <Input.Wrapper>
               <Input.Icon side="start">
                 <Icon name="action.search" />
@@ -101,17 +99,12 @@ export default function DataTableToolbarExample() {
               />
             </Input.Wrapper>
           </Input.Root>
-          <SegmentedControl.Root
-            size="s"
-            aria-label="Статус"
-            value={status}
-            onValueChange={setStatus}
-          >
+          <SegmentedControl.Root aria-label="Статус" value={status} onValueChange={setStatus}>
             <SegmentedControl.Item value="all">Все</SegmentedControl.Item>
             <SegmentedControl.Item value="active">Активные</SegmentedControl.Item>
             <SegmentedControl.Item value="paused">На паузе</SegmentedControl.Item>
           </SegmentedControl.Root>
-        </div>
+        </>
       }
     />
   );

package/src/components/datepicker/COMPONENT.md

@@ -78,7 +78,7 @@ panel                       presets column (range) · 1–2 month grids · promp
 | `name` | `string` | — | Submits the value with a form through hidden inputs: `yyyy-MM-dd` (`yyyy-MM-ddTHH:mm` with `withTime`); a range submits two values under the name, `from` then `to` (empty for an open bound). |
 | `aria-label · aria-labelledby · aria-describedby` | `string` | — | Name without a `label` (the value is appended) and extra description ids. |
 | `months` | `1 \| 2` | `1` | Months side by side; one when there is no room. |
-| `presets` | `DatepickerPreset[] \| false` | `false` | Preset column (`range` only): `DEFAULT_DATEPICKER_PRESETS` or picks from `datepickerPresets`; a row above the calendar when narrow. |
+| `presets` | `DatepickerPreset[] \| false` | `false` | Preset column (`range` only): `DEFAULT_DATEPICKER_PRESETS` (ends with «Всё время») or picks from `datepickerPresets`; a row above the calendar when narrow. |
 | `prompt` | `boolean` | `false` | Step prompt under the calendar (`labels.pickStart` / `pickEnd` / `pickDate`). |
 | `footer` | `boolean` | `false` | Footer with date fields and Reset / Apply; without it a pick applies at once. |
 | `withTime` | `boolean` | `false` | Time fields in the footer (00:00 — 23:59 by default). |
@@ -103,7 +103,7 @@ panel                       presets column (range) · 1–2 month grids · promp
 | `onValueChange` | `(value) => void` | — | Called when a pick, a preset, Apply or Reset changes the value. |
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Panel tier (day cell 24 · 28 · 32 · 36 · 40). Without it the tier of its host, else `m`. |
 | `months` | `1 \| 2` | `1` | Months side by side; one when there is no room. |
-| `presets` | `DatepickerPreset[] \| false` | `false` | Preset column (`range` only): `DEFAULT_DATEPICKER_PRESETS` or picks from `datepickerPresets`; a row above the calendar when narrow. |
+| `presets` | `DatepickerPreset[] \| false` | `false` | Preset column (`range` only): `DEFAULT_DATEPICKER_PRESETS` (ends with «Всё время») or picks from `datepickerPresets`; a row above the calendar when narrow. |
 | `prompt` | `boolean` | `false` | Step prompt under the calendar (`labels.pickStart` / `pickEnd` / `pickDate`). |
 | `footer` | `boolean` | `false` | Footer with date fields and Reset / Apply; without it a pick applies at once. |
 | `withTime` | `boolean` | `false` | Time fields in the footer (00:00 — 23:59 by default). |

package/src/components/dnd/COMPONENT.md

@@ -11,6 +11,7 @@
 - Moving an item between lists to an exact position: a board of columns (several `Dnd.Sortable` with one `kind`; Alt + ← / → moves across from the keyboard).
 - A list with a pinned first row or a system item that must hold its place (`locked`).
 - Reordering the rows of a table of your own (`as="tbody"`; a group's heading row in `header`). For records in a [DataTable](../data-table/COMPONENT.md) use its `onReorder`.
+- Reordering the columns of a table of your own (`as="tr"` on the head row; the body follows the order on the drop). For a [DataTable](../data-table/COMPONENT.md) use its `columnOrder`.
 - Moving an item onto a target with no inner order: a folder, an assignee (`Dnd.Draggable` + `Dnd.DropZone`).
 
 ## When not to use
@@ -29,14 +30,14 @@ import { Dnd, moveBefore } from "prime-ui-kit";
 Dnd.Root                         session owner: overlay (portal), live region, labels — mount once
 ├─ Dnd.Sortable                  list container and drop target; renders items in the drawn order
 │  ├─ header                     optional content before the items that never moves (a group's heading row)
-│  ├─ Dnd.SortableItem           one item (li in ul/ol, div otherwise); the gap is drawn before it
+│  ├─ Dnd.SortableItem           one item (li in ul/ol, tr in tbody, th in tr, div otherwise); the gap is drawn before it
 │  │  └─ Dnd.Handle              optional grip, last in the item: a ghost icon-only Button (with `handle` on the list); a lock in a `locked` item; busy while the item's move is saved
 │  ├─ empty                      the `empty` content while the list has no items
 │  └─ children                   optional content after the items that never moves (an add tile)
 ├─ Dnd.Draggable                 an item to carry elsewhere; stays in place, faded, until the drop
 └─ Dnd.DropZone                  a box that takes dropped items
 ```
-A drag in flight is drawn by `Dnd.Root` as a clone of the lifted element above every layer, following the pointer. The clone flies inside empty copies (`display: contents`) of its ancestors up to the nearest surface (`data-depth`) and that surface's `data-theme`, so the host's variables and selectors (a List row's tier padding and radius) dress it exactly as the item in place, and it sets down without a jump; an item without a fill of its own flies on the fill of the surface it was lifted from (`--prime-color-layer-current`). A refusal with a reason shows the reason in the tooltip's chip under the clone. The page gets `data-dnd-active="mouse | touch | pen"` on `<html>` for the length of the gesture (the holding cursor), and every list of the carried item's kind gets `data-dnd-carrying`.
+A drag in flight is drawn by `Dnd.Root` as a clone of the lifted element above every layer, following the pointer. The clone keeps the original's size and flies inside empty copies of all its ancestors up to the page — `display: contents`, except a size container (`container-type`), which flies as an invisible box of its measured content width, so its container queries resolve as at the source — and the host's variables, `[data-…]` selectors, surface and scoped theme (a List row's tier padding and radius, a narrow FieldList's stacked row) dress it exactly as the item in place, and it sets down without a jump; an item without a fill of its own flies on the fill of the surface it was lifted from (`--prime-color-layer-current`). A refusal with a reason shows the reason in the tooltip's chip under the clone. The page gets `data-dnd-active="mouse | touch | pen"` on `<html>` for the length of the gesture (the holding cursor), and every list of the carried item's kind gets `data-dnd-carrying`.
 
 ## API
 
@@ -67,19 +68,20 @@ Generic `Dnd.Sortable<T>`; `ref` → `HTMLElement`. The list and its drop target
 | `kind` | `string` | unique per list | Lists sharing a `kind` exchange items (a board): an item from another list arrives in `onReorder` with an `id` not in `items`. Alt + the arrows across the axis move it by keyboard. Name each list: it is spoken. |
 | `canDrop` | `(id: string) => boolean \| string` | — | Refuses an item by id: `false`, or a string that says why (spoken and shown under the carried copy). The list turns `danger` before the release. |
 | `empty` | `ReactNode` | — | Shown while the list has no items, inside a dashed drop slot while the list takes drops; fades out when a gap opens in the list, so the gap takes its place. |
-| `as` | `"div" \| "ul" \| "ol" \| "tbody"` | `"div"` | Root element; `ul` / `ol` render items as `li`, `tbody` as table rows `tr` (the gap is a row across every column, the carried copy keeps every cell's width). |
-| `header` | `ReactNode` | — | Content in front of the items that never moves and takes no drop position: the heading row of a group in a `tbody`. |
+| `as` | `"div" \| "ul" \| "ol" \| "tbody" \| "tr"` | `"div"` | Root element; `ul` / `ol` render items as `li`, `tbody` as rows `tr` (a gap row, a one-row copy), `tr` as head cells `th` with `axis="x"` (cells keep their columns, the gap glides among them). |
+| `header` | `ReactNode` | — | Content in front of the items that never moves and takes no drop position: the heading row of a group in a `tbody`, the leading cells of a head row. |
 | `aria-label` | `string` | — | Accessible name of the list. |
 | `…rest` | `Omit<HTMLAttributes<HTMLElement>, "children">` | — | `className` (the list layout), `aria-label` (the name of the list) and the other attributes of the list element. |
 
 ### Dnd.SortableItem
-`ref` → `HTMLElement`. `<li>` inside `ul` / `ol`, `<tr>` inside `tbody`, `<div>` otherwise; throws outside `Dnd.Sortable`. One item; presses on controls inside never drag. Without `handle` it takes the keys, and a named `<div>` item is a `button`.
+`ref` → `HTMLElement`. `<li>` inside `ul` / `ol`, `<tr>` inside `tbody`, `<th>` inside `tr`, `<div>` otherwise; throws outside `Dnd.Sortable`. One item; presses on controls inside never drag. Without `handle` it takes the keys, and a named `<div>` item is a `button`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `id` | `string` | — (required) | The item id (same as `getId`). |
 | `disabled` | `boolean` | `false` | This item cannot be dragged or moved (others may still move past it). |
 | `locked` | `boolean` | `false` | Holds its place: it does not move and nothing is put where it would shift it. Its `Dnd.Handle` turns into a lock. A pinned first row, a system column. |
+| `dragFromControls` | `boolean` | `false` | Without `handle`: a press on a control inside picks the item up too once it travels (a finger: holds); a click stays the control's. A table header whose sort button fills it. |
 | `className` | `string` | — | The row look: fill, radius, padding. |
 | `children` | `ReactNode` | — | The row content. |
 | `…rest` | `Omit<HTMLAttributes<HTMLElement>, "id">` | — | `aria-labelledby` / `aria-describedby` (the visible title and description) and the other attributes. |
@@ -148,6 +150,7 @@ Returns `items` with `id` moved in front of `beforeId` (`null` = last): the body
 | `div` | a flex column / row / grid of `div` items | most lists | yes |
 | `ul` · `ol` | the same with `li` items | a list that reads as one to assistive tech | |
 | `tbody` | table rows (`tr` items) in the table's own layout; the gap is a row across every column; the row flies inside a one-row copy of its table at its column widths | rows of a table (`axis="y"`) | |
+| `tr` | a head row whose cells (`th` items) are the columns: every cell keeps its column, so the body stays still while a header is carried; the carried cell stays in the layout as the gap — the same dashed, tinted slot as every sortable gap, drawn inside the cell — and it and the others glide by transforms to where they will stand; the copy is the head cell alone in a one-cell copy of the table; the body takes the new order on the drop | reorderable columns of a table (`axis="x"`); keep each column's width by id across the reorder so the head cells land where they were drawn (DataTable does) | |
 
 ### Flags
 | Value | Looks like | Use when | Default |
@@ -155,6 +158,7 @@ Returns `items` with `id` moved in front of `beforeId` (`null` = last): the body
 | `handle` | only the grip starts a drag; the row keeps its controls | rows with buttons, switches, text | `false` |
 | `kind` shared | lists exchange items at an exact position; Alt + ← / → moves across | boards | unique per list |
 | `locked` (item) | a lock where the grip would be; the item holds its place, nothing moves past it | a pinned first row, a system column | `false` |
+| `dragFromControls` (item) | without `handle`: a press on a control inside picks the item up once it travels (a finger: holds); a click stays the control's, and the click that ends a drag is swallowed | a table header whose sort button fills it | `false` |
 | `empty` | the list's own line inside a dashed drop slot while it is empty (no slot when the list is `disabled`); a gap opening takes its place | columns, lists that may run out | — |
 | `canDrop` → string | the refusal says why: live region and a chip under the clone | workflow rules a person must understand | — |
 | `flashOnDrop` | after a drop the zone's fill starts at `accent-soft` and fades back to its own | the eye must follow where the item went | `false` |
@@ -203,7 +207,7 @@ An item's own `onPointerDown` / `onKeyDown` run before the kit's: `preventDefaul
 - A grid (`axis="grid"`) is `display: grid`: the host sets the tracks (`grid-template-columns`) and the cells' size; the gap takes a cell, and a carried item resizes to the cell it would land in.
 - A `Dnd.Handle` ends its item: the last child, after the item's own trailing controls (a remove button), at the inline end (on the left in RTL); a `locked` item's lock takes the same place, so the grips of every row stand on one line. In a table it is the last cell. An on / off switch leads the item (its first child), so its state reads first and nothing stands between the text and the grip.
 - The reason chip stands `--prime-tooltip-offset` under the carried copy, start-aligned, at most `--prime-tooltip-max-width` wide.
-- The look of a row is the consumer's: give `Dnd.SortableItem` / `Dnd.Draggable` a radius on its own class (the gap and the clone's fill take it) and keep the row's look within its ancestors up to the nearest surface (`data-depth`) — the clone flies inside empty copies (`display: contents`) of exactly those, so their variables and selectors still apply. A table row flies in a one-row copy of its table inside them.
+- The look of a row is the consumer's: give `Dnd.SortableItem` / `Dnd.Draggable` a radius on its own class (the gap and the clone's fill take it) and the row's ancestors may dress it — the clone flies inside empty copies of all of them (a size container as a box of its width), so their variables, selectors and container queries still apply. A table row flies in a one-row copy of its table inside them.
 - A scrollable ancestor under the pointer auto-scrolls within 64 px of its edge (a `ScrollContainer` strip works).
 - Keep a zone's height stable between states; it only changes fill and outline.
 
@@ -258,6 +262,7 @@ An item's own `onPointerDown` / `onKeyDown` run before the kit's: `preventDefaul
 | [board.tsx](examples/board.tsx) | A ticket board: columns share one kind, so a ticket lands in another column at an exact position or moves there with Alt + ← / →, an empty column says so, and a full column refuses it before the release with the reason under the ticket — `kind`, `canDrop`, `empty`, `onReorder`. |
 | [drop-zones.tsx](examples/drop-zones.tsx) | Documents carried onto folders: a zone takes items by kind and gets the document as data, a locked folder refuses before the release and says why under the carried file, a syncing folder is no target at all, a document on signing stays put, the line above follows the drag, the target flashes where the file landed — `Dnd.Draggable`, `Dnd.DropZone`, `data`, `canDrop`, `disabled`, `onDragStart`, `onDragEnd`, `onEnter`, `onLeave`, `flashOnDrop`. |
 | [table.tsx](examples/table.tsx) | A project estimate as a table: each stage is its own body of rows under a heading row that never moves, a row is carried by its grip within a stage or into another, and the rows stay table rows — `as`, `header`, `kind`, `handle`. |
+| [table-columns.tsx](examples/table-columns.tsx) | A sales report whose columns change places: the head row is a sortable list, a header is carried alone while the rows stay still and the gap opens among the headers where it lands, and the month column holds its place — `as`, `axis`, `locked`. |
 | [states.tsx](examples/states.tsx) | A contract's approval route: a step already signed stays where it is while the rest reorder around it, and once the route is approved the whole list holds still — `Dnd.SortableItem`, `Dnd.Sortable`, `disabled`. |
 | [narrow.tsx](examples/narrow.tsx) | A row of status filters in a 320 px strip: tags reorder sideways and the strip scrolls when a tag is held near its edge — `axis`. |
 
@@ -266,7 +271,7 @@ An item's own `onPointerDown` / `onKeyDown` run before the kit's: `preventDefaul
 - A `Dnd.SortableItem` `id` that differs from `getId(item)` → the item never moves.
 - Rendering items yourself instead of through `renderItem` → the list cannot draw the gap or the optimistic order.
 - Using `index` as the id → ids must survive a reorder.
-- Styling a row from an ancestor above the nearest surface (`data-depth`) → the flying clone loses it; keep the row's look on the row and its hosts inside the surface.
+- Styling a row from its siblings (`li + li`, `:first-child`) → the flying clone stands alone and loses it; keep the row's look on the row and its ancestors.
 - Starting a drag from a button inside a row without `handle` → presses on controls are theirs; use `Dnd.Handle`.
 - A drag-only move with no alternative → add a button or a menu for the same action.
 - `aria-label` on an item that shows a title and a description → it hides them; point `aria-labelledby` / `aria-describedby` at them.

package/src/components/dnd/examples/table-columns.tsx

@@ -0,0 +1,75 @@
+/** A sales report whose columns change places: the head row is a sortable list, a header is carried alone while the rows stay still and the gap opens among the headers where it lands, and the month column holds its place — `as`, `axis`, `locked`. */
+import { Dnd, moveBefore, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Month = { id: string; month: string; deals: number; revenue: string; average: string };
+type Column = { id: keyof Month; title: string; numeric: boolean; locked: boolean };
+
+const COLUMNS: Column[] = [
+  { id: "month", title: "Месяц", numeric: false, locked: true },
+  { id: "deals", title: "Сделки", numeric: true, locked: false },
+  { id: "revenue", title: "Выручка", numeric: true, locked: false },
+  { id: "average", title: "Средний чек", numeric: true, locked: false },
+];
+
+const MONTHS: Month[] = [
+  { id: "jul", month: "Июль", deals: 42, revenue: "3 150 000 ₽", average: "75 000 ₽" },
+  { id: "aug", month: "Август", deals: 37, revenue: "2 960 000 ₽", average: "80 000 ₽" },
+  { id: "sep", month: "Сентябрь", deals: 51, revenue: "4 080 000 ₽", average: "80 000 ₽" },
+];
+
+export default function DndTableColumnsExample() {
+  const [columns, setColumns] = React.useState(COLUMNS);
+
+  return (
+    <Dnd.Root>
+      <table className={styles.table}>
+        <caption className={styles.caption}>
+          <Typography as="span" variant="title-s">
+            Продажи по месяцам
+          </Typography>
+        </caption>
+        <thead>
+          <Dnd.Sortable
+            as="tr"
+            axis="x"
+            aria-label="Колонки отчёта"
+            items={columns}
+            getId={(column) => column.id}
+            getLabel={(column) => column.title}
+            onReorder={(id, beforeId) =>
+              setColumns((current) => moveBefore(current, id, beforeId, (column) => column.id))
+            }
+            renderItem={(column) => (
+              <Dnd.SortableItem
+                id={column.id}
+                locked={column.locked}
+                scope="col"
+                className={column.numeric ? styles.numeric : styles.cell}
+              >
+                <Typography as="span" variant="caption" tone="muted">
+                  {column.title}
+                </Typography>
+              </Dnd.SortableItem>
+            )}
+          />
+        </thead>
+        <tbody>
+          {MONTHS.map((row) => (
+            <tr key={row.id}>
+              {columns.map((column) => (
+                <td key={column.id} className={column.numeric ? styles.numeric : styles.cell}>
+                  <Typography as="span" variant="body-m">
+                    {row[column.id]}
+                  </Typography>
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Dnd.Root>
+  );
+}