Table

Data grid table primitives matching design system divider and hairline border visual token specifications.

// Plain markup
import { Table, TableBody, TableCell, TableColumnHeaderCell, TableHeader, TableRow } from "@shavin/ui";

Sample table

Item	Amount	Due	Status
Enterprise API Tier	$2,400.00	Sep 30, 2026	Paid
Edge Compute (120M ops)	$480.00	Oct 1, 2026	Processing
Dedicated IPv4 Pool	$120.00	Oct 15, 2026	Scheduled
Audit Log Storage (90d)	$75.00	Oct 15, 2026	Scheduled

Component Source

<Table>
  <TableHeader>
    <TableRow>
      <TableColumnHeaderCell>Item</TableColumnHeaderCell>
      <TableColumnHeaderCell>Amount</TableColumnHeaderCell>
      <TableColumnHeaderCell>Due</TableColumnHeaderCell>
      <TableColumnHeaderCell>Status</TableColumnHeaderCell>
    </TableRow>
  </TableHeader>
  <TableBody>
    {ROWS.map((row) => (
      <TableRow key={row.name} onClick={() => {}}>
        <TableCell className="font-medium text-fg">{row.name}</TableCell>
        <TableCell>{row.amount}</TableCell>
        <TableCell>{row.due}</TableCell>
        <TableCell>{row.status}</TableCell>
      </TableRow>
    ))}
  </TableBody>
</Table>

Props

Table takes no props beyond className and the native element's attributes.