Table

Preview

Density

Three density modes adjust vertical padding without changing font size. compact is ideal for data-dense dashboards; comfortable gives breathing room for editorial content.

Striped

The striped prop alternates row backgrounds using a CSS child-selector applied via a data-striped attribute on the table root.

Bordered columns

Add bordered to draw vertical dividers between columns — useful for comparison tables or spreadsheet-style layouts.

Implementation

Table is a pure server component. Variants are driven by data-* attributes on the root <table> so that Tailwind CSS child selectors ([table[data-striped]_&:nth-child(even)]) apply without passing props through every sub-component.

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

// Basic
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Jamieson Rothwell</TableCell>
      <TableCell>Active</TableCell>
      <TableCell>Admin</TableCell>
    </TableRow>
  </TableBody>
</Table>

// Striped + compact
<Table striped density="compact">…</Table>

// Sortable column header
<TableHead
  sortable
  sortDirection={sortKey === "name" ? sortDir : false}
  onSort={() => handleSort("name")}
>
  Name
</TableHead>

Table props

TableHead props

Anatomy

Mobile

Data tables are one of the hardest components to use on mobile. The two main strategies are horizontal scrolling and a card-stack layout — choose based on the data density.