Table

A data table for structured content, in default, striped, and bordered variants.

Name	Email	Role	Status
Maya Okafor	maya@example.com	Admin	Active
Arjun Mehta	arjun@example.com	Editor	Active
Sofia Lindqvist	sofia@example.com	Viewer	Inactive

Installation

npx paubha@latest add table

Usage

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

<Table aria-label="Users">
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Alex Johnson</TableCell>
      <TableCell>Active</TableCell>
    </TableRow>
  </TableBody>
</Table>

Header cells use ui-sm medium in fg-tertiary; body cells use body-md in fg-primary. Pass className="text-fg-secondary" on supporting columns (email, role) to match the Figma spec.

Examples

Striped

Name	Email	Role	Status
Maya Okafor	maya@example.com	Admin	Active
Arjun Mehta	arjun@example.com	Editor	Active
Sofia Lindqvist	sofia@example.com	Viewer	Inactive

Bordered

Name	Email	Role	Status
Maya Okafor	maya@example.com	Admin	Active
Arjun Mehta	arjun@example.com	Editor	Active
Sofia Lindqvist	sofia@example.com	Viewer	Inactive

API reference

Prop	Type	Default	Description
variant	"default" \| "striped" \| "bordered"	"default"	default: row dividers only · striped: fills odd body rows · bordered: strong outer, row, and column dividers. Every variant sits in a rounded, bordered container.

Accessibility

Native semantics. Renders a real <table>, not div-based markup: every cell, row, and header is natively understood by assistive tech without any extra ARIA.
Headers. TableHead renders <th scope="col">, linking each header to its column.
Sortable columns (when you add sorting yourself) should set aria-sort on the relevant TableHead.
Custom cell content (e.g. a row of custom widgets) can use role="row"/role="cell" if you must break from native table elements. Prefer native elements whenever possible.

When to use

Use for structured data with multiple attributes: user lists, transactions, inventory. Best when users need to compare, sort, or scan data.

Do:

Right-align numeric columns
Include sortable headers where it helps
Use the striped variant for dense data
Keep columns to 8 or fewer

Don't:

Use a table for page layout
Show 20+ rows without pagination
Truncate critical data

Pagination: for table pages
Card: an alternative visual display
Skeleton: for loading states

On this page