Granularity
⌘K
v1.1.1

Отображение данных

  • Показ и отклик
  • 3 мин
  • компонентов: 9
  • пар: 3

Десять способов показать одни и те же строки. Выбор решается тем, что читатель сделает дальше — сравнит, просмотрит или найдёт одно.

Ревизия 2026-09-05

На этой странице

Что решает

Строки данных можно показать десятью способами, и спор о том, каким именно, обычно оказывается спором о вкусе. Он необязателен: нужная форма следует из того, что читатель собирается делать.

Сравнить значения между записями — нужны колонки. Найти одну запись — нужен поиск и просматриваемый список. Понять одну запись — нужны пары «подпись — значение». Следить за одним числом — нужно, чтобы это число было крупным и одиноким.

Анатомия

Условие для каждого записано в библиотеке, и условия не пересекаются:

  1. Строки сортируют — GrDataTable. Сортировка, фильтры, порядок колонок; самый тяжёлый компонент библиотеки и верный, когда читатель сравнивает.
  2. Ячейки оформляет потребитель — GrTable. Простая таблица, когда данные уже подготовлены и считать для них ничего не нужно.
  3. Строки однородные — GrList. Список, а не таблица: одна колонка одинаковых вещей.
  4. Карточка объекта — GrDescriptionList. Пары «подпись — значение» настоящим списком определений, значения выровнены колонкой.
  5. Контенту нужна поверхность — GrCard. Контейнер, а не раскладка: он говорит «это одно целое», и больше ничего.
  6. Один показатель — главный — GrStatistic. Крупно, с подписью и трендом.
  7. Число со знаком внутри предложения — GrDelta. Знак, тон и стрелка строкой, там где целый блок статистики был бы перебором.
  8. События идут во времени — GrTimeline. Ось и заголовки дней, потому что спрашивают именно «когда».
  9. Данные вложены — GrTree. Раскрытие и выбор по иерархии.

Пример

Так и не так

Так — Таблица, когда значения сравнивают по колонке

Колонки существуют ради сравнения: глаз идёт вниз по одной и находит выброс. Если читатель будет делать именно это — таблица оправдывает свой вес.

Так не надо — Таблица ради одной записи

Таблица из двух колонок «поле / значение» для одного объекта — это список определений, переодетый в сетку: строка заголовков ничего не сообщает, а скринридер объявляет таблицу с одной осмысленной строкой. Нужная форма — GrDescriptionList.

Так — Сортировать на сервере, когда данных много

GrDataTable принимает управляемую сортировку: компонент показывает состояние, данные приходят уже упорядоченными. Отсортировать страницу из ста строк внутри набора из десяти тысяч — значит отсортировать страницу, а не данные, и читатель этого не различит.

Так не надо — Загрузить всё, чтобы казалось быстрым

Десять тысяч строк в DOM — быстрая таблица на быстрой машине и неработающая страница на телефоне. Читателю нужны были первые двадцать и способ найти остальные.

Так — Одно число крупно, остальное — в предложении

GrStatistic для показателя, ради которого сделан экран; GrDelta для изменения, упомянутого внутри строки текста. Два блока статистики рядом соперничают, и проигрывает тот, который был важен.

Так не надо — Цвет как единственный носитель тренда

Зелёный и красный говорят «вверх» и «вниз» одним читателям и ничего — другим. GrDelta несёт знак и стрелку вместе с тоном: цвет повторяет смысл, а не держит его один.

Доступность

Таблица обязана быть таблицей. Заголовки помечены заголовками, и каждый связан со своей колонкой: именно это позволяет скринридеру сказать «Цена, 240», а не просто «240» в какой-то ячейке.

Сортировка — контрол, а не украшение. В GrDataTable заголовок сортируемой колонки это обычная кнопка: доступна с клавиатуры, срабатывает по Enter или Space, и текущее направление объявляется, а не только рисуется стрелкой.

Дерево — клавиатурный паттерн, а не вложенные списки. GrTree реализует контракт APG целиком: стрелки ходят и раскрывают, Home и End прыгают к краям. Половина этого паттерна хуже его отсутствия — роль объявлена, а поведение ей не соответствует.

Чем тяжелее компонент, тем больше его доступности решено за вас — и тем больше остального не решено. Заголовки колонок «#» или «···» губят верную таблицу так же надёжно, как неверная разметка.

Компоненты паттерна

Список строится из frontmatter, а не из ссылок в тексте: переименование слага здесь не теряется.

Клавиатура

Контракты приходят из библиотеки. Паттерн их не пересказывает — он на них ссылается.