Table

A composable table built from semantic HTML elements with consistent styling. Use the sub-components to build tables of any shape.

Basic Table

Invoice	Status	Method	Amount
INV-001	Paid	Credit Card	$250.00
INV-002	Pending	PayPal	$150.00
INV-003	Unpaid	Bank Transfer	$350.00
INV-004	Paid	Credit Card	$450.00

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>INV-001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
    {/* ...more rows */}
  </TableBody>
</Table>

API Reference

Table

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes to apply to the table element.

TableHeader

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the thead element.

TableHead

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the th element.

TableBody

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the tbody element.

TableRow

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the tr element.

TableCell

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the td element.