Table
A responsive table component.
Preview
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
| INV006 | Pending | Bank Transfer | $200.00 |
| INV007 | Unpaid | Credit Card | $300.00 |
| Total | $2,500.00 | ||
Installation
$npx maddex add Table
Usage
1<!-- @import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from ../../lib/components -->
2
3<Table>
4 <TableCaption>A list of your recent invoices.</TableCaption>
5 <TableHeader>
6 <TableRow>
7 <TableHead class="w-[100px]">Invoice</TableHead>
8 <TableHead>Status</TableHead>
9 <TableHead>Method</TableHead>
10 <TableHead class="text-right">Amount</TableHead>
11 </TableRow>
12 </TableHeader>
13 <TableBody>
14 <TableRow>
15 <TableCell class="font-medium">INV001</TableCell>
16 <TableCell>Paid</TableCell>
17 <TableCell>Credit Card</TableCell>
18 <TableCell class="text-right">$250.00</TableCell>
19 </TableRow>
20 </TableBody>
21</Table>