88 lines
2.0 KiB
TypeScript
88 lines
2.0 KiB
TypeScript
import {
|
|
Table,
|
|
TableBody,
|
|
TableCaption,
|
|
TableCell,
|
|
TableFooter,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/styles/radix-nova/ui/table"
|
|
|
|
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 className="w-[100px]">Invoice</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>Method</TableHead>
|
|
<TableHead className="text-right">Amount</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{invoices.map((invoice) => (
|
|
<TableRow key={invoice.invoice}>
|
|
<TableCell className="font-medium">{invoice.invoice}</TableCell>
|
|
<TableCell>{invoice.paymentStatus}</TableCell>
|
|
<TableCell>{invoice.paymentMethod}</TableCell>
|
|
<TableCell className="text-right">{invoice.totalAmount}</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
<TableFooter>
|
|
<TableRow>
|
|
<TableCell colSpan={3}>Total</TableCell>
|
|
<TableCell className="text-right">$2,500.00</TableCell>
|
|
</TableRow>
|
|
</TableFooter>
|
|
</Table>
|
|
)
|
|
}
|