prime-ui-kit 0.3.1 → 0.4.0

package/src/components/command-menu/examples/controlled-open-search.tsx

@@ -0,0 +1,76 @@
+import { Search } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+import { Typography } from "@/components/typography/Typography";
+
+const inputIconStyle: React.CSSProperties = {
+  width: "var(--prime-sys-size-control-m-icon)",
+  height: "var(--prime-sys-size-control-m-icon)",
+  color: "var(--prime-sys-color-content-muted)",
+  flexShrink: 0,
+};
+
+const toolbarStyle: React.CSSProperties = {
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "var(--prime-sys-spacing-x3)",
+  alignItems: "center",
+};
+
+/**
+ * Controlled `Dialog` and controlled `Input` value synced with parent state (playground `controlled-open-search.tsx`).
+ */
+export default function CommandMenuExampleControlledOpenSearch() {
+  const [open, setOpen] = React.useState(false);
+  const [query, setQuery] = React.useState("");
+
+  return (
+    <>
+      <div style={toolbarStyle}>
+        <Typography.Root variant="body-small" tone="muted">
+          External query: «{query || "…"}»
+        </Typography.Root>
+        <Button.Root size="m" variant="primary" onClick={() => setOpen(true)}>
+          Open with external search string
+        </Button.Root>
+      </div>
+
+      <CommandMenu.Dialog
+        open={open}
+        onOpenChange={(next) => {
+          setOpen(next);
+          if (!next) setQuery("");
+        }}
+      >
+        <CommandMenu.InputRow
+          leading={<Search style={inputIconStyle} strokeWidth={2} aria-hidden />}
+        >
+          <CommandMenu.Input
+            placeholder="Search synced with parent…"
+            aria-label="Search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+          />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading="Commands">
+            <CommandMenu.Item
+              value="clear filter"
+              keywords="clear reset"
+              onSelect={() => {
+                setQuery("");
+              }}
+            >
+              Clear filter
+            </CommandMenu.Item>
+            <CommandMenu.Item value="done" onSelect={() => setOpen(false)}>
+              Close palette
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+        </CommandMenu.List>
+      </CommandMenu.Dialog>
+    </>
+  );
+}

package/src/components/command-menu/examples/disabled-items.tsx

@@ -0,0 +1,77 @@
+import { Search } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+import { Typography } from "@/components/typography/Typography";
+
+const inputIconStyle: React.CSSProperties = {
+  width: "var(--prime-sys-size-control-m-icon)",
+  height: "var(--prime-sys-size-control-m-icon)",
+  color: "var(--prime-sys-color-content-muted)",
+  flexShrink: 0,
+};
+
+const footerStyle: React.CSSProperties = {
+  background: "var(--prime-sys-color-surface-default)",
+};
+
+/**
+ * Disabled items, empty `value` (always visible in results), and notes on empty filter UX.
+ * `disabled` rows are omitted from the list and keyboard order — not grayed in place.
+ */
+export default function CommandMenuExampleDisabledItems() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button.Root size="m" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+        Disabled items behavior
+      </Button.Root>
+
+      <CommandMenu.Dialog open={open} onOpenChange={setOpen} aria-labelledby="disabled-demo-title">
+        <CommandMenu.DialogTitle id="disabled-demo-title">Commands</CommandMenu.DialogTitle>
+        <CommandMenu.InputRow
+          leading={<Search style={inputIconStyle} strokeWidth={2} aria-hidden />}
+        >
+          <CommandMenu.Input placeholder="Try “delete”…" aria-label="Filter commands" />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading="Available">
+            <CommandMenu.Item value="save draft" keywords="write" onSelect={() => setOpen(false)}>
+              Save draft
+            </CommandMenu.Item>
+            <CommandMenu.Item
+              value="publish"
+              keywords="release ship"
+              onSelect={() => setOpen(false)}
+            >
+              Publish
+            </CommandMenu.Item>
+            <CommandMenu.Item value="" keywords="" onSelect={() => setOpen(false)}>
+              Always visible — empty value ignores the filter query
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+          {/* `disabled` items are excluded from visible options — this row never appears in the listbox */}
+          <CommandMenu.Group heading="Hidden when disabled">
+            <CommandMenu.Item
+              value="delete production database"
+              keywords="delete destroy danger"
+              disabled
+              onSelect={() => setOpen(false)}
+            >
+              Delete production (disabled in code)
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+        </CommandMenu.List>
+        <CommandMenu.Footer style={footerStyle}>
+          <Typography.Root variant="body-compact" tone="muted">
+            Searching “delete” finds no option: the dangerous action is disabled and removed from
+            the palette, not listed as inactive. If nothing matches, groups collapse — add your own
+            empty state below the list if needed.
+          </Typography.Root>
+        </CommandMenu.Footer>
+      </CommandMenu.Dialog>
+    </>
+  );
+}

package/src/components/command-menu/examples/file-search.tsx

@@ -0,0 +1,98 @@
+import { File, FileCode, Search } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+
+const inputIconStyle: React.CSSProperties = {
+  width: "var(--prime-sys-size-control-m-icon)",
+  height: "var(--prime-sys-size-control-m-icon)",
+  color: "var(--prime-sys-color-content-muted)",
+  flexShrink: 0,
+};
+
+type FileRow = { id: string; label: string; value: string; keywords: string };
+
+const FILES: FileRow[] = [
+  {
+    id: "1",
+    label: "README.md",
+    value: "readme",
+    keywords: "markdown docs root getting started",
+  },
+  {
+    id: "2",
+    label: "src/components/Button.tsx",
+    value: "button tsx",
+    keywords: "src components button react",
+  },
+  {
+    id: "3",
+    label: "playground/vite.config.ts",
+    value: "vite config",
+    keywords: "playground vite build",
+  },
+  {
+    id: "4",
+    label: "tokens/semantic.ts",
+    value: "semantic tokens",
+    keywords: "tokens theme design system",
+  },
+];
+
+/**
+ * File picker-style palette: match on file name, path segments, and extra keywords.
+ */
+export default function CommandMenuExampleFileSearch() {
+  const [open, setOpen] = React.useState(false);
+  const [activeId, setActiveId] = React.useState<string | null>(null);
+
+  return (
+    <>
+      <Button.Root size="m" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+        Search files
+      </Button.Root>
+
+      <CommandMenu.Dialog open={open} onOpenChange={setOpen} aria-labelledby="files-title">
+        <CommandMenu.DialogTitle id="files-title">Open file</CommandMenu.DialogTitle>
+        <CommandMenu.InputRow
+          leading={<Search style={inputIconStyle} strokeWidth={2} aria-hidden />}
+        >
+          <CommandMenu.Input placeholder="Filter by name or path…" aria-label="Filter files" />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading="Repository">
+            {FILES.map((f) => {
+              const Icon = f.label.endsWith(".tsx") || f.label.endsWith(".ts") ? FileCode : File;
+              return (
+                <CommandMenu.Item
+                  key={f.id}
+                  value={f.value}
+                  keywords={f.keywords}
+                  onSelect={() => {
+                    setActiveId(f.id);
+                    setOpen(false);
+                  }}
+                >
+                  <CommandMenu.ItemIcon as={Icon} strokeWidth={2} />
+                  {f.label}
+                </CommandMenu.Item>
+              );
+            })}
+          </CommandMenu.Group>
+        </CommandMenu.List>
+      </CommandMenu.Dialog>
+
+      {activeId ? (
+        <p
+          style={{
+            marginTop: "var(--prime-sys-spacing-x3)",
+            color: "var(--prime-sys-color-content-muted)",
+          }}
+        >
+          Last opened id: {activeId}
+        </p>
+      ) : null}
+    </>
+  );
+}

package/src/components/command-menu/examples/full-width-panel.tsx

@@ -0,0 +1,52 @@
+import { Search } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+import commandMenuStyles from "@/components/command-menu/CommandMenu.module.css";
+
+const inputIconStyle: React.CSSProperties = {
+  width: "var(--prime-sys-size-control-m-icon)",
+  height: "var(--prime-sys-size-control-m-icon)",
+  color: "var(--prime-sys-color-content-muted)",
+  flexShrink: 0,
+};
+
+/**
+ * Wider panel via `dialogContentWide` from the CommandMenu CSS module on `Dialog` `className`
+ * (playground `full-width-panel.tsx` uses a local demo class with the same width token).
+ */
+export default function CommandMenuExampleFullWidthPanel() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button.Root size="m" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+        Wide panel
+      </Button.Root>
+
+      <CommandMenu.Dialog
+        open={open}
+        onOpenChange={setOpen}
+        className={commandMenuStyles.dialogContentWide}
+      >
+        <CommandMenu.InputRow
+          leading={<Search style={inputIconStyle} strokeWidth={2} aria-hidden />}
+        >
+          <CommandMenu.Input placeholder="Wider than default max-width…" aria-label="Search" />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading="Layout">
+            <CommandMenu.Item
+              value="dialog content wide class"
+              keywords="layout"
+              onSelect={() => setOpen(false)}
+            >
+              Panel className from CommandMenu.module.css
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+        </CommandMenu.List>
+      </CommandMenu.Dialog>
+    </>
+  );
+}

package/src/components/command-menu/examples/item-icon-as.tsx

@@ -0,0 +1,48 @@
+import { Circle, Square, Triangle } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+
+/**
+ * `ItemIcon` `as` prop: SVG components or native `span` (playground `item-icon-as.tsx`).
+ */
+export default function CommandMenuExampleItemIconAs() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button.Root size="m" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+        ItemIcon polymorphism
+      </Button.Root>
+
+      <CommandMenu.Dialog open={open} onOpenChange={setOpen}>
+        <CommandMenu.InputRow>
+          <CommandMenu.Input placeholder="Icons as components…" aria-label="Search" />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading="Polymorphic ItemIcon">
+            <CommandMenu.Item value="circle" onSelect={() => setOpen(false)}>
+              <CommandMenu.ItemIcon as={Circle} strokeWidth={2} aria-hidden />
+              Circle
+            </CommandMenu.Item>
+            <CommandMenu.Item value="square" onSelect={() => setOpen(false)}>
+              <CommandMenu.ItemIcon as={Square} strokeWidth={2} aria-hidden />
+              Square
+            </CommandMenu.Item>
+            <CommandMenu.Item value="triangle" onSelect={() => setOpen(false)}>
+              <CommandMenu.ItemIcon as={Triangle} strokeWidth={2} aria-hidden />
+              Triangle
+            </CommandMenu.Item>
+            <CommandMenu.Item value="label" onSelect={() => setOpen(false)}>
+              <CommandMenu.ItemIcon as="span" aria-hidden>
+                ●
+              </CommandMenu.ItemIcon>
+              Text mark in span
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+        </CommandMenu.List>
+      </CommandMenu.Dialog>
+    </>
+  );
+}

package/src/components/command-menu/examples/quick-actions.tsx

@@ -0,0 +1,74 @@
+import { Copy, Link2, Mail, Search, UserPlus } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+
+const inputIconStyle: React.CSSProperties = {
+  width: "var(--prime-sys-size-control-m-icon)",
+  height: "var(--prime-sys-size-control-m-icon)",
+  color: "var(--prime-sys-color-content-muted)",
+  flexShrink: 0,
+};
+
+/**
+ * Quick actions on the current context: copy, share, invite — grouped under one palette.
+ */
+export default function CommandMenuExampleQuickActions() {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <>
+      <Button.Root size="m" variant="neutral" mode="stroke" onClick={() => setOpen(true)}>
+        Quick actions
+      </Button.Root>
+
+      <CommandMenu.Dialog open={open} onOpenChange={setOpen} aria-labelledby="actions-title">
+        <CommandMenu.DialogTitle id="actions-title">Actions</CommandMenu.DialogTitle>
+        <CommandMenu.InputRow
+          leading={<Search style={inputIconStyle} strokeWidth={2} aria-hidden />}
+        >
+          <CommandMenu.Input placeholder="Run an action…" aria-label="Filter actions" />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading="Clipboard">
+            <CommandMenu.Item
+              value="copy link"
+              keywords="url clipboard"
+              onSelect={() => setOpen(false)}
+            >
+              <CommandMenu.ItemIcon as={Link2} strokeWidth={2} />
+              Copy link
+            </CommandMenu.Item>
+            <CommandMenu.Item
+              value="copy page as markdown"
+              keywords="clipboard md export"
+              onSelect={() => setOpen(false)}
+            >
+              <CommandMenu.ItemIcon as={Copy} strokeWidth={2} />
+              Copy page as Markdown
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+          <CommandMenu.Group heading="People">
+            <CommandMenu.Item
+              value="invite teammate"
+              keywords="email share member"
+              onSelect={() => setOpen(false)}
+            >
+              <CommandMenu.ItemIcon as={UserPlus} strokeWidth={2} />
+              Invite teammate
+            </CommandMenu.Item>
+            <CommandMenu.Item
+              value="message owner"
+              keywords="dm mail contact"
+              onSelect={() => setOpen(false)}
+            >
+              <CommandMenu.ItemIcon as={Mail} strokeWidth={2} />
+              Message owner
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+        </CommandMenu.List>
+      </CommandMenu.Dialog>
+    </>
+  );
+}

package/src/components/command-menu/examples/variants-density-items.tsx

@@ -0,0 +1,85 @@
+import { Search } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/button/Button";
+import { CommandMenu } from "@/components/command-menu/CommandMenu";
+
+const inputIconStyle: React.CSSProperties = {
+  width: "var(--prime-sys-size-control-m-icon)",
+  height: "var(--prime-sys-size-control-m-icon)",
+  color: "var(--prime-sys-color-content-muted)",
+  flexShrink: 0,
+};
+
+const triggerRowStyle: React.CSSProperties = {
+  display: "flex",
+  flexWrap: "wrap",
+  gap: "var(--prime-sys-spacing-x3)",
+  alignItems: "center",
+};
+
+type DensityDemo = "compact" | "comfortable";
+
+/**
+ * `InputRow` `density` and list row scale via `Item` `size` (playground `variants-density-items.tsx`).
+ */
+export default function CommandMenuExampleVariantsDensityItems() {
+  const [open, setOpen] = React.useState(false);
+  const [density, setDensity] = React.useState<DensityDemo>("compact");
+
+  return (
+    <>
+      <div style={triggerRowStyle}>
+        <Button.Root
+          size="m"
+          variant="neutral"
+          mode="stroke"
+          onClick={() => {
+            setDensity("compact");
+            setOpen(true);
+          }}
+        >
+          Compact density
+        </Button.Root>
+        <Button.Root
+          size="m"
+          variant="neutral"
+          mode="stroke"
+          onClick={() => {
+            setDensity("comfortable");
+            setOpen(true);
+          }}
+        >
+          Comfortable density
+        </Button.Root>
+      </div>
+
+      <CommandMenu.Dialog open={open} onOpenChange={setOpen}>
+        <CommandMenu.InputRow
+          density={density}
+          leading={<Search style={inputIconStyle} strokeWidth={2} aria-hidden />}
+        >
+          <CommandMenu.Input placeholder="Search…" aria-label="Search" />
+        </CommandMenu.InputRow>
+        <CommandMenu.List>
+          <CommandMenu.Group heading='Items size="s"'>
+            <CommandMenu.Item value="short list" size="s" onSelect={() => setOpen(false)}>
+              Compact row
+            </CommandMenu.Item>
+            <CommandMenu.Item value="another s" size="s" onSelect={() => setOpen(false)}>
+              Second compact row
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+          <CommandMenu.Group heading='Items size="m"'>
+            <CommandMenu.Item value="tall row" size="m" onSelect={() => setOpen(false)}>
+              Taller list row
+            </CommandMenu.Item>
+            <CommandMenu.Item value="another m" size="m" onSelect={() => setOpen(false)}>
+              Another size m item
+            </CommandMenu.Item>
+          </CommandMenu.Group>
+        </CommandMenu.List>
+      </CommandMenu.Dialog>
+    </>
+  );
+}

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

@@ -19,6 +19,31 @@
 - **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

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>
+  );
+}