ComponentProduct
Table
Data table with headers, row separators, and tabular numbers.
$ npx context-ds add tableUsage
Use it for
Lists of records.
Avoid
- Vertical rules
- Uppercase headers
Example
examples/table.tsx
import { Badge } from "@/components/ui/badge";import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";const rows = [ { name: "Production", created: "Oct 2, 2026", requests: "48,210", status: "Active" }, { name: "Staging", created: "Sep 14, 2026", requests: "1,302", status: "Active" }, { name: "Old key", created: "Mar 3, 2026", requests: "0", status: "Revoked" },];export function Product() { return ( <div className="w-full max-w-2xl"> <Table> <TableHeader> <TableRow> <TableHead>Name</TableHead> <TableHead>Created</TableHead> <TableHead className="text-right">Requests</TableHead> <TableHead>Status</TableHead> </TableRow> </TableHeader> <TableBody> {rows.map((r) => ( <TableRow key={r.name}> <TableCell>{r.name}</TableCell> <TableCell className="text-fg-muted">{r.created}</TableCell> <TableCell className="text-right">{r.requests}</TableCell> <TableCell> <Badge variant={r.status === "Active" ? "success" : "default"}>{r.status}</Badge> </TableCell> </TableRow> ))} </TableBody> </Table> </div> );}Source
components/ui/table.tsx
import * as React from "react";import { cn } from "@/lib/utils";// The product's table (API keys, team, batches): on a card with no outer border and no vertical rules; a faint gray// header band in sentence case; rows divided by a light line; numbers in tabular figures.function Table({ className, ...props }: React.ComponentProps<"table">) { return ( <div data-slot="table-container" className="relative w-full overflow-x-auto rounded-card bg-surface shadow-card"> <table data-slot="table" className={cn("w-full caption-bottom border-collapse text-left text-body-sm", className)} {...props} /> </div> );}function TableHeader({ className, ...props }: React.ComponentProps<"thead">) { return <thead data-slot="table-header" className={cn("bg-neutral-10/40", className)} {...props} />;}function TableBody({ className, ...props }: React.ComponentProps<"tbody">) { return <tbody data-slot="table-body" className={cn("divide-y divide-line-subtle", className)} {...props} />;}function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) { return <tfoot data-slot="table-footer" className={cn("border-t border-line-subtle", className)} {...props} />;}function TableRow({ className, ...props }: React.ComponentProps<"tr">) { return <tr data-slot="table-row" className={cn("data-[state=selected]:bg-wash-selected", className)} {...props} />;}function TableHead({ className, ...props }: React.ComponentProps<"th">) { return <th data-slot="table-head" className={cn("px-3 py-2.5 text-caption font-normal whitespace-nowrap text-fg-subtle", className)} {...props} />;}function TableCell({ className, ...props }: React.ComponentProps<"td">) { return <td data-slot="table-cell" className={cn("px-3 py-3 text-body-sm text-fg tabular-nums", className)} {...props} />;}function TableCaption({ className, ...props }: React.ComponentProps<"caption">) { return <caption data-slot="table-caption" className={cn("mt-3 text-caption text-fg-subtle", className)} {...props} />;}export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };Reference: context-dashboard c0ddf7a src/components/api-keys/api-keys-page.tsx; src/components/team/team-page.tsx.