GrTable

Контейнер overflow-x-auto всегда стоит в таб-порядке (tabindex="0"). Раньше это зависело от regionLabel: широкую таблицу без метки нельзя было проскроллить с клавиатуры вовсе — прямое нарушение WCAG 2.1.1.

regionLabel по-прежнему включает role="region" и даёт области имя, но к достижимости скролла отношения не имеет.

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

Только первая, и это не упрощение. Смещение left со второй колонки равно сумме ширин предыдущих, а ячейки принадлежат вам: реестра ячеек и замеров у «тонкого» контейнера нет. Многоколоночное закрепление есть у GrDataTable — он знает свои колонки и меряет смещения сам.

Фон липкой ячейки непрозрачен, иначе сквозь неё видно уезжающее. Наследовать фон строки не выйдет, хотя это и просится: оттенки striped и hoverable полупрозрачны, и сквозь такую ячейку числа просвечивают — проверено глазами. Поэтому те же оттенки собираются заново поверх карточки: цвет тот же, дыры нет. Полосатость и подсветка в первой колонке работают наравне с остальными, ничего дописывать не нужно.

Тень справа — признак, что под колонкой что-то уезжает. Рамка не годится: она сдвинула бы сетку. Значение настраивается токеном --gr-table-sticky-column-shadow.

Горизонтальной прокрутки min-w-full сам по себе не даёт: нужны tableMinWidth либо white-space: nowrap на ячейках.

<GrTable :loading="pending" :column-count="4">
  <template #header>…</template>
  <tr v-for="row in rows" :key="row.id">…</tr>
  <template #empty>Ничего не найдено</template>
</GrTable>

Пустоту таблица определяет сама — по содержимому слота. columnCount нужен служебной строке: без него colspan не растянется на всю ширину.

loading рисует строки-скелетоны и помечает контейнер aria-busy; слот #loading заменяет их целиком. Загрузка сильнее пустоты — иначе таблица мигала бы текстом «пока пусто» на каждом запросе.

const table = ref<InstanceType<typeof GrTable>>()

table.value?.scrollToRow(42) // индекс строки содержимого; false — строки нет
table.value?.scrollTo({ top: 0 })

scrollToRow(index, options?) принимает индекс строки в разметке — строки таблица не рендерит и ключей у них не знает, поэтому адресация только позиционная. Считаются строки содержимого: служебные skeleton- и empty-строки не адресуются, в состояниях loading и «пусто» метод возвращает false, как и при индексе вне диапазона. У GrDataTable одноимённый метод работает по ключу строки — при миграции аргумент меняет смысл.

striped и hoverable вешаются на таблицу целиком, а не на каждую ячейку: разметку строк потребитель пишет сам, и требовать от него классов было бы странно. Не на <tbody> — групп строк в теле может быть много (см. ниже), и правило, привязанное к одной, не увидело бы чередование между ними.

Sticky-заголовок использует локальный z-[1], липкая колонка — z-[2], оба внутри собственного контейнера — к шкале --gr-z-* он отношения не имеет, это описано в ../z-index.md.

Полосатость и подсветка написаны от <tbody> и считают прямых потомков. Дописав к строке вторую — раскрытые подробности, служебную распорку, — вы сдвинули бы чётность у всех строк ниже и получили бы подсветку под курсором там, где нажимать не на что.

Пометьте такую строку data-gr-table-off-grid:

<tr>
  <td>Заказ 42</td>
</tr>

<tr data-gr-table-off-grid>
  <td colspan="3">Подробности заказа</td>
</tr>

Атрибут снимает с неё оба правила и выключает её из счёта чётности: селектор написан как nth-child(even of :not([data-gr-table-off-grid])), а не просто с фильтром — обычный :not() убрал бы полосу с самой строки, но нумерацию соседей не изменил.

Связывать пару строк для скринридера — тоже ваша забота: кнопке нужен aria-expanded и aria-controls на id строки подробностей. Готовое раскрытие со своим состоянием, подгрузкой и ARIA есть у GrDataTable — здесь только оформление.

rowGroups отдаёт тело потребителю целиком: слот по умолчанию встаёт прямо в таблицу, без обёртки в <tbody>, и группы рисуете вы.

Нужно это там, где пара строк обязана жить и мериться вместе. Обернуть две <tr> в таблице больше не во что — группа строк единственный контейнер, который для них существует, — и без неё виртуализатор GrDataTable не видел бы высоту второго яруса раскрытой строки.

<GrTable row-groups>
  <tbody v-for="order in orders" :key="order.id">
    <tr><td>{{ order.title }}</td></tr>
    <tr v-if="isOpen(order)" data-gr-table-off-grid>
      <td colspan="3">Подробности</td>
    </tr>
  </tbody>
</GrTable>

Полосатость это переживает: селектор чередования написан в двух формах — по строкам внутри единственной группы и по самим группам, — и в чужой форме каждая не совпадает ни с чем. Группу вне набора (распорку) помечайте тем же data-gr-table-off-grid, что и строку.

Загрузка и пустота остаются за таблицей: их она рисует сама и в своей группе.

Два пропа нужны, когда строки рендерит не всё содержимое набора — например, при виртуализации в GrDataTable:

• rowCount — полное число строк вместе с заголовочными, уходит в aria-rowcount. Без него диктор считает строки по разметке и объявит «5 из 20» на таблице в десять тысяч; строки при этом обязаны нести aria-rowindex.
• fixedLayout — table-layout: fixed. Без него ширины колонок считаются по отрисованному окну и прыгают на каждой прокрутке.

rowCount заодно выключает браузерный якорь прокрутки у скролл-контейнера: он подправляет scrollTop, когда меняется высота содержимого выше видимого узла, — а окно меняет её на каждом кадре, и список уезжает тем дальше, чем грубее оценка строки.