prime-ui-kit 0.0.1

package/src/components/data-table/COMPONENT.md

@@ -0,0 +1,140 @@
+# DataTable
+
+**Проектирование по умолчанию:** при проектировании экранов и примеров изначально выбирай **`m`** для `size` (где есть ось размера), если явно не оговорено иное.
+
+## About
+
+`DataTable.Root` renders a semantic `<table>` inside a scroll viewport, with optional client-side sorting, classic pagination or infinite-scroll slicing, sticky header and sticky first column, and a footer with row counts (and pagination or infinite-scroll hints).
+
+- **Use** when you need sortable tabular data with built-in pagination or “load more while scrolling” without building table chrome from scratch.
+- **Use** when row hover / column hover highlights or zebra striping should stay consistent with kit tokens via `size` and `ControlSizeProvider`.
+- **Use** when the first column must stay visible during horizontal scroll (`stickyFirstColumn`).
+- **Do not use** when you need arbitrary column pinning, resizable columns, or spreadsheet-style keyboard grid navigation — the table does not implement those.
+- **Do not use** when sorting or filtering must run on the server only without mirroring logic in the parent — sorting is applied in memory to the `rows` you pass; supply pre-sorted data or control `sort` yourself and replace `rows` accordingly.
+- **Do not use** when you need a loading overlay on top of already rendered rows — `loading` only affects the body when there are zero rows to display.
+- **Empty state:** for a **plain** message in the table body use **`emptyText`**. For an **illustrated** empty state (icon, **`h2`**, actions) render [`EmptyPage`](../empty-page/COMPONENT.md) in the surrounding layout or conditionally **instead of** the table when `rows.length === 0` and not `loading`.
+
+## Composition
+
+- **Public API** — a single compound entry: `DataTable` with `Root` (`DataTableRoot`). There are no other exported subcomponents.
+- **Structure** — `ControlSizeProvider` wraps a root `div` (data attributes for size, dividers, header visibility, stickiness, table width mode, hover highlights, zebra). Inside: `ScrollContainer` viewport → `<table>`, optional `<thead>` (`<th>` per column), `<tbody>` with rows, and an `aria-hidden` sentinel at the bottom when `infiniteScroll` is on (for `IntersectionObserver` or scroll fallback).
+- **Footer** — always shows a “shown range / total” line; if not `infiniteScroll` and `showPagination` and there is more than one page, it renders `Pagination.Root`; in infinite mode it may show a short status when more rows can be revealed or loaded.
+
+### Playground snippets
+
+Demos match **`playground/sections/DataTableSection.tsx`** (order and intent). Snippets under **`playground/snippets/data-table/`** use `@/` imports; runnable twins under **`examples/`** use **`prime-ui-kit`** (shared layout tokens in [`examples/examples-demos.module.css`](./examples/examples-demos.module.css) where needed).
+
+| Block | Snippet | Runnable example |
+| --- | --- | --- |
+| **Sizes** | [`sizes.tsx`](../../../playground/snippets/data-table/sizes.tsx) | [`examples/sizes.tsx`](./examples/sizes.tsx) — `size` `s`–`xl`; `Tag` / `Badge` inherit `ControlSizeProvider`; `paginationSize` follows table `size`. |
+| **Divider styles** | [`divider-styles.tsx`](../../../playground/snippets/data-table/divider-styles.tsx) | [`examples/divider-styles.tsx`](./examples/divider-styles.tsx) — `dividerStyle` `standard` / `dashed` / `dotted` / `none`. |
+| **States** | [`states.tsx`](../../../playground/snippets/data-table/states.tsx) | [`examples/states.tsx`](./examples/states.tsx) — `loading` + `loadingText` vs `emptyText`. |
+| **Sticky + headers** | [`sticky-and-headers.tsx`](../../../playground/snippets/data-table/sticky-and-headers.tsx) | [`examples/sticky-and-headers.tsx`](./examples/sticky-and-headers.tsx) — `showHeader`, `stickyHeader`, `stickyFirstColumn` with `infiniteScroll` + `scrollHeight`. |
+| **Controlled** | [`controlled.tsx`](../../../playground/snippets/data-table/controlled.tsx) | [`examples/controlled-sort-and-page.tsx`](./examples/controlled-sort-and-page.tsx) — `sort` / `onSortChange` / `page` / `onPageChange` (parent resets page on sort). |
+| **Composition** | [`composition.tsx`](../../../playground/snippets/data-table/composition.tsx) | [`examples/composition.tsx`](./examples/composition.tsx) — rich `header` / `cell`, `getRowKey`, `onRowClick`, `onCellClick` (+ keyboard). |
+| **Full width** | [`full-width.tsx`](../../../playground/snippets/data-table/full-width.tsx) | [`examples/full-width.tsx`](./examples/full-width.tsx) — narrow parent; default `fillWidth`. |
+| **Highlight + striped** | [`highlight-and-striped.tsx`](../../../playground/snippets/data-table/highlight-and-striped.tsx) | [`examples/highlight-and-striped.tsx`](./examples/highlight-and-striped.tsx) — toggles for `highlightRowOnHover`, `highlightColumnOnHover`, `striped`. |
+| **Infinite scroll** | [`infinite-scroll.tsx`](../../../playground/snippets/data-table/infinite-scroll.tsx) | [`examples/infinite-scroll-load-more.tsx`](./examples/infinite-scroll-load-more.tsx) — `infiniteScroll`, `hasMore`, `loadingMore`, `onLoadMore`, `scrollHeight` (snippet uses a larger generated dataset; same props). |
+| **Sort + pagination (uncontrolled)** | [`sorting-pagination.tsx`](../../../playground/snippets/data-table/sorting-pagination.tsx) | [`examples/sorting-pagination.tsx`](./examples/sorting-pagination.tsx) — `defaultSort` and built-in `Pagination`. |
+
+### Extra recipes (`examples/`)
+
+| Recipe | File | Notes |
+| --- | --- | --- |
+| Sticky header + first column (compact) | [`sticky-header-first-column.tsx`](./examples/sticky-header-first-column.tsx) | Russian copy; one combined sticky demo (subset of the snippet tour above). |
+| Orders + row open affordance | [`canonical-orders.tsx`](./examples/canonical-orders.tsx) | `defaultSort`, `pageSize`, `onRowClick`, `Tag` / `Badge` cells. |
+| Row selection with `Checkbox` | [`row-selection.tsx`](./examples/row-selection.tsx) | No built-in multi-select; header + row checkboxes in column definitions. |
+
+### Minimal example
+
+```tsx
+import { DataTable, type DataTableColumn } from "prime-ui-kit";
+
+type Row = { id: string };
+
+const columns: DataTableColumn<Row>[] = [{ id: "id", header: "ID", accessor: "id" }];
+const rows: Row[] = [{ id: "1" }];
+
+export function Example() {
+  return <DataTable.Root columns={columns} rows={rows} />;
+}
+```
+
+## Rules
+
+- Pass **`columns`** with unique **`id`** and **`header`** for every column; **`accessor`** (key or function), **`cell`**, **`sortable`**, and the rest are optional.
+- **Sort** — controlled: `sort` + `onSortChange`. Uncontrolled initial order: `defaultSort` (default `null`). Clicking a sortable header cycles **asc → desc → none** for that column; changing sort sets the page to **1** in paginated mode.
+- **Page** — controlled: `page` + `onPageChange`. Uncontrolled: `defaultPage` (default `1`). Page index is clamped when row count changes. Toggling **`infiniteScroll`** resets the visible slice; leaving infinite mode resets page to **1** via internal effect.
+- **Infinite scroll** — set `infiniteScroll`. The visible slice grows by **`infiniteBatchSize`** up to the current **`rows.length`** first; when the slice shows all local rows and **`hasMore`**, **`onLoadMore`** runs when the sentinel intersects (or on near-bottom scroll if `IntersectionObserver` is missing). **`initialVisibleRows`** defaults to **`pageSize`** when omitted.
+- **`loading`** — shows **`loadingText`** in a single spanning row only when there are no displayed rows yet; it does not dim existing rows.
+- **Empty** — when not loading and there are no rows, **`emptyText`** is shown in a spanning row.
+- **Row keys** — provide **`getRowKey`** for stable identity; otherwise React **`key`** falls back to the row **index** (fragile if row order changes).
+- **Localization** — default **`loadingText`**, **`emptyText`**, footer range text, and infinite-scroll hints are **Russian** in the implementation; override with props where needed.
+- **Accessibility** — sortable headers use an inner control pattern inside **`th`** with **`scope="col"`**; sort icons are **`aria-hidden`**. Cells with **`onCellClick`** get **`role="button"`**, **`tabIndex={0}`**, and **Enter / Space**. There is no **`grid`** role or arrow-key cell navigation.
+
+## API
+
+### DataTable.Root
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| columns | `DataTableColumn<Row>[]` | — | Yes | Column definitions |
+| rows | `Row[]` | — | Yes | Data rows (sorted in memory when `sort` applies) |
+| size | `DataTableSize` | `"m"` | No | Row density; forwarded to nested `Pagination` unless `paginationSize` is set |
+| className | `string` | — | No | Class on the outer wrapper |
+| showHeader | `boolean` | `true` | No | Render `<thead>` |
+| stickyHeader | `boolean` | `false` | No | Sticky header row |
+| stickyFirstColumn | `boolean` | `false` | No | Sticky first column (and corner cell when header is sticky) |
+| getRowKey | `(row: Row, index: number) => React.Key` | — | No | Stable row key; default is index |
+| onRowClick | `(row: Row, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void` | — | No | Row click handler |
+| loading | `boolean` | `false` | No | Loading state when no rows are displayed |
+| loadingText | `React.ReactNode` | `"Загрузка данных…"` | No | Message in loading state |
+| emptyText | `React.ReactNode` | `"Нет данных для отображения."` | No | Message when there are no rows |
+| dividerStyle | `DataTableDividerStyle` | `"standard"` | No | Cell border style: `standard`, `dashed`, `dotted`, `none` |
+| sort | `DataTableSortState` | — | No | Controlled sort (`null` or `{ columnId, order }`) |
+| defaultSort | `DataTableSortState` | `null` | No | Initial sort when uncontrolled |
+| onSortChange | `(sort: DataTableSortState) => void` | — | No | Sort change callback |
+| page | `number` | — | No | Controlled current page (1-based) |
+| defaultPage | `number` | `1` | No | Initial page when uncontrolled |
+| onPageChange | `(page: number) => void` | — | No | Page change callback |
+| pageSize | `number` | `10` | No | Rows per page in pagination mode; also default for `initialVisibleRows` in infinite mode |
+| showPagination | `boolean` | `true` | No | Show `Pagination` when not in infinite mode and `totalPages > 1` |
+| siblingCount | `number` | `1` | No | Page window size passed to `Pagination.Root` |
+| paginationSize | `DataTableSize` | — | No | Pagination size; defaults to root `size` |
+| infiniteScroll | `boolean` | `false` | No | Scroll viewport with growing slice / `onLoadMore` |
+| initialVisibleRows | `number` | `pageSize` | No | Initial number of rows shown in infinite mode |
+| infiniteBatchSize | `number` | `20` | No | Rows added per reach-end step before `onLoadMore` |
+| hasMore | `boolean` | `false` | No | Server has more data after current `rows` |
+| loadingMore | `boolean` | `false` | No | While an async `onLoadMore` is in progress |
+| onLoadMore | `() => void \| Promise<void>` | — | No | Fetch next chunk when local slice is exhausted |
+| scrollHeight | `number \| string` | `360` | No | Max height of the scroll viewport in infinite mode |
+| fillWidth | `boolean` | `true` | No | When `true`, table is full container width; extra space is distributed by the browser’s automatic table layout (`table-layout: auto`) from cell content and `width` / `minWidth` / `maxWidth`. When `false`, table width follows content (`max-content`) |
+| highlightRowOnHover | `boolean` | `true` | No | Row hover highlight |
+| highlightColumnOnHover | `boolean` | `false` | No | Column hover highlight (header + cells) |
+| striped | `boolean` | `false` | No | Alternating row backgrounds |
+
+### `DataTableColumn<Row>`
+
+| Field | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| id | `string` | — | Yes | Column id (used for sort state and DOM data attributes) |
+| header | `React.ReactNode` | — | Yes | Header content |
+| accessor | `keyof Row \| ((row: Row) => unknown)` | — | No | Value for default cell text and sort (unless `sortAccessor` / `sortComparator` override) |
+| cell | `(row: Row) => React.ReactNode` | — | No | Custom cell render |
+| sortable | `boolean` | `false` | No | Header toggles sort on click |
+| sortAccessor | `(row: Row) => unknown` | — | No | Value used for sorting (and default sort comparison) instead of `accessor` |
+| sortComparator | `(a: Row, b: Row, order: DataTableOrder) => number` | — | No | Custom comparator; when set, default primitive compare is not used |
+| align | `DataTableCellAlign` | `"start"` | No | `start`, `center`, or `end` |
+| width | `string` | — | No | Column width on `th` / `td` (CSS `width`) |
+| minWidth | `string` | — | No | Minimum column width on `th` / `td` |
+| maxWidth | `string` | — | No | Maximum column width on `th` / `td` |
+| onHeaderClick | `(event: React.MouseEvent<HTMLTableCellElement>) => void` | — | No | Fires on header click before sort handling |
+| onCellClick | `(row: Row, event: React.MouseEvent<HTMLTableCellElement> \| React.KeyboardEvent<HTMLTableCellElement>) => void` | — | No | Makes the cell focusable and keyboard-activable |
+
+Exported types: `DataTableSortState`, `DataTableOrder`, `DataTableSize`, `DataTableCellAlign`, `DataTableDividerStyle`, `DataTableRootProps`, `DataTableColumn`.
+
+## Related
+
+- [Pagination](../pagination/COMPONENT.md) — used under the table for page navigation.
+- [EmptyPage](../empty-page/COMPONENT.md) — rich empty state (icon, title, CTA) outside or instead of `emptyText`.
+- [LinkButton](../link-button/COMPONENT.md), [Badge](../badge/COMPONENT.md), [Tag](../tag/COMPONENT.md) — common cell content; they pick up size from the table’s `ControlSizeProvider` unless overridden.

package/src/components/data-table/examples/canonical-orders.tsx

@@ -0,0 +1,107 @@
+import { Badge, DataTable, type DataTableColumn, Tag } from "prime-ui-kit";
+import * as React from "react";
+
+type OrderRow = {
+  id: string;
+  customer: string;
+  amount: number;
+  region: string;
+  status: "Оплачен" | "В работе" | "Просрочен";
+};
+
+const rows: OrderRow[] = [
+  { id: "ORD-104", customer: "ООО «Север»", amount: 128_400, region: "СЗФО", status: "Оплачен" },
+  { id: "ORD-105", customer: "ИП Ким", amount: 42_100, region: "ДВФО", status: "В работе" },
+  { id: "ORD-106", customer: "АО «Транзит»", amount: 901_000, region: "ЦФО", status: "Оплачен" },
+  { id: "ORD-107", customer: "ООО «Логистик»", amount: 15_750, region: "ЮФО", status: "Просрочен" },
+  {
+    id: "ORD-108",
+    customer: "Самозанятый Орлов",
+    amount: 6_200,
+    region: "ПФО",
+    status: "В работе",
+  },
+  { id: "ORD-109", customer: "ООО «Полюс»", amount: 333_000, region: "УФО", status: "Оплачен" },
+  { id: "ORD-110", customer: "КФХ «Рядок»", amount: 88_500, region: "ЮФО", status: "В работе" },
+  { id: "ORD-111", customer: "АНО «Школа»", amount: 12_000, region: "СКФО", status: "Просрочен" },
+];
+
+function statusColor(status: OrderRow["status"]) {
+  if (status === "Оплачен") return "green";
+  if (status === "Просрочен") return "red";
+  return "yellow";
+}
+
+const columns: DataTableColumn<OrderRow>[] = [
+  {
+    id: "id",
+    header: "Заказ",
+    accessor: "id",
+    sortable: true,
+    minWidth: "8.5rem",
+  },
+  {
+    id: "customer",
+    header: "Клиент",
+    accessor: "customer",
+    sortable: true,
+    minWidth: "12rem",
+  },
+  {
+    id: "amount",
+    header: "Сумма, ₽",
+    accessor: "amount",
+    sortable: true,
+    align: "end",
+    minWidth: "9rem",
+    cell: (row) => row.amount.toLocaleString("ru-RU"),
+  },
+  {
+    id: "region",
+    header: "Округ",
+    accessor: "region",
+    sortable: true,
+    minWidth: "6rem",
+    cell: (row) => <Tag.Root>{row.region}</Tag.Root>,
+  },
+  {
+    id: "status",
+    header: "Статус",
+    accessor: "status",
+    sortable: true,
+    minWidth: "9rem",
+    cell: (row) => (
+      <Badge.Root color={statusColor(row.status)} variant="light">
+        {row.status}
+      </Badge.Root>
+    ),
+  },
+];
+
+/**
+ * Полноценная таблица: сортировка по умолчанию, пагинация (`pageSize` меньше числа строк),
+ * стабильные ключи строк и типичное оформление ячеек через `Tag` / `Badge`.
+ */
+export default function DataTableCanonicalOrdersExample() {
+  const [lastOpened, setLastOpened] = React.useState<string | null>(null);
+
+  return (
+    <div>
+      {lastOpened ? (
+        <p style={{ marginBottom: "0.75rem" }}>Открыт заказ: {lastOpened}</p>
+      ) : (
+        <p style={{ marginBottom: "0.75rem" }}>
+          Клик по строке выбирает заказ для сценария «открыть».
+        </p>
+      )}
+      <DataTable.Root
+        columns={columns}
+        rows={rows}
+        getRowKey={(row) => row.id}
+        defaultSort={{ columnId: "amount", order: "desc" }}
+        pageSize={4}
+        onRowClick={(row) => setLastOpened(row.id)}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,91 @@
+import { ExternalLink, Mail } from "lucide-react";
+import { DataTable, type DataTableColumn, LinkButton } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples-demos.module.css";
+
+type ContactRow = {
+  id: string;
+  name: string;
+  email: string;
+  channel: string;
+};
+
+const rows: ContactRow[] = [
+  { id: "c1", name: "Ирина Соколова", email: "i.sokolova@example.com", channel: "Email" },
+  { id: "c2", name: "Павел Орлов", email: "p.orlov@example.com", channel: "Личный кабинет" },
+  { id: "c3", name: "Марина Волкова", email: "m.volkova@example.com", channel: "Телеграм-бот" },
+];
+
+const columns: DataTableColumn<ContactRow>[] = [
+  {
+    id: "name",
+    header: (
+      <span className={styles.inlineIconRow}>
+        <Mail size={14} strokeWidth={2} aria-hidden />
+        Контакт
+      </span>
+    ),
+    accessor: "name",
+    sortable: true,
+    minWidth: "11rem",
+  },
+  {
+    id: "email",
+    header: "Адрес",
+    accessor: "email",
+    sortable: true,
+    minWidth: "14rem",
+    align: "center",
+    cell: (row) => (
+      <LinkButton.Root size="s" href={`mailto:${row.email}`}>
+        {row.email}
+      </LinkButton.Root>
+    ),
+  },
+  {
+    id: "channel",
+    header: "Канал",
+    accessor: "channel",
+    sortable: true,
+    minWidth: "10rem",
+  },
+  {
+    id: "open",
+    header: "",
+    sortable: false,
+    align: "end",
+    minWidth: "7rem",
+    onCellClick: (row) => {
+      window.open(`mailto:${row.email}`, "_blank", "noopener,noreferrer");
+    },
+    cell: () => (
+      <span className={styles.inlineIconRowTight}>
+        <ExternalLink size={14} strokeWidth={2} aria-hidden />
+        Написать
+      </span>
+    ),
+  },
+];
+
+/** Соответствует `playground/snippets/data-table/composition.tsx`. */
+export default function DataTableCompositionExample() {
+  const [last, setLast] = React.useState<string | null>(null);
+
+  return (
+    <div>
+      <p className={styles.lead}>
+        {last ? `Последний клик по строке: ${last}` : "Клик по строке обновляет подпись ниже."}
+      </p>
+      <DataTable.Root
+        columns={columns}
+        rows={rows}
+        getRowKey={(row) => row.id}
+        onRowClick={(row) => setLast(row.name)}
+        showPagination={false}
+        pageSize={10}
+        highlightRowOnHover
+      />
+    </div>
+  );
+}

package/src/components/data-table/examples/controlled-sort-and-page.tsx

@@ -0,0 +1,66 @@
+import { DataTable, type DataTableColumn, type DataTableSortState } from "prime-ui-kit";
+import * as React from "react";
+
+type TaskRow = {
+  id: string;
+  title: string;
+  assignee: string;
+  priority: number;
+};
+
+const rows: TaskRow[] = [
+  { id: "T-01", title: "Сверстать отчёт", assignee: "Аня", priority: 2 },
+  { id: "T-02", title: "Починить билд", assignee: "Борис", priority: 1 },
+  { id: "T-03", title: "Обновить зависимости", assignee: "Вика", priority: 3 },
+  { id: "T-04", title: "Ревью API", assignee: "Гриша", priority: 2 },
+  { id: "T-05", title: "Документация полей", assignee: "Даша", priority: 4 },
+  { id: "T-06", title: "E2E флейки", assignee: "Егор", priority: 1 },
+];
+
+const columns: DataTableColumn<TaskRow>[] = [
+  { id: "id", header: "ID", accessor: "id", sortable: true, minWidth: "5rem" },
+  { id: "title", header: "Задача", accessor: "title", sortable: true, minWidth: "14rem" },
+  {
+    id: "assignee",
+    header: "Исполнитель",
+    accessor: "assignee",
+    sortable: true,
+    minWidth: "10rem",
+  },
+  {
+    id: "priority",
+    header: "Приоритет",
+    accessor: "priority",
+    sortable: true,
+    align: "end",
+    minWidth: "8rem",
+  },
+];
+
+/**
+ * Управляемые `sort` и `page`: родитель синхронизирует состояние с URL, стором или формой фильтров.
+ */
+export default function DataTableControlledSortAndPageExample() {
+  const [sort, setSort] = React.useState<DataTableSortState>({
+    columnId: "priority",
+    order: "asc",
+  });
+  const [page, setPage] = React.useState(1);
+
+  return (
+    <DataTable.Root
+      columns={columns}
+      rows={rows}
+      getRowKey={(row) => row.id}
+      sort={sort}
+      onSortChange={(next) => {
+        setSort(next);
+        setPage(1);
+      }}
+      page={page}
+      onPageChange={setPage}
+      pageSize={3}
+      siblingCount={1}
+    />
+  );
+}

package/src/components/data-table/examples/divider-styles.tsx

@@ -0,0 +1,67 @@
+import { Badge, DataTable, type DataTableColumn, type DataTableDividerStyle } from "prime-ui-kit";
+
+import styles from "./examples-demos.module.css";
+
+type Row = {
+  id: string;
+  member: string;
+  role: string;
+  status: "Online" | "Busy" | "Offline";
+};
+
+const rows: Row[] = [
+  { id: "r1", member: "James Brown", role: "Product Manager", status: "Online" },
+  { id: "r2", member: "Sophia Williams", role: "Designer", status: "Busy" },
+  { id: "r3", member: "Arthur Taylor", role: "Frontend Engineer", status: "Offline" },
+];
+
+function mapStatus(status: Row["status"]): "online" | "busy" | "offline" {
+  if (status === "Online") return "online";
+  if (status === "Busy") return "busy";
+  return "offline";
+}
+
+const columns: DataTableColumn<Row>[] = [
+  { id: "member", header: "Member", accessor: "member", sortable: true, minWidth: "11rem" },
+  { id: "role", header: "Role", accessor: "role", sortable: true, minWidth: "12rem" },
+  {
+    id: "status",
+    header: "Status",
+    accessor: "status",
+    sortable: true,
+    minWidth: "8rem",
+    cell: (row) => (
+      <Badge.Root variant="status" status={mapStatus(row.status)} label={row.status}>
+        {row.status}
+      </Badge.Root>
+    ),
+  },
+];
+
+function DividerRow({ divider }: { divider: DataTableDividerStyle }) {
+  return (
+    <>
+      <p className={styles.demoLabel}>dividerStyle = {divider}</p>
+      <DataTable.Root
+        className={styles.demoTable}
+        columns={columns}
+        rows={rows}
+        dividerStyle={divider}
+        pageSize={3}
+        showPagination={false}
+      />
+    </>
+  );
+}
+
+/** Соответствует `playground/snippets/data-table/divider-styles.tsx`. */
+export default function DataTableDividerStylesExample() {
+  return (
+    <>
+      <DividerRow divider="standard" />
+      <DividerRow divider="dashed" />
+      <DividerRow divider="dotted" />
+      <DividerRow divider="none" />
+    </>
+  );
+}

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

@@ -0,0 +1,78 @@
+/* Layout helpers for runnable examples (mirrors playground/snippets/data-table/*.module.css). */
+
+.demoLabel {
+  margin: var(--prime-sys-spacing-x4) 0 var(--prime-sys-spacing-x2);
+  font-size: var(--prime-sys-size-control-s-supportText);
+  font-weight: var(--prime-sys-typography-weight-medium);
+  color: var(--prime-sys-color-content-secondary);
+}
+
+.demoLabel:first-child {
+  margin-top: 0;
+}
+
+.demoTable {
+  margin-bottom: var(--prime-sys-spacing-x3);
+}
+
+.narrowCard {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 28rem;
+  padding: var(--prime-sys-spacing-x3);
+  border-radius: var(--prime-sys-shape-radius-m);
+  border: 1px dashed var(--prime-sys-color-border-subtle);
+}
+
+.lead {
+  margin: 0 0 var(--prime-sys-spacing-x3);
+  font-size: var(--prime-sys-size-control-s-supportText);
+  color: var(--prime-sys-color-content-secondary);
+}
+
+.leadTight {
+  margin: 0 0 var(--prime-sys-spacing-x2);
+  font-size: var(--prime-sys-size-control-s-supportText);
+  color: var(--prime-sys-color-content-secondary);
+}
+
+.statesStack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-sys-spacing-x6);
+  width: 100%;
+}
+
+.inlineIconRow {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--prime-sys-spacing-x2);
+}
+
+.inlineIconRowTight {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--prime-sys-spacing-x1);
+}
+
+.optionsFieldset {
+  margin: 0 0 var(--prime-sys-spacing-x4);
+  padding: var(--prime-sys-spacing-x3) var(--prime-sys-spacing-x4);
+  border: 1px solid var(--prime-sys-color-border-subtle);
+  border-radius: var(--prime-sys-shape-radius-m);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--prime-sys-spacing-x4) var(--prime-sys-spacing-x6);
+}
+
+.optionsLegend {
+  padding: 0 var(--prime-sys-spacing-x2);
+  font-size: var(--prime-sys-typography-support-xs);
+}
+
+.optionLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--prime-sys-spacing-x3);
+  cursor: pointer;
+}

package/src/components/data-table/examples/full-width.tsx

@@ -0,0 +1,39 @@
+import { DataTable, type DataTableColumn } from "prime-ui-kit";
+
+import styles from "./examples-demos.module.css";
+
+type Row = { id: string; task: string; hours: number };
+
+const rows: Row[] = [
+  { id: "T-12", task: "Сверстать отчёт по спринту", hours: 3 },
+  { id: "T-13", task: "Проверить миграции БД", hours: 1.5 },
+  { id: "T-14", task: "Обновить подсказки в форме входа", hours: 2 },
+];
+
+const columns: DataTableColumn<Row>[] = [
+  { id: "id", header: "Задача", accessor: "id", sortable: true, minWidth: "6rem" },
+  { id: "task", header: "Описание", accessor: "task", sortable: true, minWidth: "12rem" },
+  {
+    id: "hours",
+    header: "Часы",
+    accessor: "hours",
+    sortable: true,
+    align: "end",
+    minWidth: "5rem",
+    cell: (row) =>
+      row.hours.toLocaleString("ru-RU", { minimumFractionDigits: 0, maximumFractionDigits: 1 }),
+  },
+];
+
+/** Соответствует `playground/snippets/data-table/full-width.tsx`. */
+export default function DataTableFullWidthExample() {
+  return (
+    <div className={styles.narrowCard}>
+      <p className={styles.lead}>
+        Узкий контейнер: корень таблицы тянется на 100% ширины родителя (сетка карточки, колонка
+        формы).
+      </p>
+      <DataTable.Root columns={columns} rows={rows} showPagination={false} pageSize={10} />
+    </div>
+  );
+}

package/src/components/data-table/examples/highlight-and-striped.tsx

@@ -0,0 +1,71 @@
+import { DataTable, type DataTableColumn } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples-demos.module.css";
+
+type Row = { id: string; product: string; qty: number; price: number };
+
+const rows: Row[] = [
+  { id: "1", product: "Notebook", qty: 2, price: 1200 },
+  { id: "2", product: "Mouse", qty: 5, price: 45 },
+  { id: "3", product: "Keyboard", qty: 1, price: 180 },
+  { id: "4", product: "Display", qty: 1, price: 420 },
+];
+
+const columns: DataTableColumn<Row>[] = [
+  { id: "product", header: "Товар", accessor: "product", sortable: true, minWidth: "10rem" },
+  { id: "qty", header: "Кол-во", accessor: "qty", sortable: true, align: "end", minWidth: "6rem" },
+  {
+    id: "price",
+    header: "Цена",
+    accessor: "price",
+    sortable: true,
+    align: "end",
+    minWidth: "7rem",
+  },
+];
+
+/** Соответствует `playground/snippets/data-table/highlight-and-striped.tsx`. */
+export default function DataTableHighlightAndStripedExample() {
+  const [highlightRowOnHover, setHighlightRowOnHover] = React.useState(true);
+  const [highlightColumnOnHover, setHighlightColumnOnHover] = React.useState(false);
+  const [striped, setStriped] = React.useState(false);
+
+  return (
+    <div>
+      <fieldset className={styles.optionsFieldset}>
+        <legend className={styles.optionsLegend}>Опции таблицы</legend>
+        <label className={styles.optionLabel}>
+          <input
+            type="checkbox"
+            checked={highlightRowOnHover}
+            onChange={(e) => setHighlightRowOnHover(e.target.checked)}
+          />
+          Подсветка строки при наведении
+        </label>
+        <label className={styles.optionLabel}>
+          <input
+            type="checkbox"
+            checked={highlightColumnOnHover}
+            onChange={(e) => setHighlightColumnOnHover(e.target.checked)}
+          />
+          Подсветка колонки при наведении
+        </label>
+        <label className={styles.optionLabel}>
+          <input type="checkbox" checked={striped} onChange={(e) => setStriped(e.target.checked)} />
+          Чередование строк (зебра)
+        </label>
+      </fieldset>
+
+      <DataTable.Root
+        columns={columns}
+        rows={rows}
+        pageSize={10}
+        showPagination={false}
+        highlightRowOnHover={highlightRowOnHover}
+        highlightColumnOnHover={highlightColumnOnHover}
+        striped={striped}
+      />
+    </div>
+  );
+}