Basic table.

<script setup lang="ts">
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/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" },
]
</script>

<template>
  <div class="mx-auto flex w-full max-w-lg flex-col">
    <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>
        <TableRow v-for="invoice in invoices" :key="invoice.invoice">
          <TableCell class="text-sm font-medium">{{ invoice.invoice }}</TableCell>
          <TableCell class="text-sm">{{ invoice.paymentStatus }}</TableCell>
          <TableCell class="text-sm">{{ invoice.paymentMethod }}</TableCell>
          <TableCell class="text-right text-sm">{{ invoice.totalAmount }}</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  </div>
</template>