@cl-light-ds/ui 0.2.0 → 0.3.0

package/src/components/table/Table.astro

@@ -1,251 +1,358 @@
----
-/**
- * @component Table
- * @title Table
- * @description A responsive table component with compound parts for header, body, footer, and caption.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5548-9089
- *
- * @preview
- *
- * <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>
- *       <TableCell class="font-medium">INV001</TableCell>
- *       <TableCell>Paid</TableCell>
- *       <TableCell>Credit Card</TableCell>
- *       <TableCell class="text-right">$250.00</TableCell>
- *     </TableRow>
- *     <TableRow>
- *       <TableCell class="font-medium">INV002</TableCell>
- *       <TableCell>Pending</TableCell>
- *       <TableCell>PayPal</TableCell>
- *       <TableCell class="text-right">$150.00</TableCell>
- *     </TableRow>
- *     <TableRow>
- *       <TableCell class="font-medium">INV003</TableCell>
- *       <TableCell>Unpaid</TableCell>
- *       <TableCell>Bank Transfer</TableCell>
- *       <TableCell class="text-right">$350.00</TableCell>
- *     </TableRow>
- *     <TableRow>
- *       <TableCell class="font-medium">INV004</TableCell>
- *       <TableCell>Paid</TableCell>
- *       <TableCell>Credit Card</TableCell>
- *       <TableCell class="text-right">$450.00</TableCell>
- *     </TableRow>
- *     <TableRow>
- *       <TableCell class="font-medium">INV005</TableCell>
- *       <TableCell>Paid</TableCell>
- *       <TableCell>PayPal</TableCell>
- *       <TableCell class="text-right">$550.00</TableCell>
- *     </TableRow>
- *     <TableRow>
- *       <TableCell class="font-medium">INV006</TableCell>
- *       <TableCell>Pending</TableCell>
- *       <TableCell>Bank Transfer</TableCell>
- *       <TableCell class="text-right">$200.00</TableCell>
- *     </TableRow>
- *     <TableRow>
- *       <TableCell class="font-medium">INV007</TableCell>
- *       <TableCell>Unpaid</TableCell>
- *       <TableCell>Credit Card</TableCell>
- *       <TableCell class="text-right">$300.00</TableCell>
- *     </TableRow>
- *   </TableBody>
- *   <TableFooter>
- *     <TableRow>
- *       <TableCell colspan={3}>Total</TableCell>
- *       <TableCell class="text-right">$2,500.00</TableCell>
- *     </TableRow>
- *   </TableFooter>
- * </Table>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import {
- *   Table,
- *   TableBody,
- *   TableCaption,
- *   TableCell,
- *   TableFooter,
- *   TableHead,
- *   TableHeader,
- *   TableRow,
- * } from '@bejamas/ui/components/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" },
- * ];
- * ---
- *
- * <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>
- *     {invoices.map((invoice) => (
- *       <TableRow>
- *         <TableCell class="font-medium">{invoice.invoice}</TableCell>
- *         <TableCell>{invoice.paymentStatus}</TableCell>
- *         <TableCell>{invoice.paymentMethod}</TableCell>
- *         <TableCell class="text-right">{invoice.totalAmount}</TableCell>
- *       </TableRow>
- *     ))}
- *   </TableBody>
- *   <TableFooter>
- *     <TableRow>
- *       <TableCell colspan={3}>Total</TableCell>
- *       <TableCell class="text-right">$2,500.00</TableCell>
- *     </TableRow>
- *   </TableFooter>
- * </Table>
- * ```
- *
- * @examples
- *
- * ### Footer
- *
- * Use the `<TableFooter />` component to add a footer to the table.
- *
- * <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>
- *       <TableCell class="font-medium">INV001</TableCell>
- *       <TableCell>Paid</TableCell>
- *       <TableCell>Credit Card</TableCell>
- *       <TableCell class="text-right">$250.00</TableCell>
- *     </TableRow>
- *     <TableRow>
- *       <TableCell class="font-medium">INV002</TableCell>
- *       <TableCell>Pending</TableCell>
- *       <TableCell>PayPal</TableCell>
- *       <TableCell class="text-right">$150.00</TableCell>
- *     </TableRow>
- *     <TableRow>
- *       <TableCell class="font-medium">INV003</TableCell>
- *       <TableCell>Unpaid</TableCell>
- *       <TableCell>Bank Transfer</TableCell>
- *       <TableCell class="text-right">$350.00</TableCell>
- *     </TableRow>
- *   </TableBody>
- *   <TableFooter>
- *     <TableRow>
- *       <TableCell colspan={3}>Total</TableCell>
- *       <TableCell class="text-right">$2,500.00</TableCell>
- *     </TableRow>
- *   </TableFooter>
- * </Table>
- *
- * ### Actions
- *
- * A table showing actions for each row using a `<DropdownMenu />` component.
- *
- * <Table>
- *   <TableHeader>
- *     <TableRow>
- *       <TableHead>Product</TableHead>
- *       <TableHead>Price</TableHead>
- *       <TableHead class="text-right">Actions</TableHead>
- *     </TableRow>
- *   </TableHeader>
- *   <TableBody>
- *     <TableRow>
- *       <TableCell class="font-medium">Wireless Mouse</TableCell>
- *       <TableCell>$29.99</TableCell>
- *       <TableCell class="text-right">
- *         <DropdownMenu>
- *           <DropdownMenuTrigger variant="ghost" size="icon" class="size-8" tailIcon={false}><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
- *           <DropdownMenuContent align="end">
- *             <DropdownMenuItem>Edit</DropdownMenuItem>
- *             <DropdownMenuItem>Duplicate</DropdownMenuItem>
- *             <DropdownMenuSeparator />
- *             <DropdownMenuItem class="text-destructive">Delete</DropdownMenuItem>
- *           </DropdownMenuContent>
- *         </DropdownMenu>
- *       </TableCell>
- *     </TableRow>
- *     <TableRow>
- *       <TableCell class="font-medium">Mechanical Keyboard</TableCell>
- *       <TableCell>$129.99</TableCell>
- *       <TableCell class="text-right">
- *         <DropdownMenu>
- *           <DropdownMenuTrigger variant="ghost" size="icon" class="size-8" tailIcon={false}><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
- *           <DropdownMenuContent align="end">
- *             <DropdownMenuItem>Edit</DropdownMenuItem>
- *             <DropdownMenuItem>Duplicate</DropdownMenuItem>
- *             <DropdownMenuSeparator />
- *             <DropdownMenuItem class="text-destructive">Delete</DropdownMenuItem>
- *           </DropdownMenuContent>
- *         </DropdownMenu>
- *       </TableCell>
- *     </TableRow>
- *     <TableRow>
- *       <TableCell class="font-medium">USB-C Hub</TableCell>
- *       <TableCell>$49.99</TableCell>
- *       <TableCell class="text-right">
- *         <DropdownMenu>
- *           <DropdownMenuTrigger variant="ghost" size="icon" class="size-8" tailIcon={false}><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
- *           <DropdownMenuContent align="end">
- *             <DropdownMenuItem>Edit</DropdownMenuItem>
- *             <DropdownMenuItem>Duplicate</DropdownMenuItem>
- *             <DropdownMenuSeparator />
- *             <DropdownMenuItem class="text-destructive">Delete</DropdownMenuItem>
- *           </DropdownMenuContent>
- *         </DropdownMenu>
- *       </TableCell>
- *     </TableRow>
- *   </TableBody>
- * </Table>
- */
-
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"table"> {
-  class?: string;
-}
-
-const { class: className = "", ...rest } = Astro.props as Props;
----
-
-<div data-slot="table-container" class="relative w-full overflow-x-auto">
-  <table
-    data-slot="table"
-    class={cn("w-full caption-bottom text-sm", className)}
-    {...rest}
-  >
-    <slot />
-  </table>
-</div>
+---
+/**
+ * @component Table
+ * @title Table
+ * @description A responsive table with compound parts. Set `interactive` to enable sorting, row selection, inline editing, tree rows, keyboard grid navigation, column resize/hide and pinned columns. Data stays server-driven: the table emits `table:*` events and the app re-renders rows.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=5548-9089
+ *
+ * @preview
+ *
+ * <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>
+ *       <TableCell class="font-medium">INV001</TableCell>
+ *       <TableCell>Paid</TableCell>
+ *       <TableCell>Credit Card</TableCell>
+ *       <TableCell class="text-right">$250.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV002</TableCell>
+ *       <TableCell>Pending</TableCell>
+ *       <TableCell>PayPal</TableCell>
+ *       <TableCell class="text-right">$150.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV003</TableCell>
+ *       <TableCell>Unpaid</TableCell>
+ *       <TableCell>Bank Transfer</TableCell>
+ *       <TableCell class="text-right">$350.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV004</TableCell>
+ *       <TableCell>Paid</TableCell>
+ *       <TableCell>Credit Card</TableCell>
+ *       <TableCell class="text-right">$450.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV005</TableCell>
+ *       <TableCell>Paid</TableCell>
+ *       <TableCell>PayPal</TableCell>
+ *       <TableCell class="text-right">$550.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV006</TableCell>
+ *       <TableCell>Pending</TableCell>
+ *       <TableCell>Bank Transfer</TableCell>
+ *       <TableCell class="text-right">$200.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV007</TableCell>
+ *       <TableCell>Unpaid</TableCell>
+ *       <TableCell>Credit Card</TableCell>
+ *       <TableCell class="text-right">$300.00</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ *   <TableFooter>
+ *     <TableRow>
+ *       <TableCell colspan={3}>Total</TableCell>
+ *       <TableCell class="text-right">$2,500.00</TableCell>
+ *     </TableRow>
+ *   </TableFooter>
+ * </Table>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import {
+ *   Table,
+ *   TableBody,
+ *   TableCaption,
+ *   TableCell,
+ *   TableFooter,
+ *   TableHead,
+ *   TableHeader,
+ *   TableRow,
+ * } from '@bejamas/ui/components/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" },
+ * ];
+ * ---
+ *
+ * <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>
+ *     {invoices.map((invoice) => (
+ *       <TableRow>
+ *         <TableCell class="font-medium">{invoice.invoice}</TableCell>
+ *         <TableCell>{invoice.paymentStatus}</TableCell>
+ *         <TableCell>{invoice.paymentMethod}</TableCell>
+ *         <TableCell class="text-right">{invoice.totalAmount}</TableCell>
+ *       </TableRow>
+ *     ))}
+ *   </TableBody>
+ *   <TableFooter>
+ *     <TableRow>
+ *       <TableCell colspan={3}>Total</TableCell>
+ *       <TableCell class="text-right">$2,500.00</TableCell>
+ *     </TableRow>
+ *   </TableFooter>
+ * </Table>
+ * ```
+ *
+ * @examples
+ *
+ * ### Footer
+ *
+ * Use the `<TableFooter />` component to add a footer to the table.
+ *
+ * <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>
+ *       <TableCell class="font-medium">INV001</TableCell>
+ *       <TableCell>Paid</TableCell>
+ *       <TableCell>Credit Card</TableCell>
+ *       <TableCell class="text-right">$250.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV002</TableCell>
+ *       <TableCell>Pending</TableCell>
+ *       <TableCell>PayPal</TableCell>
+ *       <TableCell class="text-right">$150.00</TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">INV003</TableCell>
+ *       <TableCell>Unpaid</TableCell>
+ *       <TableCell>Bank Transfer</TableCell>
+ *       <TableCell class="text-right">$350.00</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ *   <TableFooter>
+ *     <TableRow>
+ *       <TableCell colspan={3}>Total</TableCell>
+ *       <TableCell class="text-right">$2,500.00</TableCell>
+ *     </TableRow>
+ *   </TableFooter>
+ * </Table>
+ *
+ * ### Actions
+ *
+ * A table showing actions for each row using a `<DropdownMenu />` component.
+ *
+ * <Table>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead>Product</TableHead>
+ *       <TableHead>Price</TableHead>
+ *       <TableHead class="text-right">Actions</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell class="font-medium">Wireless Mouse</TableCell>
+ *       <TableCell>$29.99</TableCell>
+ *       <TableCell class="text-right">
+ *         <DropdownMenu>
+ *           <DropdownMenuTrigger variant="ghost" size="icon" class="size-8" tailIcon={false}><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
+ *           <DropdownMenuContent align="end">
+ *             <DropdownMenuItem>Edit</DropdownMenuItem>
+ *             <DropdownMenuItem>Duplicate</DropdownMenuItem>
+ *             <DropdownMenuSeparator />
+ *             <DropdownMenuItem class="text-destructive">Delete</DropdownMenuItem>
+ *           </DropdownMenuContent>
+ *         </DropdownMenu>
+ *       </TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">Mechanical Keyboard</TableCell>
+ *       <TableCell>$129.99</TableCell>
+ *       <TableCell class="text-right">
+ *         <DropdownMenu>
+ *           <DropdownMenuTrigger variant="ghost" size="icon" class="size-8" tailIcon={false}><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
+ *           <DropdownMenuContent align="end">
+ *             <DropdownMenuItem>Edit</DropdownMenuItem>
+ *             <DropdownMenuItem>Duplicate</DropdownMenuItem>
+ *             <DropdownMenuSeparator />
+ *             <DropdownMenuItem class="text-destructive">Delete</DropdownMenuItem>
+ *           </DropdownMenuContent>
+ *         </DropdownMenu>
+ *       </TableCell>
+ *     </TableRow>
+ *     <TableRow>
+ *       <TableCell class="font-medium">USB-C Hub</TableCell>
+ *       <TableCell>$49.99</TableCell>
+ *       <TableCell class="text-right">
+ *         <DropdownMenu>
+ *           <DropdownMenuTrigger variant="ghost" size="icon" class="size-8" tailIcon={false}><EllipsisIcon /><span class="sr-only">Open menu</span></DropdownMenuTrigger>
+ *           <DropdownMenuContent align="end">
+ *             <DropdownMenuItem>Edit</DropdownMenuItem>
+ *             <DropdownMenuItem>Duplicate</DropdownMenuItem>
+ *             <DropdownMenuSeparator />
+ *             <DropdownMenuItem class="text-destructive">Delete</DropdownMenuItem>
+ *           </DropdownMenuContent>
+ *         </DropdownMenu>
+ *       </TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ *
+ * ### Interactive (sorting, selection, inline editing)
+ *
+ * The table never sorts, pages or saves data itself. It emits events on the root and the app responds:
+ *
+ * ```astro nocollapse
+ * <Table interactive stickyHeader pinnedColumns={2} maxHeight="480px" aria-label="Invoices">
+ *   <TableBulkToolbar slot="bulk">
+ *     <Button variant="outline" size="sm">Export .csv</Button>
+ *   </TableBulkToolbar>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableSelectCell header />
+ *       <TableHead column="name" sortable resizable>Name</TableHead>
+ *       <TableHead column="status">Status</TableHead>
+ *       <TableHead column="amount" align="right" sortable>Amount</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow rowId="inv-1">
+ *       <TableSelectCell />
+ *       <TableEditableCell column="name" value="INV-00104" required />
+ *       <TableEditableCell column="status" editor="select" value="paid" options={statusOptions} />
+ *       <TableCell column="amount" align="right" numeric>$0.00</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ *
+ * <script>
+ *   const table = document.querySelector('[data-slot="table-root"]');
+ *   table.addEventListener("table:sort", (e) => refetch({ sort: e.detail }));
+ *   table.addEventListener("table:edit", (e) => e.detail.respond(api.patch(e.detail)));
+ * </script>
+ * ```
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"table"> {
+  class?: string;
+  /** Enables the table controller: sorting, selection, editing, tree rows, keyboard grid, resize/hide. */
+  interactive?: boolean;
+  /** Keeps the header row visible while the table body scrolls. Pair with `maxHeight`. */
+  stickyHeader?: boolean;
+  /** Number of leading columns pinned while scrolling horizontally. */
+  pinnedColumns?: number;
+  /** Max height of the scroll container, e.g. "480px". Needed for a sticky header inside the table. */
+  maxHeight?: string;
+  /** Marks the table busy (aria-busy) and dims the body while the server responds. */
+  loading?: boolean;
+  /** Total result count across all pages, used by the "Select all N results" banner. */
+  totalCount?: number;
+  /** Class for the outer wrapper that holds toolbar, table and pagination. */
+  rootClass?: string;
+}
+
+const {
+  class: className = "",
+  interactive = false,
+  stickyHeader = false,
+  pinnedColumns = 0,
+  maxHeight,
+  loading = false,
+  totalCount,
+  rootClass = "",
+  ...rest
+} = Astro.props as Props;
+
+const hasToolbar = Astro.slots.has("toolbar");
+const hasBulk = Astro.slots.has("bulk");
+const hasBanner = Astro.slots.has("banner");
+const hasPagination = Astro.slots.has("pagination");
+---
+
+<div
+  data-slot="table-root"
+  data-interactive={interactive ? "" : undefined}
+  data-sticky-header={stickyHeader ? "" : undefined}
+  data-pinned-columns={pinnedColumns || undefined}
+  data-loading={loading ? "" : undefined}
+  data-total-count={totalCount}
+  class={cn("group/table relative flex w-full flex-col", rootClass)}
+>
+  {
+    (hasToolbar || hasBulk) && (
+      <div data-slot="table-toolbar-region" class="flex min-h-14 flex-col justify-center">
+        {hasToolbar && (
+          <div data-slot="table-toolbar" class="group-data-[has-selection]/table:hidden">
+            <slot name="toolbar" />
+          </div>
+        )}
+        {hasBulk && (
+          <div data-slot="table-bulk-region" class="hidden group-data-[has-selection]/table:block">
+            <slot name="bulk" />
+          </div>
+        )}
+      </div>
+    )
+  }
+  {hasBanner && <slot name="banner" />}
+  <div
+    data-slot="table-container"
+    class="relative w-full overflow-auto"
+    style={maxHeight ? `max-height: ${maxHeight}` : undefined}
+  >
+    <table
+      data-slot="table"
+      aria-busy={loading ? "true" : undefined}
+      class={cn(
+        "w-full caption-bottom border-separate border-spacing-0 text-sm",
+        "[&_tbody]:transition-opacity group-data-[loading]/table:[&_tbody]:opacity-50",
+        className,
+      )}
+      {...rest}
+    >
+      <slot />
+    </table>
+  </div>
+  {hasPagination && <slot name="pagination" />}
+  {interactive && <div data-slot="table-live" class="sr-only" aria-live="polite" aria-atomic="true" />}
+</div>
+
+<script>
+  import { initTables } from "@cl-light-ds/ui/lib/table-controller";
+
+  initTables();
+</script>

package/src/components/table/TableBody.astro

@@ -1,18 +1,17 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"tbody"> {
-  class?: string;
-}
-
-const {
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-<tbody data-slot="table-body" class={cn("[&_tr:last-child]:border-0", className)} {...rest}>
-  <slot />
-</tbody>
-
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"tbody"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<tbody data-slot="table-body" class={cn("", className)} {...rest}>
+  <slot />
+</tbody>