primitives

Table

HTML table primitives styled to match the system. For product list-pages with sort, pagination and selection use `<DSTable>` instead — this primitive is the lower-level building block.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/table.json

Or import from the workspace package:

import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from "@8maverik8/design";

Examples

Static

Name	Status
Pegasus	Active
Hydra	Paused

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow><TableCell>Pegasus</TableCell><TableCell>Active</TableCell></TableRow>
    <TableRow><TableCell>Hydra</TableCell><TableCell>Paused</TableCell></TableRow>
  </TableBody>
</Table>

Guidelines

Use `<DSTable>` whenever you have a typed array of rows + columns. It handles sort, sticky header and pagination for free.
Add row hover stripes.Project rule: tables extend to the page gutters with no left/right cell padding, so a hover bar looks misaligned. Click affordance lives on the lead-column cell, not the row.