table
A responsive table component.
Philosophy
HTML tables are semantically powerful but visually bland. Our Table components add consistent styling while preserving the native table structure — <table>, <thead>, <tbody>, <tr>, <th>, <td> — because screen readers depend on these elements for data navigation. For interactive features like sorting and filtering, see Data 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 data-table examples in the Blocks Library.
Component Composition
API Reference
Table
| Prop | Type | Default | Description |
|---|---|---|---|
dir | 'ltr' | 'rtl' | -- | Text direction override. Resolved via useDirection (dir prop -> DirectionProvider -> 'ltr'). |
className | string | -- | Additional CSS class names |
children | React.ReactNode | -- | Table content (TableHeader, TableBody, TableFooter, TableCaption) |
...props | React.HTMLProps<HTMLTableElement> | -- | Additional props to spread to the table element |
TableHeader
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional CSS class names |
children | React.ReactNode | -- | Header rows |
...props | React.HTMLProps<HTMLTableSectionElement> | -- | Additional props to spread to the thead element |
TableBody
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional CSS class names |
children | React.ReactNode | -- | Body rows |
...props | React.HTMLProps<HTMLTableSectionElement> | -- | Additional props to spread to the tbody element |
TableFooter
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional CSS class names |
children | React.ReactNode | -- | Footer rows |
...props | React.HTMLProps<HTMLTableSectionElement> | -- | Additional props to spread to the tfoot element |
TableRow
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional CSS class names |
children | React.ReactNode | -- | Row cells (TableHead or TableCell) |
...props | React.HTMLProps<HTMLTableRowElement> | -- | Additional props to spread to the tr element |
TableHead
| Prop | Type | Default | Description |
|---|---|---|---|
scope | string | 'col' | HTML scope attribute for accessibility |
className | string | -- | Additional CSS class names |
children | React.ReactNode | -- | Header cell content |
...props | React.ThHTMLAttributes<HTMLTableCellElement> | -- | Additional props to spread to the th element |
TableCell
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional CSS class names |
children | React.ReactNode | -- | Cell content |
...props | React.TdHTMLAttributes<HTMLTableCellElement> | -- | Additional props to spread to the td element |
TableCaption
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | -- | Additional CSS class names |
children | React.ReactNode | -- | Caption text |
...props | React.HTMLProps<HTMLTableCaptionElement> | -- | Additional props to spread to the caption element |
RTL Support
Direction is resolved through the shared primitives direction module. Use a local dir="rtl" override when the component exposes it, or set DirectionProvider at app/root level for global RTL/LTR behavior.