Таблицы

Классы

<table class="gr-table gr-table-striped gr-table-hover">
  <caption>Подпись</caption>
  <thead><tr><th scope="col">Пакет</th>…</tr></thead>
  <tbody><tr><td>griffincss-core</td>…</tr></tbody>
</table>

Полная сетка и плотность

Прокрутка и липкая шапка

Широкая таблица не сжимается ниже своего содержимого. Без обёртки вбок уезжает вся страница, а не одна таблица — .gr-table-wrap оставляет прокрутку внутри себя.

<div class="gr-table-wrap" tabindex="0" role="region" aria-label="Данные">
  <table class="gr-table gr-table-sticky">…</table>
</div>

Карточки вместо строк

Таблице кабинета — заказы, транзакции, бонусы, состав заказа — на телефоне места нет: пять колонок в 375 px не помещаются, а прокрутка вбок прячет половину строки. .gr-table-stack ниже порога превращает каждую строку в карточку: ячейки в столбик, у каждой — подпись колонки из data-label, строка обведена и скруглена как контейнер (--gr-radius-container). Шапка при этом не display: none — она ужата в пиксель, как .gr-sr-only, и программа чтения с экрана по-прежнему связывает ячейки с заголовками колонок.

<table class="gr-table gr-table-stack-md">
  <thead>
    <tr><th scope="col">Заказ</th><th scope="col">Дата</th><th scope="col">Статус</th><th scope="col" class="gr-text-end">Сумма</th></tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Заказ">#1042</td>
      <td data-label="Дата">12.09.2026</td>
      <td data-label="Статус"><span class="gr-badge gr-badge-success">Доставлен</span></td>
      <td data-label="Сумма" class="gr-text-end gr-tabular-nums">24 800 ₽</td>
    </tr>
  </tbody>
</table>

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

Классы таблицы держат каркас, а живой её делают соседи в ячейках: аватары, бейджи, кнопки-иконки, выравнивание чисел. Два рецепта ниже — самая тиражируемая таблица админки и её противоположность, тихий прайс-лист.

Таблица пользователей: составные ячейки

Первая колонка — мини медиа-объект: .gr-avatar-sm и стопка «имя + почта» двумя строками разного веса. Статус — бейдж со смысловым цветом, действия — .gr-btn-icon .gr-btn-ghost с .gr-sr-only-подписью, прижатые в конец колонки .gr-text-end. Всё это лежит в обычных td — таблице достаточно .gr-table .gr-table-hover и обёртки с прокруткой на узкий экран.

<div class="gr-table-wrap" tabindex="0" role="region" aria-label="Пользователи">
  <table class="gr-table gr-table-hover">
    <thead><tr><th scope="col">Пользователь</th><th scope="col">Статус</th><th scope="col" class="gr-text-end">Действия</th></tr></thead>
    <tbody>
      <tr>
        <td>
          <span class="gr-flex gr-flex-items-center gr-gap-sm">
            <span class="gr-avatar gr-avatar-sm">АК</span>
            <span><span class="gr-block gr-font-medium">Анна Ковалёва</span>
            <span class="gr-block gr-text-xs gr-text-ink-secondary">anna@example.ru</span></span>
          </span>
        </td>
        <td><span class="gr-badge gr-badge-success">Активна</span></td>
        <td class="gr-text-end">
          <button class="gr-btn gr-btn-icon gr-btn-ghost">✎<span class="gr-sr-only">Редактировать</span></button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Прайс-лист с числами в конце строки

Счёт, спецификация, отчёт: две-три колонки, числа выровнены в конец строки (.gr-text-end — мелочь, без которой разряды не совпадают и колонку невозможно сканировать взглядом), плотность — .gr-table-compact, итог — tfoot с .gr-font-semibold. Никакой зебры: в коротком списке она шумит, хватает разделителей строк.

<table class="gr-table gr-table-compact">
  <thead><tr><th scope="col">Позиция</th><th scope="col" class="gr-text-end">Кол-во</th><th scope="col" class="gr-text-end">Сумма</th></tr></thead>
  <tbody>
    <tr><td>Кресло «Дюна»</td><td class="gr-text-end">2</td><td class="gr-text-end">24 800 ₽</td></tr>
    …
  </tbody>
  <tfoot>
    <tr class="gr-font-semibold"><td>Итого</td><td class="gr-text-end">4</td><td class="gr-text-end">33 900 ₽</td></tr>
  </tfoot>
</table>

С подключённым griffinjs.js

Сортировка появилась не потому, что её попросили. В списке того, чего здесь не будет (TODO.md в репозитории), сортировка таблицы и выбор даты стояли рядом с одним доводом — «это приложение, а не разметка». Для выбора даты довод верен: модель состояния, календарь, локали, клавиатура, мобильный ввод. Для сортировки он не работает: это перестановка строк по признаку, который уже объявлен в разметке, с aria-sort в качестве состояния и Intl.Collator в качестве сравнения. Ни модели, ни хранилища, ни сети. Пересмотрен один довод, а не решение «экосистемы не будет».

Что обязательно, а что нет

<table class="gr-table gr-table-hover" data-gr-sortable>
  <thead>
    <tr>
      <th scope="col" aria-sort="none">Город</th>
      <th scope="col" aria-sort="none">Дата</th>
      <th scope="col" aria-sort="none" class="gr-text-end">Сумма</th>
      <th scope="col">Действия</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Пермь</td>
      <td>2026-08-30</td>
      <td class="gr-text-end" data-gr-sort-value="24800">24 800 ₽</td>
      <td>…</td>
    </tr>
  </tbody>
</table>

Как сравниваются значения

Значение берётся из data-gr-sort-value, а если атрибута нет — из текста ячейки. Тип столбца решается один раз, по всем его ячейкам сразу: сравнение «числа с числом, буквы с буквами» на каждой паре не давало бы порядка вовсе.

Нажатие, клавиатура и круг из трёх состояний

Нажатие на заголовок ведёт aria-sort по кругу: нет → по возрастанию → по убыванию → нет. Третье нажатие возвращает порядок, в котором таблица пришла: отменить сортировку иначе нечем, кроме перезагрузки страницы. Отсортированным при этом объявлен ровно один столбец — у соседнего aria-sort возвращается в none.

Круг замыкается только там, где порядок навёл сам виджет. У столбца, который объявил сервер, «снять сортировку» вернуло бы тот же самый порядок: нажатие выглядело бы сломанным, а aria-sort сообщал бы «не отсортирована» об отсортированной таблице. Поэтому первое нажатие по такому столбцу — всегда разворот, а круг начинается после него.

С клавиатуры заголовок доступен так же, как мышью: под скриптом он получает tabindex="0", а Enter и Пробел делают то же, что щелчок (прокрутка страницы пробелом при этом не срабатывает — иначе таблица уезжала бы из виду в момент сортировки). Если вы предпочитаете разметку по образцу WAI-ARIA и ставите в заголовок свою <button>, виджет это видит: своего tabindex он тогда не добавляет, чтобы Tab не останавливался на одной ячейке дважды, а щелчок по кнопке всплывает до таблицы сам.

Без скрипта

Таблица остаётся таблицей. Заголовок не получает ни tabindex, ни курсора-указателя: предлагать нажатие, которое ничего не сделает, нельзя. Указатель направления при этом остаётся — он рисуется из aria-sort, а не из скрипта, и потому одинаково работает у таблицы, отсортированной сервером. Правило живёт в _table.scss — в компоненте, а не в griffinjs.css: серверу для aria-sort слой не нужен.

Предел виджета

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

Что осталось за границей и решается разметкой: сортировка идёт по первому <tbody>, объединённые ячейки (colspan) в шапке сдвигают счёт столбцов, а сортировать по строке-заголовку (<th> внутри <tbody>) виджет не умеет. Таблицы, которым нужно больше, — это уже таблица-приложение, и её место в коде потребителя.