Table

Пакет @cloud-ru/ds-table предоставляет таблицы поверх @tanstack/react-table: полнофункциональные Table / ServerTable и preset-обёртки с упрощённым API.

Архитектура пакета

defineColumns, statusColumn и actionsColumn — публичные утилиты: ими собирают columnDefinitions для Table напрямую. Preset-ы дают тот же результат через упрощённые пропсы (columns, statusColumn, rowActions в AdminTable).

ServerTable — обёртка над Table для серверной пагинации, сортировки и фильтрации.

Какой сценарий выбрать

Компоненты

СценарийКомпонент
Полный контроль над APITable
Серверная пагинацияServerTable
Серверный список сущностей + queryFnEntitiesTable
Простой список: данные + колонки + пагинацияSimpleTable
Админка: поиск, фильтры, выбор, статус, действияAdminTable
Иерархия (дерево)TreeTable
Бесконечная прокруткаInfiniteTable

Утилиты

СценарийУтилита
Декларативные колонкиdefineColumns
Колонка статусаstatusColumn
Колонка действий строкиactionsColumn

Каждый preset доступен в двух формах: компонент (<SimpleTable />) и хук (useSimpleTableProps() + <Table />).

Карточный режим (headlineKey, defaultView, view) — сквозная опция всех preset-ов, не отдельный компонент.

Установка

pnpm add @cloud-ru/ds-table
import { Table, ServerTable, SimpleTable, defineColumns } from '@cloud-ru/ds-table';

Смотри также

  • Pagination — отдельный компонент пагинации.
  • InfoBlock — основа пустых состояний таблицы.
  • Card — самостоятельные карточки вне таблицы.