# Table

> Data table primitives with semantic markup.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/table.json`

## Install

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

```tsx
const statusVariant = {
  paid: "default",
  pending: "secondary",
  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>
```

### Footer / totals row

TableFooter renders a <tfoot>: use it for a totals row that stays visually distinct from the body.

```tsx
<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</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 className="text-right">{invoice.amount}</TableCell>
      </TableRow>
    ))}
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell>Total</TableCell>
      <TableCell className="text-right">$950.00</TableCell>
    </TableRow>
  </TableFooter>
</Table>
```

### Row actions

A per-row kebab menu keeps destructive and secondary actions out of the way until needed.

```tsx
<TableRow>
  <TableCell className="font-medium">{invoice.id}</TableCell>
  <TableCell className="text-right">
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" aria-label={`Actions for ${invoice.id}`}>
          <MoreIcon />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuLabel>Actions</DropdownMenuLabel>
        <DropdownMenuItem>View</DropdownMenuItem>
        <DropdownMenuItem>Copy link</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">Void invoice</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  </TableCell>
</TableRow>
```

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