Component

Table

Structured data display with sortable columns, optional footer, and title. Use for records that benefit from columnar scanning.

Usage

Use tables to present structured data in rows and columns. Add a title above the table when context isn't obvious from surrounding copy.

Playground

Preview
Recent invoices
Recent invoices
MethodAmount
INV001PaidCredit Card$250.00
INV002PendingBank Transfer$150.00
INV003UnpaidPayPal$350.00

Configure

Yes
No

Code

import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableTitle } from "@/components/ui/table"
<div className="space-y-2">
  <TableTitle>Recent invoices</TableTitle>
  <Table>
    <TableCaption>Recent invoices</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="font-medium">INV002</TableCell>
      <TableCell>Pending</TableCell>
      <TableCell>Bank Transfer</TableCell>
      <TableCell className="text-right">$150.00</TableCell>
    </TableRow>
    <TableRow>
      <TableCell className="font-medium">INV003</TableCell>
      <TableCell>Unpaid</TableCell>
      <TableCell>PayPal</TableCell>
      <TableCell className="text-right">$350.00</TableCell>
    </TableRow>
  </TableBody>

  </Table>
</div>

Do

  • Label every column with a clear header
  • Right-align numeric columns so values line up for easy scanning
  • Use a footer row for totals or aggregate values
  • Place the table title above the table, not below it

Don't

  • Don't use a table for non-tabular data, use a list or card instead
  • Don't omit column headers unless the context makes each column self-evident