Data Display

Table

Semantic table primitives for dense data.

StableUsed in Aback LaunchRegistry JSON

Invoices for the Pro plan, in USD.
Invoice	Date	Amount	Status
INV-001	1 Sep 2026	$120.00	Paid
INV-002	1 Oct 2026	$120.00	Paid
INV-003	1 Nov 2026	$120.00	Open

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add table

Writes components/ui/table.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

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

Props and composition points for Table. Native element props pass through.

Prop	Type	Default	Description
`TableCaption`	`component`	None	A visible caption that also names the table for assistive technology.
`TableHead scope`	`"col" \| "row"`	"col"	Set to row for a table whose first cell in each row is a header.
`containerProps`	`React.ComponentProps<'div'>`	None	Props for the scroll container. Pass an aria-label to name a horizontally scrollable region.
`className`	`string`	None	Column width and alignment adjustments.

Dependencies: no extra packages, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

Use a caption or a nearby heading to name the table. A table without a name is hard to navigate.
Keep header cells in thead and set scope row when the first column identifies each row.
The scroll container is keyboard focusable so wide tables can be scrolled without a pointer.
Do not use table layout for page structure. Use CSS grid or flex instead.
Numbers belong in tabular-nums cells and should be right aligned with their header.

The Aback products whose interfaces shaped this component.