Table

Installation#

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/table

Anatomy#

Table
├── TableCaption
├── TableHeader
│   └── TableRow
│       └── TableHead
├── TableBody
│   └── TableRow
│       └── TableCell
└── TableFooter
    └── TableRow
        └── TableCell

Usage#

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

<Table>
  <TableCaption />
  <TableHeader>
    <TableRow>
      <TableHead />
      <TableHead />
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell />
      <TableCell />
    </TableRow>
  </TableBody>
  <TableFooter />
</Table>

Accessibility#

Always use a TableCaption to help assistive technologies announce what the table represents.

Use with the sr-only class to make the caption screen-reader only if you don't want to show it.

<Table>
  <TableCaption className="sr-only">
    Monthly revenue by product.
  </TableCaption>
  {/* ... */}
</Table>

Examples#

Striped#

Use variant="striped" on Table for alternating row backgrounds.

With footer#

Use TableFooter for summary rows, totals, or notes.

With actions#

Add an actions column with buttons per row.

With action bar#

Use checkboxes for row selection and an action bar that appears when one or more rows are selected. See the action bar component.

With context menu#

Wrap each row with ContextMenuTrigger so right-clicking shows a context menu with row actions.

Disable row hover#

Set isHoverable={false} on Table to disable the hover background on body rows.

API Reference#

Table#

Scrollable wrapper around a native table. Supports striped and hover variants.

TableHeader#

Table header row group.

TableBody#

Table body row group.

TableFooter#

Table footer row group for totals or summary rows.

TableRow#

A single table row.

TableHead#

Header cell for column titles.

TableCell#

Data cell for body or footer rows.

TableCaption#

Accessible caption describing the table. Use sr-only for screen-reader only.