Table A data table component with sorting indicators, density options, alignment control, and semantic markup.
A data table component with sorting indicators, density options, alignment control, and proper semantic HTML markup.
A list of recent invoices. Invoice Status Method Amount INV-001 Paid Credit Card $250.00 INV-002 Pending PayPal $150.00 INV-003 Overdue Bank Transfer $350.00
<Table> <TableCaption>A list of recent invoices.</TableCaption> <TableHeader> <TableRow> <TableHead>Invoice</TableHead> <TableHead>Status</TableHead> <TableHead>Method</TableHead> <TableHead align="right">Amount</TableHead> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell className="font-medium">INV-001</TableCell> <TableCell><Badge variant="success" size="sm">Paid</Badge></TableCell> <TableCell>Credit Card</TableCell> <TableCell align="right">$250.00</TableCell> </TableRow> <TableRow> <TableCell className="font-medium">INV-002</TableCell> <TableCell><Badge variant="warning" size="sm">Pending</Badge></TableCell> <TableCell>PayPal</TableCell> <TableCell align="right">$150.00</TableCell> </TableRow> <TableRow> <TableCell className="font-medium">INV-003</TableCell> <TableCell><Badge variant="danger" size="sm">Overdue</Badge></TableCell> <TableCell>Bank Transfer</TableCell> <TableCell align="right">$350.00</TableCell> </TableRow> </TableBody> </Table> Install the component via the CLI in one command.
npm pnpm yarn bun
npx @work-rjkashyap/unified-ui add table pnpm dlx @work-rjkashyap/unified-ui add table npx @work-rjkashyap/unified-ui add table bunx @work-rjkashyap/unified-ui add table
If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.
Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.
npm pnpm yarn bun
npm install @work-rjkashyap/unified-ui pnpm add @work-rjkashyap/unified-ui yarn add @work-rjkashyap/unified-ui bun add @work-rjkashyap/unified-ui import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, Badge, } from "@work-rjkashyap/unified-ui" ; The Table component renders semantic HTML table elements (<table>, <thead>, <tbody>, <tr>, <th>, <td>) styled with design system tokens.
Name Email Role Alice Cooper alice@example.com Admin Bob Smith bob@example.com Editor
<Table> <TableHeader> <TableRow> <TableHead>Name</TableHead> <TableHead>Email</TableHead> <TableHead>Role</TableHead> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell>Alice Cooper</TableCell> <TableCell>alice@example.com</TableCell> <TableCell>Admin</TableCell> </TableRow> <TableRow> <TableCell>Bob Smith</TableCell> <TableCell>bob@example.com</TableCell> <TableCell>Editor</TableCell> </TableRow> </TableBody> </Table> The density prop on the root Table controls the vertical padding of all rows. Two options are available.
Compact
Name Value Item A 100 Item B 200
Comfortable (default)
Name Value Item A 100 Item B 200
{/* Compact — less vertical padding, good for dense data */} <Table density="compact"> <TableHeader> <TableRow> <TableHead>Name</TableHead> <TableHead>Value</TableHead> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell>Item A</TableCell> <TableCell>100</TableCell> </TableRow> </TableBody> </Table> {/* Comfortable — default, more breathing room */} <Table density="comfortable"> <TableHeader> <TableRow> <TableHead>Name</TableHead> <TableHead>Value</TableHead> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell>Item A</TableCell> <TableCell>100</TableCell> </TableRow> </TableBody> </Table> Density Vertical Padding Use Case compactReduced Data-dense tables, logs, admin panels comfortableDefault General-purpose tables, user-facing content
Use the align prop on TableHead and TableCell to control horizontal text alignment. This is especially useful for numeric columns.
Product Quantity Price Widget A 42 $9.99 Widget B 17 $24.99
<Table> <TableHeader> <TableRow> <TableHead>Product</TableHead> <TableHead align="center">Quantity</TableHead> <TableHead align="right">Price</TableHead> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell>Widget A</TableCell> <TableCell align="center">42</TableCell> <TableCell align="right">$9.99</TableCell> </TableRow> <TableRow> <TableCell>Widget B</TableCell> <TableCell align="center">17</TableCell> <TableCell align="right">$24.99</TableCell> </TableRow> </TableBody> </Table> Align Class Use Case lefttext-leftDefault. Text content, names, descriptions centertext-centerStatus indicators, quantities, boolean values righttext-rightNumeric values, prices, percentages
Use TableCaption to provide an accessible description of the table's content. The caption is rendered below the table by default.
Monthly revenue breakdown for Q4 2024. Month Revenue October $12,400 November $14,800 December $18,200
<Table> <TableCaption>Monthly revenue breakdown for Q4 2024.</TableCaption> <TableHeader> <TableRow> <TableHead>Month</TableHead> <TableHead align="right">Revenue</TableHead> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell>October</TableCell> <TableCell align="right">$12,400</TableCell> </TableRow> <TableRow> <TableCell>November</TableCell> <TableCell align="right">$14,800</TableCell> </TableRow> <TableRow> <TableCell>December</TableCell> <TableCell align="right">$18,200</TableCell> </TableRow> </TableBody> </Table> Use TableFooter for summary rows like totals.
Item Amount Hosting $50.00 Domain $12.00 SSL Certificate $0.00 Total $62.00
<Table> <TableHeader> <TableRow> <TableHead>Item</TableHead> <TableHead align="right">Amount</TableHead> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell>Hosting</TableCell> <TableCell align="right">$50.00</TableCell> </TableRow> <TableRow> <TableCell>Domain</TableCell> <TableCell align="right">$12.00</TableCell> </TableRow> <TableRow> <TableCell>SSL Certificate</TableCell> <TableCell align="right">$0.00</TableCell> </TableRow> </TableBody> <TableFooter> <TableRow> <TableCell className="font-semibold">Total</TableCell> <TableCell align="right" className="font-semibold">$62.00</TableCell> </TableRow> </TableFooter> </Table> The TableHead component supports a sortDirection prop to display a visual sort indicator (arrow). This is a purely visual prop — you handle the sort logic externally.
< Table > < TableHeader > < TableRow > < TableHead sortDirection = "asc" onClick = {() => handleSort ( "name" )} className = "cursor-pointer" > Name </ TableHead > < TableHead sortDirection = { null } onClick = {() => handleSort ( "email" )} className = "cursor-pointer" > Email </ TableHead > < TableHead align = "right" >Actions</ TableHead > </ TableRow > </ TableHeader > < TableBody >{ /* Sorted rows */ }</ TableBody > </ Table > sortDirectionVisual Description "asc"↑ Sorted ascending "desc"↓ Sorted descending null / omitted— Not sorted / no indicator
Add a striped prop to the root Table for alternating row backgrounds to improve readability in large data sets.
ID Name Status 001 Alice Active 002 Bob Inactive 003 Charlie Active
<Table striped> <TableHeader> <TableRow> <TableHead>ID</TableHead> <TableHead>Name</TableHead> <TableHead>Status</TableHead> </TableRow> </TableHeader> <TableBody> <TableRow> <TableCell>001</TableCell> <TableCell>Alice</TableCell> <TableCell>Active</TableCell> </TableRow> <TableRow> <TableCell>002</TableCell> <TableCell>Bob</TableCell> <TableCell>Inactive</TableCell> </TableRow> <TableRow> <TableCell>003</TableCell> <TableCell>Charlie</TableCell> <TableCell>Active</TableCell> </TableRow> </TableBody> </Table> For tables that may exceed the viewport width on mobile, wrap the Table in a horizontally scrollable container.
< div className = "overflow-x-auto rounded-md border border-border" > < Table > < TableHeader > < TableRow > < TableHead >ID</ TableHead > < TableHead >Name</ TableHead > < TableHead >Email</ TableHead > < TableHead >Role</ TableHead > < TableHead >Department</ TableHead > < TableHead align = "right" >Joined</ TableHead > </ TableRow > </ TableHeader > < TableBody >{ /* Many columns that may overflow */ }</ TableBody > </ Table > </ div > Prop Type Default Description density"compact" | "comfortable""comfortable"Vertical padding density for all rows. stripedbooleanfalseWhether to apply alternating row backgrounds. classNamestring— Additional CSS classes.
Prop Type Default Description classNamestring— Additional CSS classes.
Prop Type Default Description classNamestring— Additional CSS classes.
Prop Type Default Description classNamestring— Additional CSS classes.
Prop Type Default Description classNamestring— Additional CSS classes.
Prop Type Default Description align"left" | "center" | "right""left"Horizontal text alignment. sortDirection"asc" | "desc" | null— Sort indicator direction. classNamestring— Additional CSS classes.
Prop Type Default Description align"left" | "center" | "right""left"Horizontal text alignment. classNamestring— Additional CSS classes.
Prop Type Default Description classNamestring— Additional CSS classes.
The Table component uses semantic HTML elements (table, thead, tbody,
tfoot, tr, th, td, caption) for full screen reader support without
requiring additional ARIA attributes.
Uses native HTML table elements which are natively accessible to screen readers and assistive technology.
TableCaption renders as a <caption> element, providing an accessible description of the table.TableHead renders as <th> with proper scope attributes for column/row headers.Sort indicators include aria-sort attributes (ascending, descending, none) on sortable column headers.
Focus ring is visible on sortable headers when navigated via keyboard.
The table is wrapped in a container that allows horizontal scrolling on small viewports without breaking layout.
Token Usage --surfaceTable background --border-mutedRow borders --mutedStriped row background, footer background --foregroundHeader and cell text --muted-foregroundCaption text --duration-fastHover transition speed