Table
A responsive table component for displaying structured data.
| 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 |
| Total | $1,750.00 | ||
Installation
npx radk add tableUsage
import {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"<Table>
<TableCaption>A list of your recent invoices.</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Invoice</TableHead>
<TableHead>Status</TableHead>
<TableHead className="text-right">Amount</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="font-bold">INV-001</TableCell>
<TableCell>Paid</TableCell>
<TableCell className="text-right">$250.00</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={2}>Total</TableCell>
<TableCell className="text-right">$250.00</TableCell>
</TableRow>
</TableFooter>
</Table>