Table

Паттерны

Таблица цен или сравнения

Когда использовать:

• Небольшой набор строк с понятными столбцами должен оставаться семантически табличным.

Заметки о композиции:

• Явно задавайте подписи столбцов в TableHead.
• Предпочитайте fullWidth, когда таблица должна восприниматься как основной блок содержимого.

Компромиссы:

• Высокая семантическая ясность.
• Требует стратегии переполнения на маленьких экранах на стороне потребителя.

import { Check, Minus } from '@vega-ui/icons';
import {
  Icon,
  Table,
  TableBody,
  TableData,
  TableHead,
  TableHeading,
  TableRow,
  VisuallyHidden,
} from '@vega-ui/react';

Сводная таблица с итогами в подвале

Когда использовать:

• Таблице нужны агрегированные итоги или сводные значения.

Заметки о композиции:

• Размещайте сводки в TableFoot, а не придумывайте самодельные строки подвала.
• Выравнивайте числовые столбцы одинаково в теле и подвале.

Компромиссы:

• Итоги семантически связаны с таблицей.
• Может выглядеть тяжеловесно, если в таблице всего одна-две строки.

import {
  Table,
  TableBody,
  TableData,
  TableFoot,
  TableHead,
  TableHeading,
  TableRow,
} from '@vega-ui/react';

const lines = [
  { item: 'Team plan · 12 seats', quantity: 12, unitPrice: 29 },

Таблица в оверлеях проверки

Когда использовать:

• Диалогу или выдвижной панели (Drawer) нужна компактная табличная сводка.

Заметки о композиции:

• Делайте таблицу узкой и удобной для быстрого просмотра.
• Не допускайте, чтобы оверлей зависел от горизонтальной прокрутки, если раскладка не рассчитана на это.

Компромиссы:

• Хорошо подходит для сводок и детализации счетов.
• Менее надёжно для широких наборов данных с множеством столбцов.

import {
  Button,
  Dialog,
  DialogClose,
  DialogContent,
  DialogTrigger,
  Heading,
  Icon,
  IconButton,
  Table,
  TableBody,
  TableData,

Сравнение

Быстрое правило выбора

Используйте Table, когда достаточно нативной семантической структуры таблицы, а взаимодействие в стиле grid не нужно.

Table или DataGrid

Используйте Table, когда:

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

Используйте DataGrid, когда:

• функции нужны более богатое взаимодействие с клавиатуры, выбор или поведение грида

Главный компромисс: Table проще и семантичнее, а DataGrid справляется с более тяжёлыми моделями взаимодействия.

Table или DataGridSelectable

Используйте Table, когда:

• выбор строк не входит в основную модель взаимодействия

Используйте DataGridSelectable, когда:

• пользователям нужен явный выбор строк

Главный компромисс: Table избегает сложности грида, а DataGridSelectable добавляет семантику и контролы выбора.

Выбирайте этот компонент, когда

• Данные табличные и в основном только для чтения.
• Нативная семантическая структура важнее продвинутого взаимодействия.
• Таблица должна оставаться простой и предсказуемой.

Не выбирайте этот компонент, когда

• Функции нужно поведение клавиатуры в стиле grid.
• Центральную роль играют выбор, встроенное редактирование или более богатое взаимодействие со строками.
• Интерфейс по сути — грид данных, а не семантическая таблица.

Решение проблем

Таблице, вероятно, стоит быть DataGrid

Симптом

У функции постоянно добавляются требования к выбору, встроенному редактированию или взаимодействию на уровне ячеек.

Вероятная причина

Table используется для более богатой модели взаимодействия, чем та, на которую он рассчитан.

Как проверить

• Перечислите необходимые взаимодействия для строк и ячеек.
• Сравните их с поведением семейства DataGrid.

Исправление

• Переходите на DataGrid, когда взаимодействие в стиле grid становится центральным.
• Оставляйте Table для семантических раскладок, в основном только для чтения.

Столбцы обрезаются на маленьких экранах

Симптом

На узких раскладках таблицу трудно читать или столбцы пропадают.

Вероятная причина

Раскладка потребителя не предусматривает явной стратегии переполнения или адаптивности.

Как проверить

• Проверьте реальный продакшен-контейнер на меньшей ширине.
• Проверьте, есть ли у таблицы обёртка с прокруткой или альтернативная мобильная раскладка.

Исправление

• Добавьте обёртку переполнения или адаптивный запасной вариант на стороне потребителя.
• Сократите лишние столбцы в узких контекстах.

Выравнивание в ячейках выглядит неправильно

Симптом

Ячейки заголовков и данных не выровнены, или числовые значения выглядят визуально несогласованно.

Вероятная причина

Выбор dataAlign и краевых отступов не соответствует задуманной модели содержимого.

Как проверить

• Сравните выравнивание заголовка и данных в одном столбце.
• Проверьте отступы первой и последней ячейки с включённым и выключенным edgePadded.

Исправление

• Используйте одну согласованную стратегию dataAlign для всей таблицы.
• Меняйте краевые отступы, только если окружающая раскладка уже обеспечивает нужные промежутки.