A responsive table component.
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 |
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "https://deno.land/x/testing_shadcn_ui_for_deno@0.1.2/components/table.tsx"
const invoices = [
{ invoice: "INV001", paymentStatus: "Paid",
totalAmount: "$250.00", paymentMethod: "Credit Card" },
{ invoice: "INV002", paymentStatus: "Pending",
totalAmount: "$150.00", paymentMethod: "PayPal" },
{ invoice: "INV003", paymentStatus: "Unpaid",
totalAmount: "$350.00", paymentMethod: "Bank Transfer" },
{ invoice: "INV004", paymentStatus: "Paid",
totalAmount: "$450.00", paymentMethod: "Credit Card" },
{ invoice: "INV005", paymentStatus: "Paid",
totalAmount: "$550.00", paymentMethod: "PayPal" },
{ invoice: "INV006", paymentStatus: "Pending",
totalAmount: "$200.00", paymentMethod: "Bank Transfer" },
{ invoice: "INV007", paymentStatus: "Unpaid",
totalAmount: "$300.00", paymentMethod: "Credit Card" },
]
export function TableDemo() {
return (
<Table>
<TableCaption>A list of your recent invoices.</TableCaption>
<TableHeader>
<TableRow>
<TableHead class="w-[100px]">Invoice</TableHead>
<TableHead>Status</TableHead>
<TableHead>Method</TableHead>
<TableHead class="text-right">Amount</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{invoices.map((invoice) => (
<TableRow key={invoice.invoice}>
<TableCell class="font-medium">{invoice.invoice}</TableCell>
<TableCell>{invoice.paymentStatus}</TableCell>
<TableCell>{invoice.paymentMethod}</TableCell>
<TableCell class="text-right">{invoice.totalAmount}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
)
}