GrTable

The overflow-x-auto container always stands in the tab order (tabindex="0"). That used to depend on regionLabel: a wide table without a label could not be scrolled from the keyboard at all — a direct violation of WCAG 2.1.1.

regionLabel still switches role="region" on and gives the area a name, but it has nothing to do with the reachability of the scrolling.

stickyColumn keeps the first column in place during horizontal scrolling: on a wide table you would otherwise see the numbers but not whose they are. It combines with stickyHeader — both axes hold.

Only the first one, and that is not a simplification. The left offset from the second column on is the sum of the widths of the previous ones, and the cells belong to you: a “thin” container has no registry of cells and no measurements. Multi-column pinning is in GrDataTable — it knows its columns and measures the offsets itself.

The background of a sticky cell is opaque, otherwise what is moving away shows through it. Inheriting the background of the row will not work, although it suggests itself: the tints of striped and hoverable are semi-transparent, and through such a cell the numbers show through — checked by eye. So the same tints are assembled anew on top of the card: the colour is the same, there is no hole. Striping and highlighting in the first column work on a par with the rest, nothing needs to be written in addition.

The shadow on the right is a sign that something is moving away under the column. A border will not do: it would shift the grid. The value is configured with the --gr-table-sticky-column-shadow token.

min-w-full on its own does not give horizontal scrolling: tableMinWidth or white-space: nowrap on the cells is needed.

<GrTable :loading="pending" :column-count="4">
  <template #header>…</template>
  <tr v-for="row in rows" :key="row.id">…</tr>
  <template #empty>Nothing found</template>
</GrTable>

The table determines the emptiness itself — by the content of the slot. columnCount is needed by the service row: without it the colspan will not stretch across the full width.

loading draws skeleton rows and marks the container aria-busy; the #loading slot replaces them as a whole. Loading is stronger than emptiness — otherwise the table would blink the “nothing yet” text on every request.

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

table.value?.scrollToRow(42) // the index of a content row; false — there is no such row
table.value?.scrollTo({ top: 0 })

scrollToRow(index, options?) accepts the index of a row in the markup — the table does not render the rows and does not know their keys, so the addressing is positional only. Content rows are counted: service skeleton and empty rows are not addressed, and in the loading and “empty” states the method returns false, as it does with an index out of range. In GrDataTable the method of the same name works by the key of a row — on migration the argument changes its meaning.

striped and hoverable are hung on the table as a whole rather than on every cell: the markup of the rows is written by the consumer, and demanding classes from them would be odd. Not on the <tbody> — there may be many row groups in the body (see below), and a rule tied to one of them would not see the alternation between them.

The sticky heading uses a local z-[1], the sticky column a z-[2], both inside their own container — it has nothing to do with the --gr-z-* scale, which is described in ../z-index.md.

Striping and highlighting are written from the <tbody> and count direct children. By adding a second row to a row — expanded details, a service spacer — you would shift the parity of every row below and get a highlight under the cursor where there is nothing to press.

Mark such a row data-gr-table-off-grid:

<tr>
  <td>Order 42</td>
</tr>

<tr data-gr-table-off-grid>
  <td colspan="3">Order details</td>
</tr>

The attribute removes both rules from it and excludes it from the parity count: the selector is written as nth-child(even of :not([data-gr-table-off-grid])) rather than simply with a filter — an ordinary :not() would remove the stripe from the row itself but would not change the numbering of its neighbours.

Linking the pair of rows for a screen reader is also your concern: the button needs aria-expanded and aria-controls onto the id of the details row. Ready-made expanding with its own state, loading on demand and ARIA is in GrDataTable — here there is only the styling.

rowGroups gives the body to the consumer as a whole: the default slot goes straight into the table, without a wrapper in <tbody>, and the groups are drawn by you.

It is needed where a pair of rows is obliged to live and be measured together. There is nothing else in a table to wrap two <tr> in — a row group is the only container that exists for them — and without it the virtualiser of GrDataTable would not see the height of the second tier of an expanded row.

<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">Details</td>
    </tr>
  </tbody>
</GrTable>

Striping survives that: the alternation selector is written in two forms — by rows inside the single group and by the groups themselves — and in the foreign form each matches nothing. Mark a group outside the set (a spacer) with the same data-gr-table-off-grid as a row.

Loading and emptiness stay with the table: it draws them itself and in a group of its own.

Two props are needed when the rows do not render the whole set — with virtualisation in GrDataTable, for instance:

• rowCount is the full number of rows together with the heading ones, and it goes into aria-rowcount. Without it a screen reader counts the rows by the markup and will announce “5 of 20” on a table of ten thousand; the rows meanwhile are obliged to carry aria-rowindex.
• fixedLayout is table-layout: fixed. Without it the widths of the columns are computed from the rendered window and jump on every scroll.

rowCount also switches off the browser’s scroll anchoring on the scroll container: it adjusts scrollTop when the height of the content above the visible node changes — and the window changes it on every frame, so the list drifts the further the rougher the estimate of a row is.