Table

Installation

import { Table } from "@o/pipeline/legacy/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.

A table still loading is the table itself inside a loading SkeletonGroup. Its frame and known headers show as they are, and its rows are real Table.Rows whose cells stand in for their content. A cell whose content is still unknown is empty and sets skeletonWidth; one that will lead with an avatar or icon holds that component, such as a Glyph, beside a Skeleton line, so the rows are the height the table’s will be. For one row still loading in a table that is otherwise showing, make the row the group’s element, and put a SkeletonStatus around the table: a group announces with a status element beside it, which can’t sit in a table body.

<SkeletonGroup loading={loading}>
  <Table.Root>
    <Table.Header>…</Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.Cell skeletonWidth={skeletonLineWidth(row)} />
      </Table.Row>
    </Table.Body>
  </Table.Root>
</SkeletonGroup>

<SkeletonStatus>
  <Table.Root>
    …
    <SkeletonGroup render={<Table.Row />}>
      <Table.Cell skeletonWidth={16} />
    </SkeletonGroup>
  </Table.Root>
</SkeletonStatus>

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>