Data display

Table

Hand-authored tables for fixed, small lists.

@codeways/ui/table

Table primitives

Hand-authored tables for fixed, small lists - reach for DataTable once rows need sorting, filtering or paging state.

	Client	Date	Amount	Status
INV-000191	Lanka Tea Exports	3 Aug 2026	AUD1,850.00	Paid
INV-000192	Globex Digital	11 Aug 2026	USD4,200.00	Partially paid
INV-000193	Colombo Freight Co	14 Aug 2026	LKR612,500.00	Overdue by 12 days

Density

`data-density` on `<table>`, read by every `TableCell` in the group.

Invoice	Amount
INV-000191	AUD1,850.00
INV-000192	USD4,200.00
INV-000193	LKR612,500.00

Usage

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, SortableHead } from "@codeways/ui/table";

<Table density="comfortable">
  <TableHeader>
    <TableRow>
      <SortableHead label="Invoice" sort={sort} onSort={toggleSort} />
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {invoices.map((invoice) => (
      <TableRow key={invoice.id}>
        <TableCell>{invoice.number}</TableCell>
        <TableCell className="text-right">
          <Money amount={invoice.amount} currency={invoice.currency} />
        </TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>