Table

Low-level HTML table primitives styled with the DS tokens. Reach for these when you need a static or lightly-dynamic table (4 columns, no pagination, no search) — ManagedDataTable is the right call only when you actually want @tanstack/react-table's batteries. For a 12-row audit log they're overkill.

Examples

Basic

Compose the eight primitives like raw HTML — every piece accepts className and forwards refs, so you can drop them into any layout.

A list of your recent invoices.
Invoice	Status	Method	Amount
INV-001	Paid	Credit Card	R$ 250.00
INV-002	Pending	PIX	R$ 150.00
INV-003	Unpaid	Bank Transfer	R$ 350.00
INV-004	Paid	Credit Card	R$ 450.00

<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {invoices.map((inv) => (
      <TableRow key={inv.id}>
        <TableCell className="font-medium">{inv.id}</TableCell>
        <TableCell>
          <Badge variant={STATUS_TONE[inv.status]}>{inv.status}</Badge>
        </TableCell>
        <TableCell>{inv.method}</TableCell>
        <TableCell className="text-right tabular-nums">{inv.amount}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

When to reach for ManagedDataTable instead

If you need any of these, jump to the full-featured version — wiring them on top of these primitives means rebuilding @tanstack/react-table by hand.

Sorting, filtering, or fuzzy search
Server pagination or infinite scroll
Row selection + bulk actions
Column visibility toggle
Faceted filters

// These cases ALL want <ManagedDataTable />, not raw <Table />:
// - sorting / filtering / fuzzy search
// - server pagination or infinite scroll
// - row selection + bulk actions
// - column visibility toggle
// - faceted filters

API Reference

Props of the Table component.

Prop	Type	Default	Description
`Table`	`component`	—	Wrapping <table> with overflow-x scroll on small screens.
`TableHeader`	`component`	—	<thead> with bottom border.
`TableBody`	`component`	—	<tbody>. Last row drops the divider.
`TableFooter`	`component`	—	<tfoot> with subtle background.
`TableRow`	`component`	—	<tr> with hover state and `data-[state=selected]` highlight.
`TableHead`	`component`	—	<th> — muted-foreground, medium weight.
`TableCell`	`component`	—	<td> with vertical alignment helpers.
`TableCaption`	`component`	—	<caption> below the table for context.