Data Display

Table

Styled semantic table primitives.

Import

tsx

import { Table } from "@cooud-ui/ui";

bash

npx cooud-ui add table

Examples

Basic

A styled static table with a header, body, footer, and an accessible caption.

A list of your recent invoices.
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
Total			$1,200.00

tsx

<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {invoices.map((invoice) => (
      <TableRow key={invoice.invoice}>
        <TableCell className="font-medium">{invoice.invoice}</TableCell>
        <TableCell>{invoice.status}</TableCell>
        <TableCell>{invoice.method}</TableCell>
        <TableCell className="text-right font-mono tabular-nums">{invoice.amount}</TableCell>
      </TableRow>
    ))}
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={3}>Total</TableCell>
      <TableCell className="text-right font-mono tabular-nums">$1,200.00</TableCell>
    </TableRow>
  </TableFooter>
</Table>