@Admiral-ds/Tables

React-компоненты для отображения и управления табличными данными

Библиотека @admiral-ds/tables предоставляет набор компонентов для создания интерактивных, производительных и кастомизируемых таблиц в React-приложениях. Основана на базовых компонентах из дизайн-системы @admiral-ds/react-ui, что обеспечивает единообразие стилей и поведения с другими элементами интерфейса.

---

Ключевые особенности

1. Гибкость и кастомизация

• Поддержка виртуализации для работы с большими объемами данных.
• Кастомизация ячеек, заголовков и стилей через render-пропы и CSS-переменные.
• Интеграция с компонентами @admiral-ds/react-ui (Button, Checkbox, Tooltip и др.).

2. Производительность

• Оптимизированный рендеринг с помощью React.memo и виртуализации.
• Ленивая подгрузка данных (infinite scroll).

3. Функциональность

• Сортировка, фильтрация, группировка данных.
• Выделение строк, множественный выбор.
• Редактирование ячеек (inline-редакторы).
• Поддержка деревьев (вложенные строки).

4. Типизация и документация

• Полная поддержка TypeScript.
• Готовые примеры в Storybook.

---

Основные компоненты

Компонент	Описание
Table	Базовая таблица с настройкой колонок и данных.
Column	Конфигурация колонки (заголовок, ширина, сортировка, render-ячейки).
TableHeader	Кастомизируемый заголовок с возможностью добавления кнопок/фильтров.
TableBody	Тело таблицы с виртуализацией.
Row, Cell	Компоненты строк и ячеек для кастомизации.
useTable	Хук для управления состоянием таблицы (сортировка, пагинация и т.д.).

---

Пример использования

import { Table, Column } from '@admiral/tables';

const data = [
  { id: 1, name: 'Проект A', status: 'Active' },
  { id: 2, name: 'Проект B', status: 'Pending' },
];

export const MyTable = () => (
  <Table data={data} rowKey="id">
    <Column title="ID" dataKey="id" width={100} />
    <Column title="Название" dataKey="name" />
    <Column 
      title="Статус" 
      dataKey="status"
      renderCell={(value) => <Badge>{value}</Badge>}
    />
  </Table>
);

---

Зависимости

• Базовые компоненты: @admiral/react-ui (стили, кнопки, инпуты).
• Виртуализация: react-window.
• Управление состоянием: Поддержка Redux/MobX (опционально).

---

Установка

npm install @admiral-ds/tables @admiral-ds/react-ui

---

Документация

• Storybook с примерами.
• GitHub (issues, contributions).

---

Почему Admiral Tables?

✅ Совместимость с дизайн-системой Admiral.
✅ Готовые решения для сложных сценариев (фильтры, деревья).
✅ Производительность даже с 10k+ строк.
✅ Гибкость API под любые требования.

Подходит для админ-панелей, CRM, финансовых отчетов и других data-heavy интерфейсов.