Table

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/table.json

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.