Table

A composable table component for displaying structured tabular data.

Import

tsx

import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@tac-ui/web';

Basic

A minimal table using TableHeader, TableBody, TableRow, TableHead, and TableCell. Rows gain a hover highlight by default.

Name	Role	Email
Alice Martin	Engineer	[email protected]
Bob Chen	Designer	[email protected]
Carol White	Product	[email protected]
David Kim	Engineer	[email protected]

tsx

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Role</TableHead>
      <TableHead>Email</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Alice Martin</TableCell>
      <TableCell>Engineer</TableCell>
      <TableCell>[email protected]</TableCell>
    </TableRow>
    {/* ...more rows */}
  </TableBody>
</Table>

Invoice Example

A complete table with header, body, footer for totals, a caption, and status badges — demonstrating all subcomponents together.

Recent invoices — Q1 2025
Invoice	Client	Date	Status	Amount
INV-001	Acme Corp	Jan 12, 2025	Paid	$1,250.00
INV-002	Globex Inc	Jan 18, 2025	Pending	$850.00
INV-003	Initech	Jan 22, 2025	Failed	$3,400.00
INV-004	Umbrella Ltd	Feb 01, 2025	Paid	$620.00
INV-005	Hooli	Feb 05, 2025	Pending	$2,100.00
Total				$8,220.00

tsx

<Table>
  <TableCaption>Recent invoices — Q1 2025</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Client</TableHead>
      <TableHead>Date</TableHead>
      <TableHead>Status</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>INV-001</TableCell>
      <TableCell>Acme Corp</TableCell>
      <TableCell>Jan 12, 2025</TableCell>
      <TableCell><Badge variant="success">Paid</Badge></TableCell>
      <TableCell className="text-right">$1,250.00</TableCell>
    </TableRow>
    {/* ...more rows */}
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={4}>Total</TableCell>
      <TableCell className="text-right">$8,220.00</TableCell>
    </TableRow>
  </TableFooter>
</Table>

With Caption

TableCaption renders an accessible caption below the table, useful for labeling the data context.

Team members — Engineering
Name	Role
Alice Martin	Engineer
Bob Chen	Designer

tsx

<Table>
  <TableCaption>Team members — Engineering</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Alice Martin</TableCell>
      <TableCell>Engineer</TableCell>
    </TableRow>
  </TableBody>
</Table>

API Reference

All subcomponents accept standard HTML element attributes (className, style, etc.) and forward their ref to the underlying DOM element.

Prop	Type	Default	Description
Table	React.HTMLAttributes<HTMLTableElement>	-	Root table element wrapped in a horizontally-scrollable container.
TableHeader	React.HTMLAttributes<HTMLTableSectionElement>	-	Renders <thead>. Applies a subtle background and border-bottom to its rows.
TableBody	React.HTMLAttributes<HTMLTableSectionElement>	-	Renders <tbody>. Removes the border from the last row automatically.
TableFooter	React.HTMLAttributes<HTMLTableSectionElement>	-	Renders <tfoot> with a top border and secondary background for totals or summaries.
TableRow	React.HTMLAttributes<HTMLTableRowElement>	-	Renders <tr> with hover highlight. Applies selected styling when data-state="selected".
TableHead	React.ThHTMLAttributes<HTMLTableCellElement>	-	Renders <th scope="col"> with muted foreground text and medium font weight.
TableCell	React.TdHTMLAttributes<HTMLTableCellElement>	-	Renders <td> with standard padding and middle vertical alignment.
TableCaption	React.HTMLAttributes<HTMLTableCaptionElement>	-	Renders <caption> positioned below the table in muted foreground text.