Table

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>

Examples

With Footer

Add footer rows for totals or summaries.

Scrollable

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

Bordered

Add borders to all cells for a grid appearance.

Striped

Alternate row backgrounds for better readability.

Row Selection

Select rows with visual feedback.

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.