Table
Data table with header, body, footer, and row hover states
Preview
| Name | Status | Amount |
|---|---|---|
| Project Alpha | Active | $2,500 |
| Project Beta | Pending | $1,200 |
Usage
import {
Table,
TableHeader,
TableBody,
TableFooter,
TableHead,
TableRow,
TableCell,
TableCaption,
} from "@/components/ui/table"
<Table>
<TableCaption>A list of recent invoices.</TableCaption>
<TableHeader>
<TableRow>
<TableHead>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>Bank Transfer</TableCell>
<TableCell className="text-right">$150.00</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={3}>Total</TableCell>
<TableCell className="text-right">$400.00</TableCell>
</TableRow>
</TableFooter>
</Table>The table wrapper includes overflow-auto for horizontal scrolling on small screens. Rows highlight on hover with hover:bg-muted/50.
Install
npx shadcn add @bonsai/table