Table

Data table primitives with semantic markup.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
  TableCaption,
} from "@aspyn-io/kit";

Data table from an API response

Semantic table primitives — bring your own data fetching and state. Statuses map to Badge variants.

Recent invoices for this workspace.
Invoice	Status	Amount
INV-001	paid	$250.00
INV-002	pending	$150.00
INV-003	overdue	$550.00

const statusVariant = {
  paid: "success",
  pending: "warning",
  overdue: "destructive",
} as const;

<Table>
  <TableCaption>Recent invoices for this workspace.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {invoices.map((invoice) => (
      <TableRow key={invoice.id}>
        <TableCell className="font-medium">{invoice.id}</TableCell>
        <TableCell>
          <Badge variant={statusVariant[invoice.status]}>{invoice.status}</Badge>
        </TableCell>
        <TableCell className="text-right">{invoice.amount}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Notes

The wrapper div provides horizontal overflow scrolling on small screens automatically.
For sorting/filtering/pagination, pair with TanStack Table — these primitives are the render layer.