Table

Semantic table with header, body, footer, rows, cells and a caption, inside a container that scrolls sideways.

Installation

pnpm dlx shadcn@latest add @ward/table

Add the Ward registry to components.json once:

"registries": {
  "@ward": "https://ward.so/r/{name}.json"
}

Or install from the URL with no configuration: npx shadcn@latest add https://ward.so/r/table.json

Usage

import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@/components/ui/table";
<Table>
  <TableCaption>Saved this week</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Collection</TableHead>
      <TableHead className="text-right">Sites</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow><TableCell>Landing pages</TableCell><TableCell className="text-right">24</TableCell></TableRow>
    <TableRow data-state="selected"><TableCell>Pricing tables</TableCell><TableCell className="text-right">9</TableCell></TableRow>
  </TableBody>
  <TableFooter>
    <TableRow><TableCell>Total</TableCell><TableCell className="text-right">33</TableCell></TableRow>
  </TableFooter>
</Table>

Props

PropTypeDefaultDescription
classNamestring-Extra classes for the table itself; it sits in a container that scrolls sideways when the columns do not fit.
TableRow data-state"selected"-Set to selected to tint the row, for example when its checkbox is ticked.
TableHead classNamestring-Add text-right to line a numeric column up with its cells.
TableCell classNamestring-Cells do not wrap; add whitespace-normal to let long text run onto more lines.
TableCaptionReactNode-Short description of the table, shown below it and read out by screen readers.

Ward · Version 1.0.0 · Registry manifest