Table
A responsive table component.
Installation
›pnpm dlx shadcn@latest add @evolphin/table
Usage
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">INV-001</TableCell>
<TableCell>Paid</TableCell>
<TableCell>Credit Card</TableCell>
<TableCell className="text-right">$250.00</TableCell>
</TableRow>
</TableBody>
</Table>Examples
Default
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV-001 | Paid | Credit Card | $250.00 |
| INV-002 | Pending | PayPal | $150.00 |
| INV-003 | Unpaid | Bank Transfer | $350.00 |
| INV-004 | Paid | Credit Card | $450.00 |
| INV-005 | Paid | PayPal | $550.00 |
| INV-006 | Pending | Bank Transfer | $200.00 |
| INV-007 | Unpaid | Credit Card | $300.00 |
| Total | $2,250.00 | ||
API Reference
Table
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
TableHeader
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
TableBody
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
TableFooter
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
TableRow
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
TableHead
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
TableCell
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
TableCaption
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |