# Миграция таблиц на дизайн-систему

Дата: 2026-06-21
Статус: запланировано

## Контекст

Во frontend уже есть дизайн-система `@moex-vibe/design-system` и компонент `DataTable`, но часть экранов
по-прежнему использует legacy-таблицы на сыром HTML и локальных helper-компонентах. Основные зоны
миграции: `DividendsTable`, `ScreenerTable`, `SharePositionTable`, `BondPositionTable`, а также связанные
legacy-элементы вроде `shared/ui/Table` и `TableSkeleton`.

При этом сложные таблицы проекта должны и дальше опираться на `TanStack Table` как на источник
модели данных, сортировки и состояния. Цель фичи — не заменить `TanStack Table`, а стандартизировать
табличный UI через единый дизайн-системный слой.

## Связанные фичи

- Базовая фича дизайн-системы: `docs/features/design-system-foundation/spec.md`
- Связанная DS-миграция: `docs/features/broker-account-sections-ds-migration/spec.md`
- Frontend styling docs: `apps/docs/docs/frontend/styling.md`
- DS docs: `apps/docs/docs/design-system/components.md`

## Цель

Перевести legacy-таблицы frontend на единый дизайн-системный табличный слой, построенный поверх
`TanStack Table`, без изменения бизнес-логики, API-контрактов и доменной модели данных.

## In scope

- Уточнить и при необходимости расширить API `DataTable` в `@moex-vibe/design-system` под реальные
  сценарии проекта.
- Мигрировать существующие таблицы frontend на `DataTable`.
- Сохранить текущие сценарии сортировки, пагинации, кастомных ячеек и row actions.
- Унифицировать loading / empty / error presentation вокруг дизайн-системных компонентов.
- Сократить использование legacy table helpers в `apps/frontend/src/shared/ui`.

## Out of scope

- Изменение бизнес-логики портфелей, скринера, дивидендов, акций и облигаций.
- Перенос предметно-специфичных row/cell-компонентов в дизайн-систему.
- Изменение backend API, query-keys, маршрутизации или структуры доменных данных.
- Замена `TanStack Table` на другой табличный движок.
- Полная миграция всех форм и page sections вне областей, напрямую затронутых таблицами.

## Требования

- `DataTable` должен оставаться обёрткой над `TanStack Table`, а не отдельной несовместимой таблицей.
- Табличный слой должен поддерживать:
  - sortable columns;
  - выравнивание ячеек;
  - custom cell renderers;
  - empty state;
  - loading state / skeleton state;
  - row actions;
  - controlled pagination или pagination slot.
- Доменные таблицы должны сохранять собственные описания колонок и кастомный рендеринг ячеек.
- В приложении нельзя добавлять новые legacy table helpers взамен миграции на DS.
- Во frontend не должны появляться новые прямые MUI table-компоненты.

## Acceptance Criteria

- `DividendsTable`, `ScreenerTable`, `SharePositionTable` и `BondPositionTable` используют
  дизайн-системный табличный слой.
- Сортировка, пагинация и действия над строками работают так же, как до миграции.
- `DataTable` документирован как компонент на базе `TanStack Table`.
- Legacy table helpers не расширяются; после миграции их количество сокращается или они удаляются,
  если остаются без потребителей.
- Изменение не требует корректировки backend-контрактов.
- Для затронутых пакетов проходят тесты, lint и build.