Display

Table

Semantic table parts with row hover and a scrolling container. For data, not layout.

packages/design-system/components/ui/table.tsx

Examples

Invoices this quarter.
Invoice	Project	Status	Amount
BW-104	Brand sprint	Paid	$8,000
BW-105	Website	Due	$14,500
BW-106	Design system	Draft	$9,200
Total			$31,700

Caption, header, body, footer

Anatomy

01Container, overflow-x-auto
02Caption
03Header
04Body rows, hover muted
05Footer

Usage

import {
  Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow,
} from "@repo/design-system/components/ui/table";

<Table>
  <TableCaption>Invoices this quarter.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {invoices.map((invoice) => (
      <TableRow key={invoice.id}>
        <TableCell>{invoice.id}</TableCell>
        <TableCell className="text-right">{invoice.amount}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Props

Prop	Type	Default	Description
...props	ComponentProps<"table" \| "thead" \| "tr" \| "td" ...>	none	Each part passes through to its element. Table wraps itself in an overflow container.
className	string	none	Merged last with cn(). Use it for layout (width, margin), not to restyle the component.

Guidance

Right-align numbers.
Give it a caption, even a visually hidden one.

Don't

Use it to lay out a page.