Table

<Table interactive><Table.Head>  <Table.Row>    <Table.Header>Worker</Table.Header>    <Table.Header>Region</Table.Header>    <Table.Header align="end" numeric>Requests</Table.Header>  </Table.Row></Table.Head><Table.Body>  <Table.Row>    <Table.Cell primary>acme-api</Table.Cell>    <Table.Cell>fra1</Table.Cell>    <Table.Cell numeric>142,318</Table.Cell>  </Table.Row>  <Table.Row>    <Table.Cell primary>acme-web</Table.Cell>    <Table.Cell>waw1</Table.Cell>    <Table.Cell numeric>8,904</Table.Cell>  </Table.Row></Table.Body></Table>

Three decisions do most of the work in this component.

1. Rows are separated by a hairline, not by a fill. Zebra striping is opt-in and deliberately weak, because on a dense table it fights every other tint the system uses for meaning.
2. The header is not a toolbar. It sits on the page background with uppercase micro-type, so the eye reads it as a label row and then stops coming back to it.
3. The hover state is a full-bleed tint plus a left marker. On a table 1200px wide a tint alone is invisible under the cursor at the far right; the marker tells you which row you are actually on.

Usage

import { Table } from "@heyo-sh/heyo-ui";<Table>  <Table.Head>    <Table.Row>      <Table.Header>Worker</Table.Header>    </Table.Row>  </Table.Head>  <Table.Body>    <Table.Row>      <Table.Cell primary>acme-api</Table.Cell>    </Table.Row>  </Table.Body></Table>;

Cells that carry meaning

primary marks the row's headline — the id, the name, the thing you scan for. It gets full contrast and medium weight so everything else can stay quiet. numeric switches to tabular figures and right alignment, which is what makes a column of numbers comparable at a glance.

Sorting

onSort turns a header into a button; sort says which way it is pointing. false means "sortable, but not currently sorted".

<Table.Header sort="desc" onSort={() => toggle("requests")} align="end">Requests</Table.Header>

Selection and actions

Table.SelectHeader and Table.SelectCell are the narrow first column for checkboxes; useSelection computes the header's indeterminate state. Table.ActionCell is the trailing column: it fades its contents in on hover, so fifty rows are not fifty buttons competing with the data — but keeps them visible whenever the keyboard is inside the cell.

<Table.Row selected><Table.SelectCell>  <Checkbox checked aria-label="Select acme-api" /></Table.SelectCell><Table.Cell primary>acme-api</Table.Cell><Table.ActionCell>  <Button variant="ghost" size="sm" shape="square" icon={IconPencil} aria-label="Edit" /></Table.ActionCell></Table.Row>

Sticky header

stickyHeader pins the header while the body scrolls. It needs a bounded maxHeight — there is nothing to scroll inside otherwise.

<Table stickyHeader maxHeight="24rem" striped>  …</Table>

Properties

Table

Table.Row

Table.Header

Table.Cell

The rest