table

Installation

npx @gentleduck/cli add table

npx @gentleduck/cli add table

Usage

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

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

<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>

Data Table

You can use the <Table /> component to build more complex data tables. Combine it with @gentleduck/table to create tables with sorting, filtering and pagination.

See the Data Table documentation for more information.

You can also see an example of a data table in the Tasks demo.

API Reference

Table

• props (React.ComponentProps<'table'>): Native props forwarded to the <table> element.

TableHeader

• props (React.ComponentProps<'thead'>): Native props forwarded to the <thead> element.

TableBody

• props (React.ComponentProps<'tbody'>): Native props forwarded to the <tbody> element.

TableFooter

• props (React.ComponentProps<'tfoot'>): Native props forwarded to the <tfoot> element.

TableRow

• props (React.ComponentProps<'tr'>): Native props forwarded to the <tr> element.

TableHead

• props (React.ComponentProps<'th'>): Native props forwarded to the <th> element.

TableCell

• props (React.ComponentProps<'td'>): Native props forwarded to the <td> element.

TableCaption

• props (React.ComponentProps<'caption'>): Native props forwarded to the <caption> element.

Behavior: These components provide a styled, accessible table structure with flexible customization via className and props forwarding. The Table component wraps the native <table> in a div for responsive overflow. Header, body, footer, rows, heads, cells, and caption have default styling with support for hover, selection, and alignment adjustments — including special handling for checkboxes inside cells.