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
Netflix subscription	$15.49	Tomorrow	Pending
Car EMI	$420.00	in 3 days	Pending
Rent	$1,800.00	Aug 1	Scheduled
Gym membership	$40.00	Aug 5	Scheduled

<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.