Table

npx shadcn@latest add https://ui.saasflare.io/r/table.json

pnpm add @saasflare/ui

"use client"import {    Badge,    Table,    TableBody,    TableCaption,    TableCell,    TableHead,    TableHeader,    TableRow,} from "@saasflare/ui"const INVOICES = [    { id: "INV-2041", customer: "Acme Corp", plan: "Enterprise", amount: "$1,299.00", status: "Paid" },    { id: "INV-2040", customer: "Globex", plan: "Pro", amount: "$290.00", status: "Paid" },    { id: "INV-2039", customer: "Initech", plan: "Pro", amount: "$290.00", status: "Pending" },    { id: "INV-2038", customer: "Umbrella", plan: "Starter", amount: "$49.00", status: "Overdue" },]const STATUS_INTENT = {    Paid: "success",    Pending: "warning",    Overdue: "danger",} as const/** An invoice table with header, body, and a status column. */export function Demo() {    return (        <Table>            <TableCaption>Recent invoices for the current billing period.</TableCaption>            <TableHeader>                <TableRow>                    <TableHead>Invoice</TableHead>                    <TableHead>Customer</TableHead>                    <TableHead>Plan</TableHead>                    <TableHead className="text-right">Amount</TableHead>                    <TableHead>Status</TableHead>                </TableRow>            </TableHeader>            <TableBody>                {INVOICES.map((invoice) => (                    <TableRow key={invoice.id}>                        <TableCell className="font-medium">{invoice.id}</TableCell>                        <TableCell>{invoice.customer}</TableCell>                        <TableCell>{invoice.plan}</TableCell>                        <TableCell className="text-right">{invoice.amount}</TableCell>                        <TableCell>                            <Badge variant="soft" intent={STATUS_INTENT[invoice.status as keyof typeof STATUS_INTENT]}>                                {invoice.status}                            </Badge>                        </TableCell>                    </TableRow>                ))}            </TableBody>        </Table>    )}

"use client"import {    Table,    TableBody,    TableCell,    TableFooter,    TableHead,    TableHeader,    TableRow,} from "@saasflare/ui"const USAGE = [    { item: "API requests", quantity: "1,240,000", cost: "$124.00" },    { item: "Bandwidth (GB)", quantity: "820", cost: "$41.00" },    { item: "Active seats", quantity: "18", cost: "$360.00" },]/** A usage table with a totals row in the footer. */export function Demo() {    return (        <Table>            <TableHeader>                <TableRow>                    <TableHead>Line item</TableHead>                    <TableHead className="text-right">Quantity</TableHead>                    <TableHead className="text-right">Cost</TableHead>                </TableRow>            </TableHeader>            <TableBody>                {USAGE.map((row) => (                    <TableRow key={row.item}>                        <TableCell className="font-medium">{row.item}</TableCell>                        <TableCell className="text-right">{row.quantity}</TableCell>                        <TableCell className="text-right">{row.cost}</TableCell>                    </TableRow>                ))}            </TableBody>            <TableFooter>                <TableRow>                    <TableCell colSpan={2}>Total due</TableCell>                    <TableCell className="text-right">$525.00</TableCell>                </TableRow>            </TableFooter>        </Table>    )}