Skip to content

Table

Rows of records in real table markup. By default rows stack into blocks on small screens; wide comparisons scroll instead.

Sourcecomponents/table.tsx

Stacked below md (default)

Recent invoices
InvoiceClientStatusAmount
INV-001Acme Inc.Paid$1,250.00
INV-002GlobexDue soon$480.00
INV-003InitechOverdue$2,100.00
Total$3,830.00

Scrolls sideways (wide comparison)

Plan limits
FeatureFreeProTeamEnterprise
Projects3UnlimitedUnlimitedUnlimited
Collaborators1525Unlimited
Version history7 days90 days1 yearCustom

Usage

Table usage
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/table";
export function TableUsage({ invoices }: { invoices: { id: string; client: string; amount: string }[] }) {  return (    <Table>      <TableCaption>Invoices this month</TableCaption>      <TableHeader>        <TableRow>          <TableHead>Invoice</TableHead>          <TableHead>Client</TableHead>          <TableHead align="end">Amount</TableHead>        </TableRow>      </TableHeader>      <TableBody>        {invoices.map((invoice) => (          <TableRow key={invoice.id}>            <TableCell label="Invoice">{invoice.id}</TableCell>            <TableCell label="Client">{invoice.client}</TableCell>            <TableCell label="Amount" align="end">              {invoice.amount}            </TableCell>          </TableRow>        ))}      </TableBody>    </Table>  );}

When to use

Use when

Records with the same fields. Give every TableCell a label (rows stack into blocks below md) and a TableCaption

Don’t use when

Layout; a few records with one or two fields (use Item); records the user sorts, filters, selects or pages (use Data Table)