Table with footer.

<script setup lang="ts">
import { Table, TableBody, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "@/components/ui/table"

const invoices = [
  { invoice: "INV001", status: "Paid", amount: "$250.00" },
  { invoice: "INV002", status: "Pending", amount: "$150.00" },
  { invoice: "INV003", status: "Unpaid", amount: "$350.00" },
]
</script>

<template>
  <div class="mx-auto flex w-full max-w-lg flex-col">
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead class="text-right">Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow v-for="invoice in invoices" :key="invoice.invoice">
          <TableCell class="font-medium">{{ invoice.invoice }}</TableCell>
          <TableCell>{{ invoice.status }}</TableCell>
          <TableCell class="text-right">{{ invoice.amount }}</TableCell>
        </TableRow>
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colspan="2">Total</TableCell>
          <TableCell class="text-right font-bold">$750.00</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  </div>
</template>