# Table Tier B. Follows the [anatomy template](https://underglass.dev/docs/strata/design-language#17-component-anatomy-template) and the [conventions](https://underglass.dev/docs/strata/components#conventions). ## 1. Purpose and native element Shows data in rows and columns, to compare and look up values. Renders a native `` with a `` and ``, and header cells with `scope="col"`: the browser gives the table semantics, so a screen reader announces each cell with its column header. A sortable column's header holds a native `
`, `
Invoices
Amount
1001 Ada Lovelace 120.00
1002 Grace Hopper 87.50
``` A table that does not sort (and Astro's, which renders no sort buttons) has plain header cells; `aria-sort` still says the order the rows are in: ```html
Invoices
Number Customer Amount
1001 Ada Lovelace 120.00
``` - The wrapper `
` is the boundary element and the slab: refs, `class` and `style` reach it. It does not scroll; put a wide table in a scroll container of your own (a focusable region with a name). - **Sorting:** a sortable column's header holds a `.ug-table__sort` button. Only the sorted column has `aria-sort` (`ascending` or `descending`); a click on its button reverses the order, and a click on another column's button sorts by it, ascending. The button's name is the column's name; `aria-sort` says the order. - **React and Vue:** `` with `columns: { key, header, numeric?, sortable? }[]` and rows as records of cell values (`rowKey` names the column that identifies a row, the first by default). Sorting is controlled by `sort` (`{ key, direction }`) and `onSortChange` (`v-model:sort` in Vue), or left to the component with `defaultSort`, which sorts numbers by value and text with `localeCompare`. **Astro** renders the table with the headers' `aria-sort` and no sort buttons: sorting needs script. - No overlay. ## 8. Keyboard and screen reader | Key | Action | | --- | --- | | Tab, Shift+Tab | Move between the sort buttons and any controls in cells (native order) | | Enter, Space | Sort by the focused column, or reverse its order (native button) | - The table is named by its caption. Each cell is announced with its column header; the sorted column says "sorted ascending" or "descending". - Screen reader table navigation (Ctrl+Alt+arrows and the like) works as on any native table. ## 9. CSS presentation The `raised` recipe on the wrapper, with the card's `secondary` colour and `space.2` padding. The table is `border-collapse: collapse` and full width. Cells have `space.3` and `space.4` padding and a 1 px separator under each row except the last; the header row has a 2 px `edge` line. The sort arrow is a small triangle drawn by borders. Under `forced-colors` the slab has a `CanvasText` border and the separators are `CanvasText`. ## 10. Tests - **Bindings:** React, Vue and Astro render exactly the markup above; a click, Enter and Space on a sort button sort the rows and move `aria-sort`; controlled `sort` follows from outside; numeric columns sort by value; roles, names and header association; axe in light and dark. - **GPU:** at Relief and Objects the table is one raised slab (an object slab at Objects) and its rows add nothing to the scene; a real click on a sort button through the GPU sorts the rows, with GPU on.