Table
Tabular data with headings and aligned cells.
Upstream documentationExamples
| Token | Role |
|---|---|
| Background | Page |
| Card | Surface |
| Popover | Overlay |
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Table
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/table.json'Usage
A complete example using the installed component and hook paths.
Table usage
"use client";import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";const surfaces = [ { token: "Background", role: "Page" }, { token: "Card", role: "Surface" }, { token: "Popover", role: "Overlay" },];const TablePreview = function TablePreview() { return ( <Table> <TableHeader> <TableRow> <TableHead>Token</TableHead> <TableHead>Role</TableHead> </TableRow> </TableHeader> <TableBody> {surfaces.map((surface) => ( <TableRow key={surface.token}> <TableCell>{surface.token}</TableCell> <TableCell className="text-muted-foreground">{surface.role}</TableCell> </TableRow> ))} </TableBody> </Table> ); };export default function Demo() { return <TablePreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Table
Table props
React.ComponentProps<"table">TableHeader
TableHeader props
React.ComponentProps<"thead">TableBody
TableBody props
React.ComponentProps<"tbody">TableFooter
TableFooter props
React.ComponentProps<"tfoot">TableHead
TableHead props
React.ComponentProps<"th">TableRow
TableRow props
React.ComponentProps<"tr">TableCell
TableCell props
React.ComponentProps<"td">TableCaption
TableCaption props
React.ComponentProps<"caption">