feat:generic DataTable(0.4.0)

2026-08-14 14:32:08 +05:00
parent d16e4a2216
commit e3a9b5360c
6 changed files with 265 additions and 1 deletions
@@ -0,0 +1,104 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { DataTable, IDataTableColumn } from './DataTable';
+import { Badge } from '../Badge/Badge';
+
+const meta: Meta = {
+  title: 'Таблицы/DataTable',
+  tags: ['autodocs']
+};
+
+export default meta;
+
+// --- Пример 1: список (только чтение, кликабельные строки, бейдж в ячейке) ---
+interface IRequestRow {
+  id: number;
+  type: string;
+  title: string;
+  status: string;
+}
+
+const REQUESTS: IRequestRow[] = [
+  { id: 3, type: 'Заявка на отпуск', title: 'Отпуск — Тимур Городецкий', status: 'Согласовано' },
+  { id: 7, type: 'Заявка в отдел 1С', title: 'ТЕСТ СОГЛАСОВАНИЯ', status: 'На согласовании' },
+  { id: 18, type: 'Рабочее место', title: 'Раб. место — Тестов Т.Т.', status: 'Выполнение' }
+];
+
+export const RequestList: StoryObj = {
+  render: () => {
+    const columns: IDataTableColumn<IRequestRow>[] = [
+      { key: 'id', title: 'ID', width: '64px' },
+      { key: 'type', title: 'Тип' },
+      { key: 'title', title: 'Название' },
+      {
+        key: 'status',
+        title: 'Статус',
+        render: (r) => (
+          <Badge variant={r.status === 'Согласовано' ? 'success' : r.status === 'Выполнение' ? 'primary' : 'info'}>
+            {r.status}
+          </Badge>
+        )
+      }
+    ];
+    return (
+      <DataTable
+        columns={columns}
+        rows={REQUESTS}
+        rowKey={(r) => r.id}
+        onRowClick={(r) => window.alert(`Открыть заявку #${r.id}`)}
+      />
+    );
+  }
+};
+
+// --- Пример 2: редактируемая табличная часть (инпуты в ячейках) ---
+interface IItem {
+  name: string;
+  qty: string;
+}
+
+export const Editable: StoryObj = {
+  render: () => {
+    const [items, setItems] = useState<IItem[]>([
+      { name: 'Ноутбук', qty: '2' },
+      { name: 'Мышь', qty: '5' }
+    ]);
+    const setCell = (i: number, key: keyof IItem, value: string): void =>
+      setItems(items.map((r, idx) => (idx === i ? { ...r, [key]: value } : r)));
+
+    const columns: IDataTableColumn<IItem>[] = [
+      { key: 'n', title: '№', width: '48px', render: (_r, i) => i + 1 },
+      {
+        key: 'name',
+        title: 'Наименование',
+        render: (r, i) => (
+          <input value={r.name} onChange={(e) => setCell(i, 'name', e.target.value)} style={{ width: '100%' }} />
+        )
+      },
+      {
+        key: 'qty',
+        title: 'Кол-во',
+        align: 'right',
+        render: (r, i) => (
+          <input value={r.qty} onChange={(e) => setCell(i, 'qty', e.target.value)} style={{ width: '80px' }} />
+        )
+      }
+    ];
+    return <DataTable columns={columns} rows={items} />;
+  }
+};
+
+// --- Пример 3: пустое состояние ---
+export const Empty: StoryObj = {
+  render: () => (
+    <DataTable
+      columns={[
+        { key: 'id', title: 'ID' },
+        { key: 'title', title: 'Название' }
+      ]}
+      rows={[]}
+      emptyText="Заявок пока нет"
+    />
+  )
+};