Table

import { Table } from '@contour-ui/react';

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeader>Band</Table.ColumnHeader>
      <Table.ColumnHeader>Gain</Table.ColumnHeader>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Low shelf</Table.Cell>
      <Table.Cell>+2.5 dB</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>;

The table fills the width of its container. Cells are start-aligned; to align a column, set textAlign inline on its cells, as Markdown tables do: <Table.Cell style={{ textAlign: 'end' }}>.

Variants and sizes

line, the default, draws a divider between rows; outline also draws a rounded border around the table. size sets the cell padding: md for reading, sm for dense data.

<Table.Root variant="outline" size="sm">
  …
</Table.Root>

Caption and footer

Table.Caption names the table and sits under it; put it first in Table.Root, as HTML requires. Table.Footer holds summary rows such as totals; a Table.ColumnHeader with scope="row" labels such a row.

<Table.Root>
  <Table.Caption>CPU load per plugin</Table.Caption>
  <Table.Header>…</Table.Header>
  <Table.Body>…</Table.Body>
  <Table.Footer>
    <Table.Row>
      <Table.ColumnHeader scope="row">Total</Table.ColumnHeader>
      <Table.Cell style={{ textAlign: 'end' }}>16.0%</Table.Cell>
    </Table.Row>
  </Table.Footer>
</Table.Root>

Wide tables

When space runs short, cells wrap their text. A table that still does not fit needs Table.ScrollArea: it scrolls the table sideways instead of letting it overflow the page. Name the area after the caption, so it is announced as a region. To keep values such as numbers with units on one line, set white-space: nowrap on the table or on their cells.

<Table.ScrollArea aria-labelledby="mixer-caption">
  <Table.Root size="sm" style={{ whiteSpace: 'nowrap' }}>
    <Table.Caption id="mixer-caption">Mixer channels</Table.Caption>
    <Table.Header>…</Table.Header>
    <Table.Body>…</Table.Body>
  </Table.Root>
</Table.ScrollArea>

Anatomy

Props

Table.Root:

Table.ColumnHeader:

Every part takes asChild and the props of its element, such as className, style and id; className is merged with the part's class.

Keyboard

Accessibility

• The parts render a real <table>, so screen readers announce rows, columns and their headers. Mark every header cell with Table.ColumnHeader: it labels its column, or its row with scope="row".
• Name the table with Table.Caption, or with aria-label on Table.Root when the name should not be shown.
• Table.ScrollArea is in the tab order, so keyboard users can scroll it too. Name it with aria-labelledby (the caption's id) or aria-label: it becomes a region with that name, and screen readers say what the focused area holds. Each scroll area is a tab stop, so wrap only tables that can overflow.
• Use a table for data with rows and columns, not for layout.

Tokens