Table

Import

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

Usage Guidelines

When to use

• For displaying structured, tabular data with rows and columns (e.g., invoices, users, logs).
• When the data has consistent columns and users benefit from scanning across rows.
• For data that needs sorting, filtering, or alignment (right-align numbers).

When NOT to use

• For key-value pairs — use a description list (<dl>) or Card layout.
• For a single-column list of items — use a simple list or ScrollArea.
• For complex, interactive data grids with inline editing — consider a specialized data table library on top of these primitives.

Preview

Usage

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Invoice #001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

Source