# Tables A list of records: a title that links to the record, a line under it, a note when something is wrong, a column of checks for batch actions and the row's own actions at the end. ## Examples `table` on the ``; the row under the pointer lights on a device with one, in the color of `--redz-row-hover`, set on the page or on one table, and `table-static` keeps a table's rows still. The head stays at the top of the screen as the page scrolls. Columns that only help on a wide screen hide below `md` of their card. ```html

Excursions

3 of 28

Excursion	Price from	Status
North Bay: marine park by speedboat /excursions/north-bay/	2,500 THB	Published
Elephant sanctuary: feeding and a walk Did not rebuild: a PHP warning in the theme template	2,600 THB	Failed
Night market and street food The Thai translation is older than the English	900 THB	Stale
Folk dance: an evening at the stadium withdrawn from the sites	1,500 THB	Withdrawn

``` ### Stripes, borders and groups `table-striped` shades every other row, `table-striped-columns` every other column - under the hover's light and a row's tone alike; `table-group-divider` on a `tbody` draws a stronger line above it. `table-bordered` draws the lines between columns and, outside a card, the table's own frame; `table-borderless` takes the lines between rows away. ```html

Boats this week

Boat	Trips	Seats sold
Boat A	12	286
Boat C	9	201
Boat B	7	164
All boats	28	651

Season	Months	The sea
Dry	January to April	Calm
Hot	May to August	Calm
Rainy	September to December	Waves

``` ### Row sizes `data-density="compact"` tightens the rows and the controls of the element it is on and of everything inside it: a table, the card that holds it, a region, or the whole page on ``. A compact table can stand beside a normal one on the same screen. Bootstrap 5 calls it `table-sm`. `data-density="comfortable"` and `data-density="spacious"` open the rows up the other way, for a short table that is the point of a page. ```html

Season	Months	The sea
Dry	January to April	Calm
Hot	May to August	Calm
Rainy	September to December	Waves

Season	Months	The sea
Dry	January to April	Calm
Hot	May to August	Calm

``` ### Rows that stay still Every table lights the row under the pointer. `table-static` keeps the rows of one still, for a table with nothing to do in a row. ```html

North Bay	08:00
Turtle Cove	10:30

Adult	1,200
Child	600

``` ### A menu in a row A row's menu stands in `table-actions` right after its button. While it is open the row keeps its light and its actions, wherever the pointer goes, and the menu takes nothing from the cell. Rows may also share one menu kept outside the table: each button names it, and the row of the button that opened it stays lit. ```html

Excursion	Leaves	Actions
North Bay	08:00
Turtle Cove	10:30

``` ### Rows that light together Elements that share a `data-highlight` key light together: hovering or focusing one marks every element with its key `data-highlighted`, tinted - a row here and its lane on a [board](chart.md#chart-lanes), or its marker on a map. A mark the page sets itself, `data-highlighted="hold"`, stays until the page takes it away: a row flashed after a jump to it, say. ```html

The pier	08:30
The emerald lake	11:00

``` ### Sortable columns A header that sorts holds a `button class="table-sort"`, and the header's `aria-sort` - `ascending`, `descending` or none - draws the arrow. The page sorts - on the server or in place - and moves `aria-sort` to the column it sorted by. ```html


Example Resort	3	48,000
Example Cruises	1	9,600
Example Divers	2	21,300

``` Where the server sorts, the header holds a link instead - `a class="table-sort"` to the same list in the other order - drawn the same way. ```html

Name	Paid
Example Resort	48,000
Example Divers	21,300

``` ### Groups and subtotals A row `table-group` heads the rows under it: one `th scope="rowgroup"` across the table, a band that does not stick, with an end slot `table-group-end` for its count or sum. A row `table-subtotal` closes a group in bold under a line. ```html

Guest	Seats	Paid
Boat A2 bookings
Alex Sample	2	5,000
Ben Sample	3	7,500
Boat A	5	12,500
Boat C1 booking
Chris Sample	4	10,000
Boat C	4	10,000

``` The head of a table sticks under the app's header as the page scrolls; inside a region that scrolls on its own - a `dialog-body`, a `card-scroll` card's body - it sticks to the region's top. ### Wider than its card A table with more columns than its card has room for goes in a `table-scroll`: it scrolls sideways inside the card, and `table-scroll-first` holds its first column in place, `table-scroll-last` its last, where a row's buttons stay in view. Where the browser lets an element scroll on one axis alone - Chrome 156 on - the head still sticks to the page as it scrolls down; elsewhere the head scrolls away with the page and the rest works the same. The wrapper is a named region. The library makes it a tab stop while its table is wider than it, so a keyboard can scroll it, and takes the stop away while the table fits. ```html

Seats by day

Boat	Mon	Tue	Wed	Thu	Fri	Sat	Sun	Week	Last week	Change
Boat A	42	38	40	44	46	48	28	286	270	+16
Boat C	30	28	27	31	33	35	17	201	214	-13
Boat B	22	20	24	23	25	30	20	164	150	+14

``` ```html

Rates

Boat	Low	High	Peak	Children	Groups	Agents	Guides	Fuel	Park fee	Insurance	Status
Boat A	2,500	2,900	3,400	1,900	2,200	2,100	900	300	300	120
Boat C	2,200	2,600	3,000	1,700	2,000	1,900	800	280	300	110

``` A product sets the look of every table head in its tokens: `--redz-table-head-bg`, `--redz-table-head-text`, `--redz-table-head-weight`, and `--redz-table-head-border`, the whole line under it. ### The current, the chosen and the running row A row with `aria-current` - the record open beside the list - carries the accent's mark at its start; a row with `aria-selected="true"`, chosen in a grid of rows, is tinted; `table-active`, Bootstrap's name, marks the row that is running now. ```html

Rebuild the Thai pages	Open on the right
Import the price list	Chosen
Send the morning letters	Running now
Clean the old photos	Waiting

``` ### A whole row as a link The row's title link with Bootstrap's `stretched-link` makes the whole row a link: a click anywhere on it but on its own controls and their cells (`table-check`, `table-actions`) follows the title - with `Ctrl`, `Cmd` or the middle button into a new tab - unless the person was selecting its text. The title stays the one link a keyboard and a screen reader meet. The library does it by script, as Safari gives a positioned row no box for the link's cover. ```html

Alex Sample Thai, English	12 tours
Hana Sample Japanese, English	7 tours

``` ## States A row's tone marks what needs attention: `table-danger` failed, `table-warning` needs a look, `table-secondary` is out of use. On a pointer screen the row's actions show on hover and on focus; on a touch screen they always show. ## Keyboard and accessibility - The row's title is a link; its actions are buttons named with the record - "Edit: North Bay", not a column of identical "Edit". - The column of actions has a hidden header, and each check its own name: "Select: North Bay". - A tone is never the only sign: a failed row also says why in its `table-note`, with an icon. - Numbers sit at the end of their cells with `tabular-nums`, so their digits line up. - A table being reloaded turns busy on its card's body: `REDZ.ui.busy(body, promise)` - not on the ``, which cannot hold an overlay. ## Tokens From [`css/components/table.css`](https://github.com/redz-tech/REDZ.UI/blob/main/css/components/table.css). It declares `--redz-table-head-border`, `--redz-table-head-weight`, `--redz-row-tint`, `--redz-row-mark` on its root, never on rows or items. It reads the theme's `--redz-space-8`, `--redz-row-pad`, `--redz-space-12`, `--redz-border`, `--redz-table-head-bg`, `--redz-bg`, `--redz-table-head-text`, `--redz-text-muted`, `--redz-fs-12`, `--redz-text`, `--redz-bg-page`, `--redz-border-strong`, `--redz-row-hover`, `--redz-primary`, `--redz-radius-12`, `--redz-space-16`, `--redz-font-mono`, `--redz-space-4`, `--redz-danger-subtle`, `--redz-danger`, `--redz-warning-subtle`, `--redz-warning`, `--redz-primary-subtle`. ## From Bootstrap 5.3 | Bootstrap 5.3 | REDZ.UI | Change | Note | | --- | --- | --- | --- | | `caption-top` | - | missing | | | `table-dark` | - | review | row tones are danger, warning and secondary | | `table-hover` | - | remove | every table lights its row under the pointer; table-static keeps one still | | `table-info` | - | review | row tones are danger, warning and secondary | | `table-light` | - | review | row tones are danger, warning and secondary | | `table-primary` | - | review | row tones are danger, warning and secondary | | `table-responsive` | `table-scroll` | rename | the wrapper scrolls sideways, table-scroll-first holds the first column; or columns hide below md: | | `table-success` | - | review | row tones are danger, warning and secondary |