Table

The table primitives keep row rhythm, numeric alignment, and selection states consistent across denser data surfaces. They are intentionally simple wrappers around HTML table elements, with the Swiss styling work concentrated in spacing, borders, uppercase headers, and row-state treatment.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Item</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Launch issue 04</TableCell>
      <TableCell>Ready</TableCell>
    </TableRow>
  </TableBody>
</Table>

Why This Primitive Exists

Product tables need more than plain HTML defaults, but they do not need a full data-grid abstraction every time.

• Use these primitives when the information is genuinely tabular and column comparison matters.
• Keep the schema stable so users can scan down the same columns repeatedly.
• Avoid tables for short lists that are easier to read as stacked cards or items.

Examples

Basic Structure

Start with the six core building blocks and let the content determine the column widths.

Numeric Columns

The Swiss table includes a repo-specific data-numeric convention on TableHead and TableCell so counts, prices, and totals line up cleanly.

<TableHead data-numeric="true">Revenue</TableHead>
<TableCell data-numeric="true">$42,300</TableCell>

In Context

Tables become more useful when selection, hover state, and surrounding panel hierarchy all reinforce the current row.

<TableRow data-state="selected">
  <TableCell>CH-104</TableCell>
  <TableCell data-numeric="true">18</TableCell>
  <TableCell>Allocated</TableCell>
</TableRow>

Guidance

Use Tables For Comparison

• Reach for a table when users need to scan several records against the same set of columns.
• Prefer cards or list items when each row has a different internal structure.
• Keep column labels short and explicit so the header reads quickly.

Respect Numeric Alignment

• Apply data-numeric="true" to both the header and cells of numeric columns.
• Use tabular values for prices, counts, and percentages so totals stay visually aligned.
• Avoid mixing freeform text into numeric columns unless the interface absolutely requires it.

Keep Row State Legible

• Use data-state="selected" on TableRow when the row is actively selected.
• Let hover and focus states support scanability rather than turn the table into a high-contrast grid.
• If the surface needs filtering, bulk actions, or pagination, compose those controls around the table instead of inside the cells.

API Reference

Exports

Repo-Specific Behaviors

All components accept the standard props for their underlying HTML elements plus className.