Components
Table A data table with automatic column sizing and compound sub-components
A data table with automatic column detection, horizontal-only separators, and
a compound sub-component API for full layout control.
Run demo bunx curl
bunx @gridland/demo table curl -fsSL https://raw.githubusercontent.com/thoughtfulllc/gridland/main/scripts/run-demo.sh | bash -s table bunx shadcn@latest add @gridland/table import { Table } from "@/components/ui/table" < Table data = {[ { name: "Alice" , role: "Engineer" , status: "Active" }, { name: "Bob" , role: "Designer" , status: "Active" }, { name: "Charlie" , role: "PM" , status: "Away" }, ]} /> Select and order which columns to display.
< Table data = {[ { name: "Alice" , age: 30 , role: "Engineer" }, { name: "Bob" , age: 25 , role: "Designer" }, ]} columns = {[ "name" , "role" ]} /> Override the default header and separator colors.
< Table data = {[ { name: "Alice" , role: "Engineer" }, { name: "Bob" , role: "Designer" }, ]} headerColor = "cyan" borderColor = "#5e81ac" /> For full layout control, use TableRoot with sub-components.
import { TableRoot, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, } from "@/components/ui/table" < TableRoot > < TableCaption >A list of your recent invoices.</ TableCaption > < TableHeader > < TableRow > < TableHead >Invoice</ TableHead > < TableHead >Status</ TableHead > < TableHead >Amount</ TableHead > </ TableRow > </ TableHeader > < TableBody > < TableRow > < TableCell >INV001</ TableCell > < TableCell >Paid</ TableCell > < TableCell >$250.00</ TableCell > </ TableRow > </ TableBody > < TableFooter > < TableRow > < TableCell >Total</ TableCell > < TableCell ></ TableCell > < TableCell >$250.00</ TableCell > </ TableRow > </ TableFooter > </ TableRoot > Component Description TableRootCompound root — computes column widths and provides layout context TableHeaderWraps header rows with a solid separator below TableBodyWraps body rows with dimmed separators between them TableFooterWraps footer rows with a solid separator above TableRowReads TableHead/TableCell children and renders a styled row TableHeadHeader cell — does not render on its own TableCellBody cell — does not render on its own TableCaptionMuted caption text below the table
Data-driven table with automatic column detection.
Prop Type Default Description dataT[]- Array of data objects to display columns(keyof T)[]- Keys to display as columns (auto-detected if omitted) paddingnumber1Cell padding in characters headerColorstringtheme.foregroundHeader text color borderColorstringtheme.mutedSeparator line color
Compound root that computes column widths from the component tree.
Prop Type Default Description childrenReactNode- Table sub-components paddingnumber1Cell padding in characters headerColorstringtheme.foregroundHeader text color borderColorstringtheme.mutedSeparator line color
Prop Type Description childrenReactNodeOne or more TableRow components
Prop Type Description childrenReactNodeOne or more TableRow components
Prop Type Description childrenReactNodeOne or more TableRow components
Prop Type Description childrenReactNodeTableHead or TableCell components
Prop Type Description childrenReactNodeCell content (typically a string)
Prop Type Description childrenReactNodeCell content (typically a string)
Prop Type Description childrenReactNodeCaption text