Table
Rows of data in a square-cornered box: column heads on a black bar in small leaning capitals, cells in the text face, quiet lines between rows.
Install
# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/tableExamples
Jobs with a total
| Job | Route | Reward |
|---|---|---|
| J-104 | Rail yards → North gateRush | 3,100 cr |
| J-117 | Harbor → Old market | 1,450 cr |
| J-121 | Tower 9 → Canal docks | 2,275 cr |
| Total | 6,825 cr | |
import { Badge } from "@/components/zero/badge";import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow,} from "@/components/zero/table";const jobs = [ { id: "J-104", route: "Rail yards → North gate", reward: "3,100", rush: true, }, { id: "J-117", route: "Harbor → Old market", reward: "1,450", rush: false }, { id: "J-121", route: "Tower 9 → Canal docks", reward: "2,275", rush: false },];export default function TableJobs() { return ( <Table> <TableHeader> <TableRow> <TableHead>Job</TableHead> <TableHead>Route</TableHead> <TableHead className="text-right">Reward</TableHead> </TableRow> </TableHeader> <TableBody> {jobs.map((job, index) => ( <TableRow key={job.id} data-state={index === 0 ? "selected" : undefined} > <TableCell className="font-semibold">{job.id}</TableCell> <TableCell> <span className="flex items-center gap-3"> {job.route} {job.rush ? <Badge>Rush</Badge> : null} </span> </TableCell> <TableCell className="text-right tabular-nums"> {job.reward} cr </TableCell> </TableRow> ))} </TableBody> <TableFooter> <TableRow> <TableCell colSpan={2}>Total</TableCell> <TableCell className="text-right tabular-nums">6,825 cr</TableCell> </TableRow> </TableFooter> <TableCaption>Open jobs in the east district.</TableCaption> </Table> );}Behaviour
A row lights under the pointer. Mark a selected row with data-state="selected" or aria-selected: it keeps the light and carries the accent on its start edge.
The box scrolls sideways when the table is wider than it. Give figures text-right tabular-nums so they line up. It is a plain HTML table: sorting and selection are yours to wire.