Data display

Table

Composes accessible table elements inside a horizontally scrollable container.

@dawn/ui/components/table

Preview

Rendered from @dawn/ui

Today's confirmed appointments.
Patient	Time	Status
Ada Lovelace	10:30	Confirmed
James Baldwin	11:15	Pending

Usage

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@dawn/ui/components/table";

export const Appointments = () => (
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead>Patient</TableHead>
        <TableHead>Time</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell>Ada Lovelace</TableCell>
        <TableCell>10:30</TableCell>
      </TableRow>
    </TableBody>
  </Table>
);

API

Tabletable props: Creates the table and its overflow container; pass native table attributes.
TableRowtr props: Supports hover, selected, and aria-expanded visual states.
TableCaptioncaption props: Provides the table's accessible caption.

Exports

TableTableHeaderTableBodyTableFooterTableHeadTableRowTableCellTableCaption