Table

Installation

import { Table } from "@o/pipeline/experimental/blocks/table";

Usage

Compose the semantic table elements directly.

Table.Head uses scope="col" by default; pass a different scope when the table needs it.

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.Head>Company</Table.Head>
      <Table.Head>Status</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Autodesk</Table.Cell>
      <Table.Cell>Active</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

Explicit widths

Table.Root fits to its content and sizes columns automatically. Add a matching width class or style to a Table.Head and its corresponding Table.Cell values when a column needs an explicit width.

Scrolling

Wrap a table that can outgrow its container in Table.Scroller. The table lays out at up to --table-scroller-max-width, which defaults to the scroller’s width, and scrolls sideways when it has less room than that, so it keeps one shape however narrow its container gets. A table that fits stretches to the scroller’s width. Cells keep a 7rem floor, and the edge it can scroll past fades. While the table overflows, the scroller is a tab stop so the keyboard can scroll it.

<Table.Scroller>
  <Table.Root>…</Table.Root>
</Table.Scroller>

Pass axis="both" to a scroller with a height limit and it scrolls downwards too, fading every edge it can scroll past.

Loading

Table.Cell takes skeleton: it keeps its place in the row, inert, and its content stands in for itself. Components in it draw their own skeletons, text that is the whole content becomes lines, text inside other markup needs a SkeletonText around it, and an empty cell shows a line skeletonWidth wide. Inside a loading SkeletonGroup it is on by default.

TableSkeleton is a whole table still loading, laid out as Table.Maximizable lays out the table it stands in for. Like that table, it is as wide as its content. Its columns give each header when it is known, and whether the column’s cells lead with an avatar or icon, as a record’s do, so the rows are the height the table’s will be. Its rows are placeholders: pass each cell’s text when it is known, so each is as wide as it will be, or a count when it isn’t, and the cells start narrow, so the table grows into its content rather than shrinking. TableSkeletonRow is one row of placeholders for a record still loading in a table that is otherwise showing.

<TableSkeleton
  title="Open deals"
  columns={[{ label: "Deal", glyph: true }, { label: "Amount" }]}
  rows={3}
/>

Maximizing

Table.Maximizable is a Table.Scroller with a maximize button, shown on hover or keyboard focus where there is a pointer, that opens the table in a dialog. The dialog fits the table, never narrower than it is inline, up to the edges of the viewport and most of its height, and scrolls both ways beyond that. The button floats over the end of the header row and stays put while the table scrolls sideways, with a gap clipped out of the table around it. The dialog has no header: the table sits flush to its edges, with a square header row that sticks to the top as it scrolls, and its close button sits in the same place over that row. An optional title heads the table and names the dialog, which is “Table” without one. Chat uses it for every table an agent writes.

<Table.Maximizable title="Pipeline by rep">
  <Table.Root>…</Table.Root>
</Table.Maximizable>