GitHub Stars

Table

A data table component that displays information in rows and columns.

A list of your recent invoices.
Invoice Status Method Amount
INV-001 Paid Credit Card $250.00
INV-002 Pending PayPal $150.00
INV-003 Unpaid Bank Transfer $350.00
Total $750.00

Installation

npx shadcn@latest add @fulldev/table

Usage

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
<Table>
  <TableCaption>A list of your invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>INV-001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

Composition

Use the following composition to build a Table:

Table
├── TableCaption
├── TableHeader
│   └── TableRow
│       ├── TableHead
│       ├── TableHead
│       └── TableHead
├── TableBody
│   └── TableRow
│       ├── TableCell
│       ├── TableCell
│       └── TableCell
└── TableFooter

Notes

  • Keep table structure semantic: headers in TableHeader, rows in TableBody, and summary data in TableFooter when needed.
  • Right-align numeric columns so values are easier to scan.
  • Wrap large tables in a container with horizontal overflow when the content may exceed the available width.

API Reference

See the GitHub source code for more information on props.