Table

<Table> is the low-level semantic table — <table> / <thead> / <tbody> / <tr> / <th> / <td> styled with the design tokens. For high-level data tables with sort + selection + pagination, prefer DataTable.

import from "@na/ui/components/table" ▶ Open in Storybook packages/ui/src/components/table.tsx

When to use

• Static reference tables where columns are heterogeneous and you don’t need sort.
• Inside cards / popovers where the table is small enough to render manually.
• When DataTable’s API doesn’t fit (custom row layouts, merged cells, etc.).

Don’t use Table for: sortable / paginated lists (DataTable), key/value layouts (PropertyList), or kanban-style stage views (BoardView).

Default

Name	Stage	Amount
Acme Corp	Negotiation	$24,000
Globex	Discovery	$8,500
Initech	Closed-Won	$42,000
Soylent	Discovery	$12,000

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Stage</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {rows.map((r) => (
      <TableRow key={r.id}>
        <TableCell>{r.name}</TableCell>
        <TableCell>{r.stage}</TableCell>
        <TableCell className="text-right tabular-nums">{r.amount}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Anatomy

• Table — Root <table>.
• TableHeader — <thead> wrapper.
• TableBody — <tbody> wrapper.
• TableFooter — <tfoot> wrapper (for totals).
• TableRow — <tr> with hover styling.
• TableHead — <th> with the design-system header style.
• TableCell — <td> with body styling.
• TableCaption — Optional <caption> for screen-reader context.

Design guidelines

✓ Do

• Use tabular-nums on numeric columns — even on small numbers, alignment matters.
• Set text-right on numeric headers AND cells. Right-aligned numbers compare visually.
• Reach for DataTable as the default for list pages — Table is a primitive for special cases.

✗ Don't

• Roll your own sort handler on TableHead. Use SortableTableHead.
• Use Table for layout. CSS grid / flex are correct for non-tabular data.

Accessibility

• Native <table> semantics — assistive tech announces structure.
• Pair with <TableCaption> when the surrounding context doesn’t already name the table.

Related

• DataTable — High-level wrapper.
• SortableTableHead — Sortable column header.
• TablePagination — Pagination footer.

▶ Open Table stories in Storybook