Table

A table presents rows and columns of structured data inside a scrollable, card-styled frame. Use it for records you compare across columns, like users, invoices, or transactions, where each row shares the same fields.

Preview

Installation

npx shadcn@latest add @cubby-ui/table

Usage

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

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

Composition

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

Table reads its variant props (bordered, striped, and the rest) and passes them to the cells via data attributes, so the styling flags live on the root.

Examples

With Footer

Use TableFooter to hold totals or summary rows below the body.

Scrollable

Constrain the table height with className to enable scrolling; the header stays sticky automatically.

Bordered

Set bordered on Table to draw borders on every cell for a grid look.

Striped

Set striped on Table to alternate row backgrounds for easier scanning.

Row Selection

Set selected on a TableRow to highlight it as the active selection.

API Reference

Props

Table

Root container that wraps the table and provides variant context to children via data attributes. Features a card-like appearance with a muted background border.

TableRow

Represents a row in the table. Supports polymorphic rendering via the render prop.

TableHeader, TableBody, TableFooter

Semantic table sections. All support polymorphic rendering via the render prop.

TableHead, TableCell

Table header and data cells. Inherit bordered variant from the parent Table. Both support polymorphic rendering via the render prop.

TableCaption

Table caption element. Supports polymorphic rendering via the render prop.