Table

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/table

UsageCopy Anchor Link

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

<Table>
  <TableCaption>Team members</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Role</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Ada Lovelace</TableCell>
      <TableCell>Engineer</TableCell>
    </TableRow>
  </TableBody>
</Table>;

TableCaption names the table for screen readers. If you don't want a visible caption, give the table an aria-label.

CardCopy Anchor Link

variant="card" gives the body rounded corners and a card surface.

Selected rowsCopy Anchor Link

Set data-state="selected" on a TableRow to highlight it.

API referenceCopy Anchor Link

Each part renders its HTML element (<table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>, <caption>) and accepts its attributes. Table wraps the <table> in a <div> that scrolls horizontally.