Table
Component
Section titled “Component” Preview react
import {Table,TableBody,TableCaption,TableCell,TableFooter,TableHead,TableHeader,TableRow,} from "@/components/ui/table"
export function TableDemo() {return ( <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> <TableRow> <TableCell className="font-medium">INV002</TableCell> <TableCell>Pending</TableCell> <TableCell>PayPal</TableCell> <TableCell className="text-right">$150.00</TableCell> </TableRow> <TableRow> <TableCell className="font-medium">INV003</TableCell> <TableCell>Paid</TableCell> <TableCell>Bank Transfer</TableCell> <TableCell className="text-right">$350.00</TableCell> </TableRow> </TableBody> <TableFooter> <TableRow> <TableCell colSpan={3}>Total</TableCell> <TableCell className="text-right">$750.00</TableCell> </TableRow> </TableFooter> </Table>)}Installation
Section titled “Installation”npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/table.jsonpnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/table.jsonbunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/table.jsonimport { forwardRef, type HTMLAttributes, type TdHTMLAttributes, type ThHTMLAttributes } from "react"import { cn } from "@/lib/utils"
const Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>( ({ className, ...props }, ref) => ( <div className="relative w-full overflow-auto"> <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} /> </div> ),)Table.displayName = "Table"
const TableHeader = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>( ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,)TableHeader.displayName = "TableHeader"
const TableBody = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>( ({ className, ...props }, ref) => ( <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} /> ),)TableBody.displayName = "TableBody"
const TableFooter = forwardRef<HTMLTableSectionElement, HTMLAttributes<HTMLTableSectionElement>>( ({ className, ...props }, ref) => ( <tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} /> ),)TableFooter.displayName = "TableFooter"
const TableRow = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTableRowElement>>( ({ className, ...props }, ref) => ( <tr ref={ref} className={cn( "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className, )} {...props} /> ),)TableRow.displayName = "TableRow"
const TableHead = forwardRef<HTMLTableCellElement, ThHTMLAttributes<HTMLTableCellElement>>( ({ className, ...props }, ref) => ( <th ref={ref} className={cn( "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className, )} {...props} /> ),)TableHead.displayName = "TableHead"
const TableCell = forwardRef<HTMLTableCellElement, TdHTMLAttributes<HTMLTableCellElement>>( ({ className, ...props }, ref) => ( <td ref={ref} className={cn( "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className, )} {...props} /> ),)TableCell.displayName = "TableCell"
const TableCaption = forwardRef<HTMLTableCaptionElement, HTMLAttributes<HTMLTableCaptionElement>>( ({ className, ...props }, ref) => ( <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} /> ),)TableCaption.displayName = "TableCaption"
export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow }API Reference
Section titled “API Reference”The main table container component.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
TableHeader
Section titled “TableHeader”The table header container.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
TableBody
Section titled “TableBody”The table body container.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
TableFooter
Section titled “TableFooter”The table footer container.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
TableRow
Section titled “TableRow”A table row component.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
TableHead
Section titled “TableHead”A table header cell component.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
TableCell
Section titled “TableCell”A table cell component.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
TableCaption
Section titled “TableCaption”A table caption component.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |