3.0.1

Components

Table

A data table with header, body and footer sections.

BuildBranchStatus
#1284mainReady
#1283fix/tokensBuilding
#1282feat/docsFailed

Installation

npx shadcn@latest add @blank/table

Usage

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
<Table>
  <TableCaption>Recent invoices</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>INV-001</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

Examples

Invoices for September 2026.
InvoiceMethodAmount
INV-1042Card$250.00
INV-1043Bank transfer$1,200.00
INV-1044Card$89.00
Total$1,539.00

Selectable rows

Set data-state="selected" on a row and it takes the selection surface, the same one menus use.

NameRole
Ada ParkOwner
Jon DiazEditor
Mia ChenViewer

API Reference

Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption

Each wraps its HTML element and takes every prop of it. Table sits in a horizontally scrolling container, so wide tables never break the page.