# Tide table

A printed tide table on a sheet of paper, read with a brass ruler laid across the selected row: a real table (table, thead, th scope, tbody rows) with a printed heading, a small tide curve and a brass window that glides row to row. ArrowUp and ArrowDown move the ruler, Home and End take it to the first and last tide, and a press on a row moves it there directly. A row selection is announced once, by the element own status plate built from that row own cells, never a second copy of its printed text.

Kit part · With the Kit · https://tactileui.dev/parts/tide-table

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

A custom element reading its light DOM table once, the way the kit other parts read their own children. The heading prints the place and date in small caps over a double rule; an inline SVG tide curve is drawn from the rows themselves (time of day across, height up) with a needle on the selected reading. The selected row sets aria-selected on it alone, and the brass ruler, a top rail and a bottom rail with a clear window between, is placed over that row from its measured top and height, so uneven rows are still tracked exactly; then it presses down two pixels and settles. Selecting repaints the plate with tideTableAnnounce and fires change. Reduced motion is handled in kit/parts/tide-table.css alone: the glide, the settle and the needle transition are dropped, so no script branch is needed for it.

## Variants

- Four rows only (Home and End still either end)
- Starting on the last row

## States

- Rest
- Moved to another row
- Row focus

## Props and options

| Name | Kind | Description |
| - | - | - |
| label | attribute | Names the group the printed sheet and its table sit in, read by a screen reader as it enters. |
| place | attribute | The harbour the sheet is printed for: the first line of the heading, in small caps. Defaults to label. |
| date | attribute | The date printed beside the harbour, in small caps. |
| index | attribute, property | The row under the ruler at the start, or read and set at any time. Setting it slides the ruler there. |
| go(i) | method | Slide the ruler to row i; the first and last rows are ends, not a wrap. |
| change | event | A different row settled under the ruler. |
| ArrowUp, ArrowDown | keys | Slide the ruler to the row before or after the one focused. |
| Home, End | keys | Slide the ruler straight to the first or the last row. |
| tideTableClamp(i, n) | function | Pure: keeps a target index inside 0..n-1 by clamping at either end. |
| tideTableAnnounce(i, n, cells) | function |  |

## Usage notes

Press ArrowDown or ArrowUp to slide the brass ruler to the next or previous tide, or press a row directly; Home and End jump to the first and last row.

## Accessibility

- Real table semantics throughout: table, thead, th scope col, tbody rows; the element adds nothing that is not already native to a table.
- The rows are the focus and the selection: a roving tabindex keeps Tab landing on the table once, at the selected row, and ArrowUp, ArrowDown, Home and End move the ruler from there.
- A press on a row slides the ruler to that row. The brass ruler and the tide curve are decoration for the eye, aria-hidden, so neither is a control a screen reader has to step through.
- The selected row carries aria-selected true; the plate is a polite live region, so a screen reader hears the row own cells the moment the ruler settles, and nowhere else repeats that text.
- Reduced motion drops the ruler glide and the needle slide between rows and simply places them at the new one; the table, the labels and the live announcement are unchanged.
- On the Machined, Wood, Materials and Light families the sheet is paper, dimmed on a dark finish, and its printed ink keeps its contrast; the brass is drawn from the kit amber mixed with the paper, never an image.

## Related parts

- [Table](https://tactileui.dev/parts/table): Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.
- [Data table](https://tactileui.dev/parts/data-table): The kit’s table with the tools a working one needs: headers that sort, a filter well, a check key on every row with one in the header that selects them all and sinks half way when only some are chosen, and a header that stays at the top while the rows scroll under it. While rows are chosen a plate slides out of a slot under the tools, its lamp lit, carrying what can be done to them. Without the script it is the plain table.
- [Sortable list](https://tactileui.dev/parts/sortable): Plates in a rack that you reorder. Each has a knurled handle: drag it and the plate lifts off the rack on a shadow while the others slide aside, or pick it up from the keyboard and walk it up and down. Every step is spoken.