Table with interactive elements.

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

const items = [
  { id: "1", name: "Item Alpha", quantity: 1, price: "$10.00" },
  { id: "2", name: "Item Beta", quantity: 2, price: "$20.00" },
  { id: "3", name: "Item Gamma", quantity: 1, price: "$30.00" },
]
</script>

<template>
  <div class="mx-auto flex w-full max-w-lg flex-col">
    <Card class="p-0">
      <CardContent class="p-0">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Item</TableHead>
              <TableHead>Quantity</TableHead>
              <TableHead class="text-right">Price</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow v-for="item in items" :key="item.id">
              <TableCell class="font-medium">{{ item.name }}</TableCell>
              <TableCell>
                <Input type="number" :value="item.quantity" class="h-8 w-20" min="0" />
              </TableCell>
              <TableCell class="text-right">{{ item.price }}</TableCell>
            </TableRow>
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  </div>
</template>