BlankUI

display

Table

A data table for rows of items with the same fields, like invoices or users.

npx blankui add table
Raw markdown for agentsRegistry JSON
Recent invoices
InvoiceStatusAmount
INV-001Paid$250.00
INV-002Pending$150.00
INV-003Paid$350.00

When to use

  • Rows of records with the same columns that people compare or scan.

Use something else when

  • Laying out a page in columns. Use layout.
  • A few items with different content each. Use card.

Plain HTML table parts with BlankUI styles. For sorting and filtering, use a library like TanStack Table and render with these parts.

Import

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

Example

<Table>
  <TableCaption>Team members</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Role</TableHead>
      <TableHead className="text-right">Actions</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {members.map((m) => (
      <TableRow key={m.id}>
        <TableCell className="font-medium">{m.name}</TableCell>
        <TableCell>{m.role}</TableCell>
        <TableCell className="text-right">
          <Button size="sm" variant="ghost">
            Edit
          </Button>
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Mistakes to avoid

AvoidInstead
A grid of divs that looks like a table<Table> so screen readers can read rows and columns
<table className=...> (a raw table element)<Table>
TableHead cells inside TableBodyTableHead in TableHeader, TableCell in TableBody

Install with the shadcn CLI: npx shadcn add https://blank.vageshwar.dev/r/table.json