Skip to content

Table

Show rows of data in a plain, accessible table whose rows can move with Presence List.

import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@youj/react'

Installation & usage

npm i @youj/react

For an app already set up with npx @youj/cli init, which installs the peers (@youj/core, @youj/motion, motion and Base UI) and wires the provider. New app? Start at Installation.

Use the Table parts for a small, static table: a few rows with no sorting or filtering of their own. Their dividers sit on the cells, not the rows, so rows can move with Presence List and take their borders with them.

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@youj/react'

<Table aria-label="Domains">
  <TableHeader>
    <TableRow>
      <TableHead>Domain</TableHead>
      <TableHead className="text-end">Redirects</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>acme.dev</TableCell>
      <TableCell className="text-end tabular-nums">2</TableCell>
    </TableRow>
  </TableBody>
</Table>

Reference

PropsTable

Props

Table

Table adds no props of its own. They pass through to ComponentProps<'table'>.

AccessibilityName, scrolling, rows that move

Accessibility

  • Name a table with aria-label or a <TableCaption>; headers are <th> cells, so each cell is read with its column.
  • A table that scrolls sideways takes a Tab stop of its own and is named, so the keyboard can scroll it.
  • Rows that move with Presence List keep their borders, since the dividers sit on the cells.