prime-ui-kit 0.9.0 → 0.9.2

package/src/components/data-table/examples/columns-visibility.tsx

@@ -0,0 +1,167 @@
+/** Orders with a column chooser in the toolbar: fewer columns, less sideways scrolling; the order number always stays — `hiddenColumns`, `hideable`, `toolbar`. */
+import {
+  Badge,
+  Button,
+  DataTable,
+  type DataTableColumn,
+  Dropdown,
+  Icon,
+  Typography,
+} from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Status = "paid" | "shipped" | "waiting";
+type Order = {
+  id: string;
+  client: string;
+  manager: string;
+  city: string;
+  status: Status;
+  date: string;
+  items: number;
+  total: number;
+};
+
+const STATUS: Record<Status, { label: string; color: "green" | "blue" | "orange" }> = {
+  paid: { label: "Оплачен", color: "green" },
+  shipped: { label: "Отгружен", color: "blue" },
+  waiting: { label: "Ждёт оплаты", color: "orange" },
+};
+
+const ORDERS: Order[] = [
+  {
+    id: "№ 1040",
+    client: "ООО «Северный ветер»",
+    manager: "Ольга Смирнова",
+    city: "Москва",
+    status: "paid",
+    date: "02.10.2026",
+    items: 12,
+    total: 184_500,
+  },
+  {
+    id: "№ 1041",
+    client: "ИП Козлов",
+    manager: "Игорь Волков",
+    city: "Казань",
+    status: "waiting",
+    date: "03.10.2026",
+    items: 3,
+    total: 27_900,
+  },
+  {
+    id: "№ 1042",
+    client: "АО «Технопарк»",
+    manager: "Ольга Смирнова",
+    city: "Санкт-Петербург",
+    status: "shipped",
+    date: "04.10.2026",
+    items: 40,
+    total: 612_000,
+  },
+  {
+    id: "№ 1043",
+    client: "ООО «Лето»",
+    manager: "Мария Орлова",
+    city: "Екатеринбург",
+    status: "paid",
+    date: "05.10.2026",
+    items: 7,
+    total: 58_350,
+  },
+  {
+    id: "№ 1044",
+    client: "ООО «Гранит»",
+    manager: "Игорь Волков",
+    city: "Новосибирск",
+    status: "shipped",
+    date: "06.10.2026",
+    items: 18,
+    total: 241_800,
+  },
+];
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Order>[] = [
+  { id: "id", header: "Заказ", accessor: "id", hideable: false },
+  { id: "client", header: "Клиент", accessor: "client" },
+  { id: "manager", header: "Менеджер", accessor: "manager" },
+  { id: "city", header: "Город", accessor: "city" },
+  {
+    id: "status",
+    header: "Статус",
+    cell: (row) => (
+      <Badge.Root color={STATUS[row.status].color}>{STATUS[row.status].label}</Badge.Root>
+    ),
+  },
+  { id: "date", header: "Дата", accessor: "date", numeric: true },
+  { id: "items", header: "Позиций", accessor: "items", numeric: true },
+  {
+    id: "total",
+    header: "Сумма",
+    accessor: "total",
+    sortable: true,
+    numeric: true,
+    cell: (row) => RUB.format(row.total),
+  },
+];
+
+export default function DataTableColumnsVisibilityExample() {
+  const [hidden, setHidden] = React.useState<string[]>(["city", "items"]);
+  const shown = COLUMNS.length - hidden.length;
+
+  const toggle = (id: string, visible: boolean) =>
+    setHidden((current) => (visible ? current.filter((c) => c !== id) : [...current, id]));
+
+  return (
+    <DataTable
+      columns={COLUMNS}
+      hiddenColumns={hidden}
+      rows={ORDERS}
+      getRowKey={(row) => row.id}
+      stickyFirstColumn
+      toolbar={
+        <div className={styles.toolbar}>
+          <Typography as="span" variant="body-s" tone="secondary">
+            Заказы за неделю: {ORDERS.length}
+          </Typography>
+          <Dropdown.Root>
+            <Dropdown.Trigger>
+              <Button.Root variant="outline" tone="neutral" size="s">
+                <Button.Icon>
+                  <Icon name="view.preview" />
+                </Button.Icon>
+                Колонки: {shown} из {COLUMNS.length}
+              </Button.Root>
+            </Dropdown.Trigger>
+            <Dropdown.Content align="end" size="s">
+              <Dropdown.Group label="Колонки таблицы">
+                {COLUMNS.map((column) => (
+                  <Dropdown.CheckboxItem
+                    key={column.id}
+                    checked={!hidden.includes(column.id)}
+                    disabled={column.hideable === false}
+                    onCheckedChange={(visible) => toggle(column.id, visible)}
+                  >
+                    {column.header}
+                  </Dropdown.CheckboxItem>
+                ))}
+              </Dropdown.Group>
+              <Dropdown.Separator />
+              <Dropdown.Item disabled={hidden.length === 0} onSelect={() => setHidden([])}>
+                Показать все
+              </Dropdown.Item>
+            </Dropdown.Content>
+          </Dropdown.Root>
+        </div>
+      }
+    />
+  );
+}

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

@@ -1,45 +1,65 @@
-/** `fillWidth` (default) stretches the table to its container; `fillWidth={false}` sizes it by content; a column can be centered with `align="center"`. Use content width for short lookup tables inside wide layouts. */
-
+/** A short lookup table sized by its content with a centered column, and a `grow` column that takes the free width and wraps — `fullWidth`, `align`, `grow`. */
 import { DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
-type Task = { id: string; task: string; hours: number };
+type Task = { id: string; task: string; hours: number; note: string };
 
-const rows: Task[] = [
-  { id: "T-12", task: "Сверстать отчёт по спринту", hours: 3 },
-  { id: "T-13", task: "Проверить миграции БД", hours: 1.5 },
-  { id: "T-14", task: "Обновить подсказки в форме входа", hours: 2 },
+const TASKS: Task[] = [
+  {
+    id: "T-12",
+    task: "Сверстать отчёт по спринту",
+    hours: 3,
+    note: "Сводка по закрытым задачам, графики скорости команды и список того, что переносится в следующий спринт.",
+  },
+  {
+    id: "T-13",
+    task: "Проверить миграции БД",
+    hours: 1.5,
+    note: "Прогнать миграции на копии продовой базы и сравнить время выполнения с прошлым релизом.",
+  },
+  {
+    id: "T-14",
+    task: "Обновить подсказки в форме входа",
+    hours: 2,
+    note: "Тексты ошибок и подсказок под полями, согласовать формулировки с поддержкой.",
+  },
 ];
 
-const hours = new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 1 });
+const HOURS = new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 1 });
 
-const columns: DataTableColumn<Task>[] = [
+const LOOKUP_COLUMNS: DataTableColumn<Task>[] = [
   { id: "id", header: "Задача", accessor: "id" },
   { id: "task", header: "Описание", accessor: "task" },
-  { id: "hours", header: "Часы", align: "center", cell: (row) => hours.format(row.hours) },
+  { id: "hours", header: "Часы", align: "center", cell: (row) => HOURS.format(row.hours) },
+];
+
+const NOTE_COLUMNS: DataTableColumn<Task>[] = [
+  { id: "id", header: "Задача", accessor: "id" },
+  { id: "task", header: "Название", accessor: "task" },
+  { id: "note", header: "Комментарий", accessor: "note", grow: true },
 ];
 
 export default function DataTableContentWidthExample() {
   return (
-    <div className={styles.stack}>
-      <div className={styles.group}>
-        <Typography.Root variant="code" tone="muted">
-          fillWidth (по умолчанию)
-        </Typography.Root>
-        <DataTable.Root columns={columns} rows={rows} getRowKey={(row) => row.id} />
-      </div>
-      <div className={styles.group}>
-        <Typography.Root variant="code" tone="muted">
-          fillWidth=&#123;false&#125;
-        </Typography.Root>
-        <DataTable.Root
-          columns={columns}
-          rows={rows}
+    <>
+      <div className={styles.specimen}>
+        <DataTable
+          columns={LOOKUP_COLUMNS}
+          rows={TASKS}
           getRowKey={(row) => row.id}
-          fillWidth={false}
+          fullWidth={false}
         />
+        <Typography as="span" variant="caption" tone="muted">
+          fullWidth=&#123;false&#125; · align="center"
+        </Typography>
+      </div>
+      <div className={styles.specimen}>
+        <DataTable columns={NOTE_COLUMNS} rows={TASKS} getRowKey={(row) => row.id} />
+        <Typography as="span" variant="caption" tone="muted">
+          grow
+        </Typography>
       </div>
-    </div>
+    </>
   );
 }

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

@@ -0,0 +1,56 @@
+/** Sort and page 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`. */
+import { DataTable, type DataTableColumn, type DataTableSortState } from "prime-ui-kit";
+import * as React from "react";
+
+type Order = { id: number; customer: string; city: string; total: number };
+
+const CUSTOMERS = ["Анна Соколова", "Борис Кравец", "Вера Львова", "Глеб Миронов", "Дарья Носова"];
+const CITIES = ["Москва", "Казань", "Самара", "Томск", "Пермь"];
+
+const ORDERS: Order[] = Array.from({ length: 23 }, (_, i) => ({
+  id: 5000 + i,
+  customer: CUSTOMERS[i % CUSTOMERS.length],
+  city: CITIES[(i * 3) % CITIES.length],
+  total: 1200 + ((i * 7919) % 48_000),
+}));
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Order>[] = [
+  { id: "id", header: "№", accessor: "id", sortable: true, numeric: true, width: "5rem" },
+  { id: "customer", header: "Покупатель", accessor: "customer", sortable: true },
+  { id: "city", header: "Город", accessor: "city", sortable: true },
+  {
+    id: "total",
+    header: "Сумма",
+    accessor: "total",
+    sortable: true,
+    numeric: true,
+    cell: (row) => RUB.format(row.total),
+  },
+];
+
+export default function DataTableControlledExample() {
+  const [sort, setSort] = React.useState<DataTableSortState>({ columnId: "total", order: "desc" });
+  const [page, setPage] = React.useState(1);
+
+  return (
+    <DataTable
+      columns={COLUMNS}
+      rows={ORDERS}
+      getRowKey={(row) => row.id}
+      sort={sort}
+      onSortChange={(next) => {
+        setSort(next);
+        setPage(1);
+      }}
+      page={page}
+      onPageChange={setPage}
+      pageSize={5}
+    />
+  );
+}

package/src/components/data-table/examples/detail-panel.tsx

@@ -1,5 +1,4 @@
-/** `renderExpanded` draws a full-width detail row under an expanded row, aligned with the first content column; with `stickyFirstColumn` the toggle sticks too. Use to show order details without leaving the list. */
-
+/** Order details in a full-width row under an expanded order, aligned with the first content column — `renderExpanded`, `defaultExpanded`. */
 import { DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -11,10 +10,10 @@ type Order = {
   date: string;
   total: number;
   address: string;
-  items: { name: string; qty: number }[];
+  items: string;
 };
 
-const rows: Order[] = [
+const ORDERS: Order[] = [
   {
     id: "o1",
     number: "№ 10 482",
@@ -22,10 +21,7 @@ const rows: Order[] = [
     date: "07.10.26",
     total: 12_480,
     address: "Москва, ул. Тверская, 12, кв. 45",
-    items: [
-      { name: "Кабель USB-C, 2 м", qty: 2 },
-      { name: "Док-станция", qty: 1 },
-    ],
+    items: "Кабель USB-C, 2 м × 2, док-станция × 1",
   },
   {
     id: "o2",
@@ -34,7 +30,7 @@ const rows: Order[] = [
     date: "06.10.26",
     total: 34_900,
     address: "Санкт-Петербург, Невский пр., 28",
-    items: [{ name: 'Монитор 27"', qty: 1 }],
+    items: 'Монитор 27" × 1',
   },
   {
     id: "o3",
@@ -43,19 +39,19 @@ const rows: Order[] = [
     date: "05.10.26",
     total: 4_350,
     address: "Казань, ул. Баумана, 7",
-    items: [{ name: "Клавиатура", qty: 1 }],
+    items: "Клавиатура × 1",
   },
 ];
 
-const rub = new Intl.NumberFormat("ru-RU", {
+const RUB = new Intl.NumberFormat("ru-RU", {
   style: "currency",
   currency: "RUB",
   maximumFractionDigits: 0,
 });
 
-const columns: DataTableColumn<Order>[] = [
+const COLUMNS: DataTableColumn<Order>[] = [
   { id: "number", header: "Заказ", accessor: "number", minWidth: "8rem" },
-  { id: "customer", header: "Покупатель", accessor: "customer", sortable: true, minWidth: "12rem" },
+  { id: "customer", header: "Покупатель", accessor: "customer", sortable: true },
   { id: "date", header: "Дата", accessor: "date", numeric: true },
   {
     id: "total",
@@ -63,44 +59,43 @@ const columns: DataTableColumn<Order>[] = [
     accessor: "total",
     sortable: true,
     numeric: true,
-    cell: (row) => rub.format(row.total),
+    cell: (row) => RUB.format(row.total),
   },
 ];
 
 export default function DataTableDetailPanelExample() {
   return (
-    <DataTable.Root
-      columns={columns}
-      rows={rows}
+    <DataTable
+      columns={COLUMNS}
+      rows={ORDERS}
       getRowKey={(row) => row.id}
       getRowLabel={(row) => row.number}
       renderExpanded={(row) => (
         <dl className={styles.details}>
           <dt>
-            <Typography.Root as="span" variant="body-s" tone="muted">
+            <Typography as="span" variant="body-s" tone="muted">
               Адрес доставки
-            </Typography.Root>
+            </Typography>
           </dt>
           <dd>
-            <Typography.Root as="span" variant="body-s">
+            <Typography as="span" variant="body-s">
               {row.address}
-            </Typography.Root>
+            </Typography>
           </dd>
           <dt>
-            <Typography.Root as="span" variant="body-s" tone="muted">
+            <Typography as="span" variant="body-s" tone="muted">
               Состав
-            </Typography.Root>
+            </Typography>
           </dt>
           <dd>
-            <Typography.Root as="span" variant="body-s">
-              {row.items.map((item) => `${item.name} × ${item.qty}`).join(", ")}
-            </Typography.Root>
+            <Typography as="span" variant="body-s">
+              {row.items}
+            </Typography>
           </dd>
         </dl>
       )}
       defaultExpanded={["o1"]}
-      stickyFirstColumn
-      showPagination={false}
+      paging="none"
     />
   );
 }

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

@@ -1,21 +1,6 @@
-/* Layout only: text roles and colors come from Typography. */
+/* Layout of the DataTable scenarios: semantic tokens only. */
 
-.stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-6);
-  width: 100%;
-  min-width: 0;
-}
-
-.group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-2);
-  min-width: 0;
-}
-
-/* Two groups pushed to the edges; they wrap on narrow widths. */
+/* Toolbar content: two groups pushed to the edges; they wrap on narrow widths. */
 .toolbar {
   display: flex;
   flex-wrap: wrap;
@@ -26,115 +11,52 @@
   min-width: 0;
 }
 
-.toolbarGroup {
+.filters {
   display: flex;
+  flex: 1 1 auto;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--prime-space-2);
   min-width: 0;
 }
 
-/* The leading group takes the free space so the search can grow. */
-.toolbarGrow {
-  flex: 1 1 auto;
-}
-
-/* Grows from 12rem, at most 20rem. */
+/* 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);
 }
 
-.tabular {
-  font-variant-numeric: tabular-nums;
-}
-
-/* Columns of at least 18rem. */
-.statesGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-24) * 3)), 1fr));
-  gap: var(--prime-space-4);
-  width: 100%;
-  min-width: 0;
-}
-
-.errorBody {
+/* sizes / appearance / states: a table with its caption under it; specimens kept apart. */
+.specimens {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: var(--prime-space-2);
-}
-
-/* The host stretches children that contain a table; center the 320px probe inside. */
-.narrowFrame {
-  display: flex;
-  justify-content: center;
+  gap: var(--prime-space-6);
   width: 100%;
-}
-
-/* 320px: the smallest supported viewport. */
-.narrow {
-  width: min(100%, calc(var(--prime-space-20) * 4));
   min-width: 0;
 }
 
-.dashboard {
+.specimen {
   display: flex;
   flex-direction: column;
-  gap: var(--prime-space-4);
-  width: 100%;
+  gap: var(--prime-space-2);
   min-width: 0;
 }
 
-.dashboardHeader {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--prime-space-3);
-}
-
-/* KPI columns of at least 13rem. */
-.kpis {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-4) * 13)), 1fr));
-  gap: var(--prime-space-3);
-}
-
-/* Avatar → text inside a table cell: the cell gap (`--prime-space-2`), the same step DataTable
- * uses to indent sub-rows (avatar + gap), so child text lines up under the parent's text. */
-.customer {
+/* Avatar → name and note in a cell; the cell gap equals the sub-row indent step (avatar + gap). */
+.person {
   display: flex;
   align-items: center;
   gap: var(--prime-space-2);
   min-width: 0;
 }
 
-.customerText {
+.personText {
   display: flex;
   flex-direction: column;
   min-width: 0;
 }
 
-/* Child-row icon box: same footprint as the parent's avatar keeps the text column aligned. */
-.iconBox {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: var(--prime-avatar-m);
-  height: var(--prime-avatar-m);
-  border-radius: var(--prime-radius-m);
-  background: var(--prime-color-fill-muted);
-  color: var(--prime-color-text-secondary);
-}
-
-.iconBox svg {
-  width: var(--prime-icon-s);
-  height: var(--prime-icon-s);
-}
-
 .details {
   display: grid;
   grid-template-columns: max-content minmax(0, 1fr);
@@ -146,3 +68,10 @@
   margin: 0;
   min-width: 0;
 }
+
+/* 320 px: the smallest supported viewport. */
+.narrow {
+  width: min(100%, calc(var(--prime-space-20) * 4));
+  min-width: 0;
+  margin-inline: auto;
+}

package/src/components/data-table/examples/infinite-scroll.tsx

@@ -1,21 +1,20 @@
-/** `infiniteScroll` reveals loaded rows in batches (`infiniteBatchSize`), then calls `onLoadMore` while `hasMore`; `loadingMore` shows the footer status. Use for logs and feeds instead of pages. */
-
+/** An audit log that reveals loaded rows in batches and then asks the server for more — `paging`, `infiniteBatchSize`, `hasMore`, `loadingMore`, `onLoadMore`. */
 import { DataTable, type DataTableColumn } from "prime-ui-kit";
 import * as React from "react";
 
 type LogRow = { id: number; event: string; user: string; time: string };
 
-const events = ["Вход в систему", "Изменён тариф", "Загружен файл", "Создан отчёт", "Выход"];
-const users = ["anna", "boris", "vera", "gleb", "darya"];
+const EVENTS = ["Вход в систему", "Изменён тариф", "Загружен файл", "Создан отчёт", "Выход"];
+const USERS = ["anna", "boris", "vera", "gleb", "darya"];
 
-const all: LogRow[] = Array.from({ length: 90 }, (_, i) => ({
+const LOG: LogRow[] = Array.from({ length: 90 }, (_, i) => ({
   id: i + 1,
-  event: events[i % events.length],
-  user: users[(i * 2) % users.length],
+  event: EVENTS[i % EVENTS.length],
+  user: USERS[(i * 2) % USERS.length],
   time: `${String(9 + (i % 10)).padStart(2, "0")}:${String((i * 7) % 60).padStart(2, "0")}`,
 }));
 
-const columns: DataTableColumn<LogRow>[] = [
+const COLUMNS: DataTableColumn<LogRow>[] = [
   { id: "id", header: "#", accessor: "id", numeric: true, width: "4rem" },
   { id: "event", header: "Событие", accessor: "event" },
   { id: "user", header: "Пользователь", accessor: "user" },
@@ -23,27 +22,27 @@ const columns: DataTableColumn<LogRow>[] = [
 ];
 
 export default function DataTableInfiniteScrollExample() {
-  const [count, setCount] = React.useState(20);
+  const [loaded, setLoaded] = React.useState(20);
   const [loadingMore, setLoadingMore] = React.useState(false);
-  const hasMore = count < all.length;
+  const hasMore = loaded < LOG.length;
 
-  const loadMore = React.useCallback(() => {
+  const loadMore = () => {
     if (loadingMore || !hasMore) return;
     setLoadingMore(true);
     window.setTimeout(() => {
-      setCount((n) => Math.min(n + 20, all.length));
+      setLoaded((count) => Math.min(count + 20, LOG.length));
       setLoadingMore(false);
     }, 600);
-  }, [hasMore, loadingMore]);
+  };
 
   return (
-    <DataTable.Root
-      columns={columns}
-      rows={all.slice(0, count)}
+    <DataTable
+      columns={COLUMNS}
+      rows={LOG.slice(0, loaded)}
       getRowKey={(row) => row.id}
+      paging="infinite"
       stickyHeader
-      infiniteScroll
-      initialVisibleRows={10}
+      pageSize={10}
       infiniteBatchSize={10}
       hasMore={hasMore}
       loadingMore={loadingMore}