table

1---
2// Generated from bejamas-juno style registry. Do not edit packages/ui/src/components/table/Table.astro directly.
3/**
4 * @component Table
5 * @title Table
6 * @description A responsive table component with compound parts for header, body, footer, and caption.
7 *
8 * @preview
9 *
10 * <Table>
11 *   <TableCaption>A list of your recent invoices.</TableCaption>
12 *   <TableHeader>
13 *     <TableRow>
14 *       <TableHead class="w-[100px]">Invoice</TableHead>
15 *       <TableHead>Status</TableHead>
16 *       <TableHead>Method</TableHead>
17 *       <TableHead class="text-right">Amount</TableHead>
18 *     </TableRow>
19 *   </TableHeader>
20 *   <TableBody>
21 *     <TableRow>
22 *       <TableCell class="font-medium">INV001</TableCell>
23 *       <TableCell>Paid</TableCell>
24 *       <TableCell>Credit Card</TableCell>
25 *       <TableCell class="text-right">$250.00</TableCell>
26 *     </TableRow>
27 *     <TableRow>
28 *       <TableCell class="font-medium">INV002</TableCell>
29 *       <TableCell>Pending</TableCell>
30 *       <TableCell>PayPal</TableCell>
31 *       <TableCell class="text-right">$150.00</TableCell>
32 *     </TableRow>
33 *     <TableRow>
34 *       <TableCell class="font-medium">INV003</TableCell>
35 *       <TableCell>Unpaid</TableCell>
36 *       <TableCell>Bank Transfer</TableCell>
37 *       <TableCell class="text-right">$350.00</TableCell>
38 *     </TableRow>
39 *     <TableRow>
40 *       <TableCell class="font-medium">INV004</TableCell>
41 *       <TableCell>Paid</TableCell>
42 *       <TableCell>Credit Card</TableCell>
43 *       <TableCell class="text-right">$450.00</TableCell>
44 *     </TableRow>
45 *     <TableRow>
46 *       <TableCell class="font-medium">INV005</TableCell>
47 *       <TableCell>Paid</TableCell>
48 *       <TableCell>PayPal</TableCell>
49 *       <TableCell class="text-right">$550.00</TableCell>
50 *     </TableRow>
51 *     <TableRow>
52 *       <TableCell class="font-medium">INV006</TableCell>
53 *       <TableCell>Pending</TableCell>
54 *       <TableCell>Bank Transfer</TableCell>
55 *       <TableCell class="text-right">$200.00</TableCell>
56 *     </TableRow>
57 *     <TableRow>
58 *       <TableCell class="font-medium">INV007</TableCell>
59 *       <TableCell>Unpaid</TableCell>
60 *       <TableCell>Credit Card</TableCell>
61 *       <TableCell class="text-right">$300.00</TableCell>
62 *     </TableRow>
63 *   </TableBody>
64 *   <TableFooter>
65 *     <TableRow>
66 *       <TableCell colspan={3}>Total</TableCell>
67 *       <TableCell class="text-right">$2,500.00</TableCell>
68 *     </TableRow>
69// … truncated