Table

Composable, semantic building blocks — a real <table>, not div-soup — plus a SortableTableHead helper with aria-sort wired up.

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Role</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Ada Lovelace</TableCell>
      <TableCell>Owner</TableCell>
      <TableCell><Badge variant="success">Active</Badge></TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Grace Hopper</TableCell>
      <TableCell>Admin</TableCell>
      <TableCell><Badge variant="success">Active</Badge></TableCell>
    </TableRow>
  </TableBody>
</Table>

Editable — change the code above and the preview updates live.

There is no data/columns prop — compose exactly the rows and columns your data needs, the same way you'd write HTML.

Installation

import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, SortableTableHead } from "@labanaat/ui/table";

Props

Prop	Type	Default	Description
direction	"asc" \| "desc" \| null	—	Current sort direction (on SortableTableHead)
onSortChange	(direction) => void	—	Called when the sort control is clicked (on SortableTableHead)

All other subcomponents accept standard HTML table-element attributes.