Table

Ready

Static tabular data.

Invoice	Plan	Status	Amount
INV-001	Ultimate Workout	Paid	$20.00
INV-002	Premium Workout	Pending	$20.00
INV-003	Hybrid Athlete	Paid	$35.00

Installation

$ npx @oratiq-js/ui add table

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import

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

Default

Recent invoices.
Invoice	Plan	Status	Amount
INV-001	Ultimate Workout	Paid	$20.00
INV-002	Premium Workout	Pending	$20.00
INV-003	Hybrid Athlete	Paid	$35.00
Total			$75.00

Numeric columns

Pass numeric to a cell: it aligns to the end edge and switches to tabular figures, so the decimal points line up whichever direction the table reads.

Accessibility

Header cells are <th> with a scope, so screen readers can announce the column for each cell.
Overflow is scoped to the table's own container — the page body never scrolls horizontally.
A caption gives the table an accessible name; without one, a screen reader announces only 'table'.

View source on GitHub → components/ui/table.tsx