@rimelight/ui 0.0.46 → 0.0.48

package/src/components/table/RLATable.astro

@@ -1,579 +1,1044 @@
----
-import type { TableProps, TableColumn, TableRow } from "./table"
-import { tableTheme } from "./table.theme"
-import RLAIcon from "../icon/RLAIcon.astro"
-import RLAInput from "../input/RLAInput.astro"
-import RLADropdownMenu from "../dropdown-menu/RLADropdownMenu.astro"
-
-const {
-  data = [],
-  columns = [],
-  headers = [],
-  rows = [],
-  caption,
-  meta,
-  sticky = false,
-  loading = false,
-  empty = "No data available",
-  virtualize = false,
-  globalFilter = "",
-  columnFilters = [],
-  columnVisibility = {},
-  columnPinning = {},
-  sorting = [],
-  rowPinning = {},
-  rowSelection = {},
-  expanded = {},
-  pagination,
-  searchable = false,
-  searchPlaceholder = "Filter table...",
-  showColumnsToggle = false,
-  getSubRows,
-  getRowId,
-  class: className,
-  ...rest
-} = Astro.props as TableProps
-
-const classes = tableTheme({
-  ...Astro.props,
-  sticky: typeof sticky === "boolean" ? sticky : sticky,
-  externalScroll: Boolean(typeof virtualize === "object" && virtualize?.getScrollElement)
-})
-
-// Normalize columns from props.columns or props.headers or infer from data keys
-let resolvedColumns: TableColumn[] = []
-
-if (columns && columns.length > 0) {
-  resolvedColumns = columns
-} else if (headers && headers.length > 0) {
-  resolvedColumns = headers.map((h, i) => {
-    if (typeof h === "string") {
-      return { id: h, accessorKey: h, header: h, enableSorting: true }
-    }
-    return { id: h.key || String(i), accessorKey: h.key, header: h.label, enableSorting: true, meta: { class: { th: h.class || "", td: h.class || "" } } }
-  }) as TableColumn[]
-} else if (data && data.length > 0 && typeof data[0] === "object" && data[0] !== null) {
-  const firstRow = data[0] as Record<string, any>
-  resolvedColumns = Object.keys(firstRow).map((key) => ({
-    id: key,
-    accessorKey: key,
-    header: key.charAt(0).toUpperCase() + key.slice(1),
-    enableSorting: true
-  }))
-}
-
-// Filter visible columns based on columnVisibility map
-const visibleColumns = resolvedColumns.filter((col) => {
-  const id = col.id || (col.accessorKey as string)
-  if (!id) return true
-  if (col.enableHiding === false) return true
-  return columnVisibility[id] !== false
-})
-
-// Columns dropdown items for RLADropdownMenu
-const columnDropdownItems = resolvedColumns
-  .filter((col) => {
-    const colId = (col.id || col.accessorKey || "") as string
-    return colId && colId !== "actions" && colId !== "select"
-  })
-  .map((col) => {
-    const colId = (col.id || col.accessorKey || "") as string
-    const label = typeof col.header === "string" ? col.header : colId
-    return {
-      id: colId,
-      label: label.charAt(0).toUpperCase() + label.slice(1),
-      type: "checkbox" as const,
-      checked: columnVisibility[colId] !== false
-    }
-  })
-
-// Build row objects from data
-function buildRowTree(rawItems: any[], parentDepth = 0): TableRow[] {
-  return rawItems.map((item, idx) => {
-    const rId = getRowId ? getRowId(item, idx) : (item?.id !== undefined ? String(item.id) : String(idx))
-    const isSelected = !!rowSelection[rId] || !!rowSelection[idx]
-    const isExpanded = !!expanded[rId] || !!expanded[idx]
-    
-    let subRowsList: TableRow[] | undefined = undefined
-    if (getSubRows) {
-      const children = getSubRows(item, idx)
-      if (children && children.length > 0) {
-        subRowsList = buildRowTree(children, parentDepth + 1)
-      }
-    } else if (Array.isArray(item?.children)) {
-      subRowsList = buildRowTree(item.children, parentDepth + 1)
-    }
-
-    const rowObj: TableRow = {
-      id: rId,
-      original: item,
-      index: idx,
-      depth: parentDepth,
-      getValue: (key: string) => {
-        if (!item || typeof item !== "object") return undefined
-        if (key in item) return item[key]
-        return undefined
-      },
-      getIsSelected: () => isSelected,
-      toggleSelected: () => {},
-      getIsExpanded: () => isExpanded,
-      toggleExpanded: () => {},
-      getIsPinned: () => {
-        if (rowPinning.top?.includes(rId)) return "top"
-        if (rowPinning.bottom?.includes(rId)) return "bottom"
-        return false
-      },
-      pin: () => {},
-      getIsGrouped: () => false,
-      getCanExpand: () => !!(subRowsList && subRowsList.length > 0),
-      ...(subRowsList ? { subRows: subRowsList } : {})
-    }
-
-    return rowObj
-  })
-}
-
-let processedRows: TableRow[] = buildRowTree(data)
-
-// Global & column filtering
-if (globalFilter) {
-  const query = globalFilter.toLowerCase()
-  processedRows = processedRows.filter((r) => {
-    if (typeof r.original !== "object" || !r.original) return String(r.original).toLowerCase().includes(query)
-    return Object.values(r.original).some((val) => String(val ?? "").toLowerCase().includes(query))
-  })
-}
-
-if (columnFilters && columnFilters.length > 0) {
-  for (const filter of columnFilters) {
-    if (!filter.id || filter.value === undefined || filter.value === null || filter.value === "") continue
-    const fVal = String(filter.value).toLowerCase()
-    processedRows = processedRows.filter((r) => {
-      const val = String(r.getValue(filter.id) ?? "").toLowerCase()
-      return val.includes(fVal)
-    })
-  }
-}
-
-// Sorting logic
-if (sorting && sorting.length > 0) {
-  const activeSort = sorting[0]
-  if (activeSort && activeSort.id) {
-    const key = activeSort.id
-    const isDesc = activeSort.desc
-    processedRows = [...processedRows].toSorted((a, b) => {
-      const valA = a.getValue(key)
-      const valB = b.getValue(key)
-      if (valA === valB) return 0
-      if (valA === undefined || valA === null) return 1
-      if (valB === undefined || valB === null) return -1
-      if (typeof valA === "number" && typeof valB === "number") {
-        return isDesc ? valB - valA : valA - valB
-      }
-      return isDesc
-        ? String(valB).localeCompare(String(valA))
-        : String(valA).localeCompare(String(valB))
-    })
-  }
-}
-
-// Row Pinning logic
-if (rowPinning.top && rowPinning.top.length > 0) {
-  const pinnedTop = processedRows.filter((r) => rowPinning.top?.includes(r.id))
-  const unpinned = processedRows.filter((r) => !rowPinning.top?.includes(r.id) && !rowPinning.bottom?.includes(r.id))
-  const pinnedBottom = processedRows.filter((r) => rowPinning.bottom?.includes(r.id))
-  processedRows = [...pinnedTop, ...unpinned, ...pinnedBottom]
-}
-
-// Pagination slicing
-let paginatedRows = processedRows
-let currentPage = 1
-let pageSize = processedRows.length
-
-if (pagination) {
-  pageSize = pagination.pageSize || 10
-  currentPage = (pagination.pageIndex || 0) + 1
-  const start = (currentPage - 1) * pageSize
-  paginatedRows = processedRows.slice(start, start + pageSize)
-}
-
-const hasFooters = visibleColumns.some((col) => col.footer || Astro.slots.has(`${String(col.id || col.accessorKey)}-footer`))
-const uid = Math.random().toString(36).substring(2, 9)
-const showToolbar = searchable || showColumnsToggle || Astro.slots.has("toolbar")
----
-
-<rla-table class:list={[classes.root, className]} data-slot="root" data-table-id={uid} {...rest}>
-  {showToolbar && (
-    <div class="flex items-center justify-between gap-3 p-3.5 border-b border-default bg-muted/20 overflow-x-auto" data-slot="toolbar">
-      {searchable && (
-        <div class="relative max-w-xs flex-1">
-          <RLAInput
-            type="search"
-            placeholder={searchPlaceholder}
-            leadingIcon="i-lucide-search"
-            class="w-full"
-            data-rla-table-search
-          />
-        </div>
-      )}
-
-      {Astro.slots.has("toolbar") && <slot name="toolbar" />}
-
-      {showColumnsToggle && (
-        <div class="ml-auto shrink-0">
-          <RLADropdownMenu
-            label="Columns"
-            icon="i-lucide-columns"
-            items={columnDropdownItems as any}
-            content={{ align: "end" }}
-            size="sm"
-            color="neutral"
-          />
-        </div>
-      )}
-    </div>
-  )}
-
-  <div class="overflow-x-auto w-full">
-    <table class={classes.base} data-slot="base">
-      {(caption || Astro.slots.has("caption")) && (
-        <caption class={classes.caption} data-slot="caption">
-          <slot name="caption">{caption}</slot>
-        </caption>
-      )}
-
-      {visibleColumns.length > 0 && (
-        <thead class={classes.thead} data-slot="thead">
-          <tr class={classes.tr} data-slot="tr">
-            {visibleColumns.map((col) => {
-              const colId = (col.id || col.accessorKey || "") as string
-              const isPinned = columnPinning.left?.includes(colId) ? "left" : columnPinning.right?.includes(colId) ? "right" : false
-              const headerSlotName = `${colId}-header`
-              const metaClass = typeof col.meta?.class?.th === "function" ? col.meta.class.th(col) : (col.meta?.class?.th || "")
-              const styleObj = typeof col.meta?.style?.th === "function" ? col.meta.style.th(col) : col.meta?.style?.th
-              const canSort = col.enableSorting !== false && (!!col.accessorKey || !!col.id) && colId !== "actions" && colId !== "select"
-              const activeSort = sorting.find((s) => s.id === colId)
-              const sortDir = activeSort ? (activeSort.desc ? "desc" : "asc") : "none"
-
-              return (
-                <th
-                  scope="col"
-                  class:list={[
-                    classes.th,
-                    isPinned && (classes as any).pinned?.th,
-                    metaClass
-                  ]}
-                  style={col.size ? `width: ${typeof col.size === 'number' ? `${col.size}px` : col.size}; ${styleObj || ''}` : styleObj}
-                  data-col-id={colId}
-                  data-slot="th"
-                >
-                  {Astro.slots.has(headerSlotName) ? (
-                    <slot name={headerSlotName} {...({ column: col } as any)} />
-                  ) : canSort ? (
-                    <button
-                      type="button"
-                      class="inline-flex items-center gap-1.5 hover:text-highlighted focus:outline-none transition-colors cursor-pointer group -mx-1 px-1 py-0.5 rounded"
-                      data-rla-sort-btn
-                      data-rla-col-id={colId}
-                      data-sort-dir={sortDir}
-                    >
-                      <span>
-                        {typeof col.header === "function" ? col.header({ column: col, table: {} }) : (col.header || colId)}
-                      </span>
-                      <span
-                        data-sort-icon
-                        class:list={[
-                          sortDir === "asc"
-                            ? "i-lucide-arrow-up-narrow-wide text-primary font-bold"
-                            : sortDir === "desc"
-                            ? "i-lucide-arrow-down-wide-narrow text-primary font-bold"
-                            : "i-lucide-arrow-up-down opacity-40 group-hover:opacity-100",
-                          "size-3.5 transition-all"
-                        ]}
-                      />
-                    </button>
-                  ) : typeof col.header === "function" ? (
-                    col.header({ column: col, table: {} })
-                  ) : (
-                    col.header || colId
-                  )}
-                </th>
-              )
-            })}
-          </tr>
-        </thead>
-      )}
-
-      <tbody class={classes.tbody} data-slot="tbody">
-        {Astro.slots.has("body-top") && <slot name="body-top" />}
-
-        {loading ? (
-          <tr>
-            <td colspan={Math.max(1, visibleColumns.length)} class={classes.loading} data-slot="loading">
-              {Astro.slots.has("loading") ? (
-                <slot name="loading" />
-              ) : (
-                <div class="flex items-center justify-center gap-2 text-muted py-4">
-                  <RLAIcon name="i-lucide-loader-2" class="size-5 animate-spin text-primary" />
-                  <span>Loading table data...</span>
-                </div>
-              )}
-            </td>
-          </tr>
-        ) : paginatedRows.length === 0 && (data.length > 0 || visibleColumns.length > 0) ? (
-          <tr>
-            <td colspan={Math.max(1, visibleColumns.length)} class={classes.empty} data-slot="empty">
-              {Astro.slots.has("empty") ? (
-                <slot name="empty" />
-              ) : (
-                <div class="flex flex-col items-center justify-center py-6 gap-2 text-muted">
-                  <RLAIcon name="i-lucide-inbox" class="size-8 opacity-50" />
-                  <p class="text-sm font-medium">{empty}</p>
-                </div>
-              )}
-            </td>
-          </tr>
-        ) : (
-          <slot>
-            {/* Render data rows if data prop provided */}
-            {data.length > 0 && paginatedRows.map((row) => {
-              const trMetaClass = typeof meta?.class?.tr === "function" ? meta.class.tr(row) : (meta?.class?.tr || "")
-              const isSelected = row.getIsSelected()
-              const isExpanded = row.getIsExpanded()
-
-              return (
-                <>
-                  <tr
-                    class:list={[classes.tr, trMetaClass]}
-                    data-slot="tr"
-                    data-row-id={row.id}
-                    data-selected={isSelected ? "true" : undefined}
-                    data-expanded={isExpanded ? "true" : undefined}
-                  >
-                    {visibleColumns.map((col) => {
-                      const colId = (col.id || col.accessorKey || "") as string
-                      const cellValue = col.accessorKey ? row.getValue(col.accessorKey as string) : undefined
-                      const cellSlotName = `${colId}-cell`
-                      const metaTdClass = typeof col.meta?.class?.td === "function" ? col.meta.class.td(row) : (col.meta?.class?.td || "")
-                      const colSpanVal = typeof col.meta?.colspan?.td === "function" ? col.meta.colspan.td(row) : col.meta?.colspan?.td
-                      const rowSpanVal = typeof col.meta?.rowspan?.td === "function" ? col.meta.rowspan.td(row) : col.meta?.rowspan?.td
-
-                      return (
-                        <td
-                          class:list={[classes.td, metaTdClass]}
-                          colspan={colSpanVal}
-                          rowspan={rowSpanVal}
-                          data-slot="td"
-                          data-col-id={colId}
-                        >
-                          {Astro.slots.has(cellSlotName) ? (
-                            <slot
-                              name={cellSlotName}
-                              {...({
-                                row,
-                                column: col,
-                                cell: { value: cellValue },
-                                getValue: () => cellValue,
-                                renderValue: () => cellValue
-                              } as any)}
-                            />
-                          ) : typeof col.cell === "function" ? (
-                            col.cell({
-                              row,
-                              getValue: () => cellValue,
-                              renderValue: () => cellValue,
-                              column: col,
-                              table: {}
-                            })
-                          ) : cellValue !== undefined && cellValue !== null ? (
-                            String(cellValue)
-                          ) : (
-                            "—"
-                          )}
-                        </td>
-                      )
-                    })}
-                  </tr>
-
-                  {isExpanded && Astro.slots.has("expanded") && (
-                    <tr class="bg-muted/20 border-b border-default" data-slot="expanded-tr">
-                      <td colspan={visibleColumns.length} class="p-4">
-                        <slot name="expanded" {...({ row } as any)} />
-                      </td>
-                    </tr>
-                  )}
-                </>
-              )
-            })}
-
-            {/* Render legacy rows array if rows prop provided */}
-            {data.length === 0 && rows.length > 0 && rows.map((row) => {
-              const cells = Array.isArray(row) ? row : Object.values(row)
-              return (
-                <tr class={classes.tr} data-slot="tr">
-                  {cells.map((cell) => (
-                    <td class={classes.td} data-slot="td">
-                      {cell}
-                    </td>
-                  ))}
-                </tr>
-              )
-            })}
-          </slot>
-        )}
-
-        {Astro.slots.has("body-bottom") && <slot name="body-bottom" />}
-      </tbody>
-
-      {hasFooters && (
-        <tfoot class={classes.tfoot} data-slot="tfoot">
-          <tr class={classes.tr} data-slot="tr">
-            {visibleColumns.map((col) => {
-              const colId = (col.id || col.accessorKey || "") as string
-              const footerSlotName = `${colId}-footer`
-              return (
-                <td class={classes.td} data-slot="td">
-                  {Astro.slots.has(footerSlotName) ? (
-                    <slot name={footerSlotName} {...({ column: col } as any)} />
-                  ) : typeof col.footer === "function" ? (
-                    col.footer({ column: col, table: {} })
-                  ) : (
-                    col.footer || ""
-                  )}
-                </td>
-              )
-            })}
-          </tr>
-        </tfoot>
-      )}
-    </table>
-  </div>
-</rla-table>
-
-<script>
-  if (typeof HTMLElement !== "undefined") {
-    class RLATableElement extends HTMLElement {
-      connectedCallback() {
-        const table = this.querySelector("table");
-        if (!table) return;
-
-        const tbody = table.querySelector("tbody");
-        if (!tbody) return;
-
-        // Interactive Live Search filter
-        const searchInput = this.querySelector("[data-rla-table-search]") as HTMLInputElement | null;
-        if (searchInput) {
-          searchInput.addEventListener("input", () => {
-            const query = searchInput.value.toLowerCase().trim();
-            const rows = tbody.querySelectorAll("tr[data-slot=tr]");
-            rows.forEach((row) => {
-              const text = row.textContent?.toLowerCase() || "";
-              if (!query || text.includes(query)) {
-                (row as HTMLElement).style.display = "";
-              } else {
-                (row as HTMLElement).style.display = "none";
-              }
-            });
-          });
-        }
-
-        // Column Visibility Toggles via RLADropdownMenu
-        this.addEventListener("rla-dropdown-checkbox-change", (e: any) => {
-          const colId = e.detail?.id;
-          const checked = e.detail?.checked;
-          if (!colId) return;
-
-          const th = table.querySelector(`th[data-col-id="${colId}"]`) as HTMLElement | null;
-          if (th) {
-            th.style.display = checked ? "" : "none";
-            const colIndex = Array.from(th.parentElement?.children || []).indexOf(th);
-            if (colIndex >= 0) {
-              const rows = tbody.querySelectorAll("tr");
-              rows.forEach((r) => {
-                const cell = r.children[colIndex] as HTMLElement | undefined;
-                if (cell) cell.style.display = checked ? "" : "none";
-              });
-            }
-          }
-
-          const tds = table.querySelectorAll(`td[data-col-id="${colId}"]`);
-          tds.forEach((td) => ((td as HTMLElement).style.display = checked ? "" : "none"));
-        });
-
-
-
-        // Interactive Column Sorting
-        const sortButtons = table.querySelectorAll("[data-rla-sort-btn]");
-        sortButtons.forEach((btnNode) => {
-          const btn = btnNode as HTMLButtonElement;
-          btn.addEventListener("click", () => {
-            const colId = btn.getAttribute("data-rla-col-id");
-            if (!colId) return;
-
-            const currentDir = btn.getAttribute("data-sort-dir") || "none";
-            const nextDir = currentDir === "asc" ? "desc" : "asc";
-
-            // Reset all other sort buttons
-            sortButtons.forEach((otherBtn) => {
-              if (otherBtn !== btn) {
-                otherBtn.setAttribute("data-sort-dir", "none");
-                const icon = otherBtn.querySelector("[data-sort-icon]");
-                if (icon) icon.className = "i-lucide-arrow-up-down size-3.5 opacity-40 group-hover:opacity-100 transition-all";
-              }
-            });
-
-            btn.setAttribute("data-sort-dir", nextDir);
-            const icon = btn.querySelector("[data-sort-icon]");
-            if (icon) {
-              icon.className = nextDir === "asc"
-                ? "i-lucide-arrow-up-narrow-wide size-3.5 text-primary font-bold transition-all"
-                : "i-lucide-arrow-down-wide-narrow size-3.5 text-primary font-bold transition-all";
-            }
-
-            // Sort rows in DOM
-            const rows = Array.from(tbody.querySelectorAll("tr[data-slot=tr]")) as HTMLTableRowElement[];
-            const colIndex = Array.from(table.querySelectorAll("thead th")).findIndex(
-              (th) => (th as HTMLElement).getAttribute("data-col-id") === colId
-            );
-
-            if (colIndex < 0) return;
-
-            rows.sort((rowA, rowB) => {
-              const cellA = rowA.children[colIndex]?.textContent?.trim() || "";
-              const cellB = rowB.children[colIndex]?.textContent?.trim() || "";
-              const numA = Number(cellA.replace(/[^0-9.-]+/g, ""));
-              const numB = Number(cellB.replace(/[^0-9.-]+/g, ""));
-
-              if (!isNaN(numA) && !isNaN(numB) && cellA !== "" && cellB !== "") {
-                return nextDir === "asc" ? numA - numB : numB - numA;
-              }
-              return nextDir === "asc" ? cellA.localeCompare(cellB) : cellB.localeCompare(cellA);
-            });
-
-            rows.forEach((row) => tbody.appendChild(row));
-          });
-        });
-
-        // Row Selection Event
-        this.addEventListener("click", (e) => {
-          const target = e.target as HTMLElement | null;
-          if (!target) return;
-          if (target.closest("a, button, input, select, textarea, [role=button]")) {
-            return;
-          }
-          const tr = target.closest("tbody tr[data-row-id]");
-          if (tr) {
-            const rowId = tr.getAttribute("data-row-id");
-            this.dispatchEvent(new CustomEvent("rla-row-select", { detail: { rowId, event: e }, bubbles: true }));
-          }
-        });
-      }
-    }
-
-    if (!customElements.get("rla-table")) {
-      customElements.define("rla-table", RLATableElement);
-    }
-  }
-</script>
-
-
+---
+import type {
+  TableProps,
+  TableColumn,
+  TableRow,
+  TableGroup,
+  SortingState
+} from "./table"
+import { tableTheme } from "./table.theme"
+import RLAIcon from "../icon/RLAIcon.astro"
+import RLAInput from "../input/RLAInput.astro"
+import RLADropdownMenu from "../dropdown-menu/RLADropdownMenu.astro"
+
+type AnyData = Record<string, any>
+
+const {
+  data = [],
+  columns = [],
+  caption,
+  meta,
+  sticky = false,
+  loading = false,
+  loadingColor = "primary",
+  loadingAnimation = "carousel",
+  empty = "No data available",
+  striped = false,
+  bordered = false,
+  hoverable = false,
+  globalFilter = "",
+  columnFilters = [],
+  columnVisibility = {},
+  columnPinning = {},
+  sorting = [],
+  grouping = [],
+  rowPinning = {},
+  rowSelection = {},
+  expanded = {},
+  pagination,
+  getSubRows,
+  getRowId,
+  searchable = false,
+  searchPlaceholder = "Filter table...",
+  showColumnsToggle = false,
+  class: className,
+  ui,
+  ...rest
+} = Astro.props as TableProps
+
+const classes = tableTheme({
+  sticky,
+  loading,
+  loadingColor,
+  loadingAnimation,
+  striped,
+  bordered,
+  hoverable,
+  ui,
+  class: className,
+  externalScroll: false
+})
+
+// ─── Column resolution ────────────────────────────────────────────────────────
+
+let resolvedColumns: TableColumn[] = []
+
+if (columns && columns.length > 0) {
+  resolvedColumns = columns
+} else if (data && data.length > 0 && typeof data[0] === "object" && data[0] !== null) {
+  const firstRow = data[0] as AnyData
+  resolvedColumns = Object.keys(firstRow).map((key) => ({
+    id: key,
+    accessorKey: key,
+    header: key.charAt(0).toUpperCase() + key.slice(1),
+    enableSorting: true
+  }))
+}
+
+// Filter by column visibility
+const visibleColumns = resolvedColumns.filter((col) => {
+  const id = (col.id || col.accessorKey || "") as string
+  if (!id) return true
+  if (col.enableHiding === false) return true
+  return columnVisibility[id] !== false
+})
+
+// Dropdown items for column visibility toggle
+const columnDropdownItems = resolvedColumns
+  .filter((col) => col.enableHiding !== false)
+  .map((col) => {
+    const colId = (col.id || col.accessorKey || "") as string
+    const rawLabel = typeof col.header === "string" ? col.header : colId
+    return {
+      id: colId,
+      label: rawLabel.charAt(0).toUpperCase() + rawLabel.slice(1),
+      type: "checkbox" as const,
+      checked: columnVisibility[colId] !== false
+    }
+  })
+
+// ─── Row building ─────────────────────────────────────────────────────────────
+
+function getNestedValue(obj: AnyData, key: string): any {
+  if (key.includes(".")) {
+    return key.split(".").reduce((acc: any, k) => acc?.[k], obj)
+  }
+  return obj[key]
+}
+
+function buildRowTree(rawItems: any[], parentDepth = 0): TableRow[] {
+  return rawItems.map((item, idx) => {
+    const rId = getRowId
+      ? getRowId(item, idx)
+      : item?.id !== undefined
+        ? String(item.id)
+        : String(idx)
+
+    const isSelected = !!rowSelection[rId]
+    const isExpanded = !!expanded[rId]
+
+    let subRowsList: TableRow[] | undefined = undefined
+    if (getSubRows) {
+      const children = getSubRows(item, idx)
+      if (children && children.length > 0) {
+        subRowsList = buildRowTree(children, parentDepth + 1)
+      }
+    } else if (Array.isArray(item?.children) && item.children.length > 0) {
+      subRowsList = buildRowTree(item.children, parentDepth + 1)
+    }
+
+    const rowObj: TableRow = {
+      id: rId,
+      original: item,
+      index: idx,
+      depth: parentDepth,
+      getValue: (key: string) => {
+        if (!item || typeof item !== "object") return undefined
+        return getNestedValue(item as AnyData, key)
+      },
+      getIsSelected: () => isSelected,
+      toggleSelected: () => {},
+      getIsExpanded: () => isExpanded,
+      toggleExpanded: () => {},
+      getIsPinned: () => {
+        if (rowPinning.top?.includes(rId)) return "top"
+        if (rowPinning.bottom?.includes(rId)) return "bottom"
+        return false
+      },
+      pin: () => {},
+      getIsGrouped: () => false,
+      getCanExpand: () => !!(subRowsList && subRowsList.length > 0),
+      ...(subRowsList ? { subRows: subRowsList } : {})
+    }
+    return rowObj
+  })
+}
+
+let processedRows: TableRow[] = buildRowTree(data)
+
+// ─── Filtering ────────────────────────────────────────────────────────────────
+
+if (globalFilter) {
+  const query = globalFilter.toLowerCase()
+  processedRows = processedRows.filter((r) => {
+    if (typeof r.original !== "object" || !r.original)
+      return String(r.original).toLowerCase().includes(query)
+    return Object.values(r.original as AnyData).some((val) =>
+      String(val ?? "").toLowerCase().includes(query)
+    )
+  })
+}
+
+for (const filter of columnFilters) {
+  if (!filter.id || filter.value === undefined || filter.value === null || filter.value === "")
+    continue
+  const fVal = String(filter.value).toLowerCase()
+  processedRows = processedRows.filter((r) =>
+    String(r.getValue(filter.id) ?? "").toLowerCase().includes(fVal)
+  )
+}
+
+// ─── Sorting ──────────────────────────────────────────────────────────────────
+
+if (sorting && sorting.length > 0) {
+  processedRows = [...processedRows].sort((a, b) => {
+    for (const { id, desc } of sorting as SortingState) {
+      const valA = a.getValue(id)
+      const valB = b.getValue(id)
+      if (valA === valB) continue
+      if (valA === undefined || valA === null) return 1
+      if (valB === undefined || valB === null) return -1
+      let cmp: number
+      if (typeof valA === "number" && typeof valB === "number") {
+        cmp = valA - valB
+      } else {
+        cmp = String(valA).localeCompare(String(valB))
+      }
+      return desc ? -cmp : cmp
+    }
+    return 0
+  })
+}
+
+// ─── Grouping ─────────────────────────────────────────────────────────────────
+
+type GroupedItem =
+  | { type: "group"; group: TableGroup }
+  | { type: "row"; row: TableRow }
+
+let groupedItems: GroupedItem[] = []
+let groups: TableGroup[] = []
+
+if (grouping && grouping.length > 0) {
+  const groupColId = grouping[0]!
+  const groupMap = new Map<string, TableRow[]>()
+  const groupOrder: string[] = []
+
+  for (const row of processedRows) {
+    const val = String(row.getValue(groupColId) ?? "")
+    if (!groupMap.has(val)) {
+      groupMap.set(val, [])
+      groupOrder.push(val)
+    }
+    groupMap.get(val)!.push(row)
+  }
+
+  for (const val of groupOrder) {
+    const rows = groupMap.get(val)!
+    const group: TableGroup = {
+      id: `group-${groupColId}-${val}`,
+      columnId: groupColId,
+      value: val,
+      rows
+    }
+    groups.push(group)
+    groupedItems.push({ type: "group", group })
+    for (const row of rows) {
+      groupedItems.push({ type: "row", row, groupId: group.id } as any)
+    }
+  }
+} else {
+  groupedItems = processedRows.map((row) => ({ type: "row", row }))
+}
+
+// ─── Row pinning ──────────────────────────────────────────────────────────────
+
+if ((rowPinning.top?.length ?? 0) > 0 || (rowPinning.bottom?.length ?? 0) > 0) {
+  const topItems: GroupedItem[] = []
+  const midItems: GroupedItem[] = []
+  const botItems: GroupedItem[] = []
+
+  for (const item of groupedItems) {
+    if (item.type === "row") {
+      if (rowPinning.top?.includes(item.row.id)) topItems.push(item)
+      else if (rowPinning.bottom?.includes(item.row.id)) botItems.push(item)
+      else midItems.push(item)
+    } else {
+      midItems.push(item)
+    }
+  }
+  groupedItems = [...topItems, ...midItems, ...botItems]
+}
+
+// ─── Pagination ───────────────────────────────────────────────────────────────
+
+let paginatedItems = groupedItems
+if (pagination) {
+  const { pageIndex = 0, pageSize = 10 } = pagination
+  const rowItems = groupedItems.filter((i) => i.type === "row")
+  const pageRows = rowItems.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize)
+  const pageRowIds = new Set(pageRows.map((i) => (i as { type: "row"; row: TableRow }).row.id))
+
+  if (grouping && grouping.length > 0) {
+    const result: GroupedItem[] = []
+    for (const item of groupedItems) {
+      if (item.type === "group") {
+        if (item.group.rows.some((r) => pageRowIds.has(r.id))) result.push(item)
+      } else if (pageRowIds.has(item.row.id)) {
+        result.push(item)
+      }
+    }
+    paginatedItems = result
+  } else {
+    paginatedItems = pageRows
+  }
+}
+
+// ─── Column pinning offsets ───────────────────────────────────────────────────
+
+const colOffsetLeft: Record<string, number> = {}
+const colOffsetRight: Record<string, number> = {}
+
+if (columnPinning.left && columnPinning.left.length > 0) {
+  let offset = 0
+  for (const colId of columnPinning.left) {
+    colOffsetLeft[colId] = offset
+    const col = resolvedColumns.find((c) => (c.id || c.accessorKey) === colId)
+    offset += typeof col?.size === "number" ? col.size : 150
+  }
+}
+
+if (columnPinning.right && columnPinning.right.length > 0) {
+  let offset = 0
+  for (const colId of [...columnPinning.right].reverse()) {
+    colOffsetRight[colId] = offset
+    const col = resolvedColumns.find((c) => (c.id || c.accessorKey) === colId)
+    offset += typeof col?.size === "number" ? col.size : 150
+  }
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const hasFooters = visibleColumns.some(
+  (col) =>
+    col.footer ||
+    Astro.slots.has(`${String(col.id || col.accessorKey)}-footer`)
+)
+
+const showToolbar = searchable || showColumnsToggle || Astro.slots.has("toolbar")
+
+function getPinStyle(colId: string): string {
+  if (colOffsetLeft[colId] !== undefined)
+    return `left:${colOffsetLeft[colId]}px;`
+  if (colOffsetRight[colId] !== undefined)
+    return `right:${colOffsetRight[colId]}px;`
+  return ""
+}
+
+function isPinned(colId: string): boolean {
+  return colId in colOffsetLeft || colId in colOffsetRight
+}
+---
+
+<rla-table
+  class:list={[classes.root, className]}
+  data-slot="root"
+  {...rest}
+>
+  {showToolbar && (
+    <div
+      class="flex items-center gap-3 px-3.5 py-3 border-b border-default bg-muted/20 overflow-x-auto"
+      data-slot="toolbar"
+    >
+      {searchable && (
+        <RLAInput
+          type="search"
+          size="sm"
+          placeholder={searchPlaceholder}
+          leadingIcon="i-lucide-search"
+          class="max-w-xs min-w-[10ch]"
+          data-rla-table-search
+        />
+      )}
+
+      <slot name="toolbar" />
+
+      {showColumnsToggle && (
+        <div class="ml-auto shrink-0">
+          <RLADropdownMenu
+            label="Columns"
+            icon="i-lucide-columns"
+            items={columnDropdownItems as any}
+            content={{ align: "end" }}
+            size="sm"
+            color="neutral"
+          />
+        </div>
+      )}
+    </div>
+  )}
+
+  <div class="overflow-x-auto w-full">
+    <table class={classes.base} data-slot="base">
+      {(caption || Astro.slots.has("caption")) && (
+        <caption class={classes.caption} data-slot="caption">
+          <slot name="caption">{caption}</slot>
+        </caption>
+      )}
+
+      {/* ── thead ── */}
+      {visibleColumns.length > 0 && (
+        <thead class={classes.thead} data-slot="thead">
+          <tr class={classes.tr} data-slot="tr">
+            {visibleColumns.map((col) => {
+              const colId = (col.id || col.accessorKey || "") as string
+              const pinned = isPinned(colId)
+              const metaThClass =
+                typeof col.meta?.class?.th === "function"
+                  ? col.meta.class.th(col)
+                  : col.meta?.class?.th || ""
+              const metaThStyle =
+                typeof col.meta?.style?.th === "function"
+                  ? col.meta.style.th(col)
+                  : col.meta?.style?.th || ""
+              const canSort =
+                col.enableSorting !== false &&
+                !!(col.accessorKey || col.id) &&
+                colId !== "actions" &&
+                colId !== "select"
+              const activeSort = (sorting as SortingState).find((s) => s.id === colId)
+              const sortDir = activeSort ? (activeSort.desc ? "desc" : "asc") : "none"
+              const headerSlotName = `${colId}-header`
+
+              const sizeStyle = col.size
+                ? `width:${typeof col.size === "number" ? `${col.size}px` : col.size};`
+                : ""
+              const pinStyle = getPinStyle(colId)
+              const combinedStyle = [sizeStyle, pinStyle, metaThStyle]
+                .filter(Boolean)
+                .join("")
+
+              return (
+                <th
+                  scope="col"
+                  class:list={[
+                    classes.th,
+                    pinned ? "sticky bg-default z-10" : "",
+                    metaThClass
+                  ]}
+                  style={combinedStyle || undefined}
+                  data-col-id={colId}
+                  data-slot="th"
+                >
+                  {Astro.slots.has(headerSlotName) ? (
+                    <slot name={headerSlotName} {...({ column: col } as any)} />
+                  ) : canSort ? (
+                    <button
+                      type="button"
+                      class="inline-flex items-center gap-1.5 hover:text-highlighted focus:outline-none transition-colors cursor-pointer group -mx-1 px-1 py-0.5 rounded"
+                      data-rla-sort-btn
+                      data-rla-col-id={colId}
+                      data-sort-dir={sortDir}
+                      aria-label={`Sort by ${colId}`}
+                    >
+                      <span>
+                        {typeof col.header === "function"
+                          ? col.header({ column: col, table: {} })
+                          : col.header || colId}
+                      </span>
+                      <span
+                        data-sort-icon
+                        class:list={[
+                          sortDir === "asc"
+                            ? "i-lucide-arrow-up-narrow-wide text-primary"
+                            : sortDir === "desc"
+                              ? "i-lucide-arrow-down-wide-narrow text-primary"
+                              : "i-lucide-arrow-up-down opacity-40 group-hover:opacity-100",
+                          "size-3.5 transition-all shrink-0"
+                        ]}
+                      />
+                    </button>
+                  ) : typeof col.header === "function" ? (
+                    <Fragment set:html={col.header({ column: col, table: {} })} />
+                  ) : (
+                    col.header || colId
+                  )}
+                </th>
+              )
+            })}
+          </tr>
+        </thead>
+      )}
+
+      {/* ── tbody ── */}
+      <tbody class={classes.tbody} data-slot="tbody">
+        <slot name="body-top" />
+
+        {loading ? (
+          <tr>
+            <td
+              colspan={Math.max(1, visibleColumns.length)}
+              class={classes.loading}
+              data-slot="loading"
+            >
+              {Astro.slots.has("loading") ? (
+                <slot name="loading" />
+              ) : (
+                <div class="flex items-center justify-center gap-2 text-muted py-4">
+                  <RLAIcon name="i-lucide-loader-2" class="size-5 animate-spin text-primary" />
+                  <span>Loading...</span>
+                </div>
+              )}
+            </td>
+          </tr>
+        ) : paginatedItems.length === 0 ? (
+          <tr>
+            <td
+              colspan={Math.max(1, visibleColumns.length)}
+              class={classes.empty}
+              data-slot="empty"
+            >
+              {Astro.slots.has("empty") ? (
+                <slot name="empty" />
+              ) : (
+                <div class="flex flex-col items-center justify-center py-6 gap-2 text-muted">
+                  <RLAIcon name="i-lucide-inbox" class="size-8 opacity-40" />
+                  <p class="text-sm font-medium">{empty}</p>
+                </div>
+              )}
+            </td>
+          </tr>
+        ) : (
+          paginatedItems.map((item) => {
+            // ── Group header row ──────────────────────────────────────────
+            if (item.type === "group") {
+              const { group } = item
+              return (
+                <tr class={classes.trGroup} data-slot="tr-group" data-group-id={group.id}>
+                  <td
+                    colspan={Math.max(1, visibleColumns.length)}
+                    class={classes.tdGroup}
+                    data-slot="td-group"
+                  >
+                    {Astro.slots.has("group-header") ? (
+                      <slot
+                        name="group-header"
+                        {...({ group, colSpan: visibleColumns.length } as any)}
+                      />
+                    ) : (
+                      <span class="flex items-center gap-2">
+                        <span class="i-lucide-layers size-3.5 text-primary opacity-70" />
+                        <span class="text-highlighted">{String(group.value)}</span>
+                        <span class="ml-auto text-muted font-normal normal-case">
+                          {group.rows.length} {group.rows.length === 1 ? "row" : "rows"}
+                        </span>
+                      </span>
+                    )}
+                  </td>
+                </tr>
+              )
+            }
+
+            // ── Data row ──────────────────────────────────────────────────
+            const { row } = item
+            const currentGroupId = item.type === "row" && (item as any).groupId ? (item as any).groupId : undefined
+            const trMetaClass =
+              typeof meta?.class?.tr === "function"
+                ? meta.class.tr(row)
+                : meta?.class?.tr || ""
+            const trMetaStyle =
+              typeof meta?.style?.tr === "function"
+                ? meta.style.tr(row)
+                : meta?.style?.tr || ""
+            const isSelected = row.getIsSelected()
+            const isExpanded = row.getIsExpanded()
+            const isPinned_ = row.getIsPinned()
+
+            return (
+              <>
+                <tr
+                  class:list={[classes.tr, trMetaClass]}
+                  style={trMetaStyle || undefined}
+                  data-slot="tr"
+                  data-row-id={row.id}
+                  data-group-id={currentGroupId}
+                  data-selected={isSelected ? "true" : undefined}
+                  data-expanded={isExpanded ? "true" : undefined}
+                  data-pinned={isPinned_ || undefined}
+                >
+                  {visibleColumns.map((col) => {
+                    const colId = (col.id || col.accessorKey || "") as string
+                    const accessorKey = (col.accessorKey || col.id || "") as string
+                    const cellValue = accessorKey ? row.getValue(accessorKey) : undefined
+                    const cellSlotName = `${colId}-cell`
+                    const pinned = isPinned(colId)
+
+                    const metaTdClass =
+                      typeof col.meta?.class?.td === "function"
+                        ? col.meta.class.td(row)
+                        : col.meta?.class?.td || ""
+                    const metaTdStyle =
+                      typeof col.meta?.style?.td === "function"
+                        ? col.meta.style.td(row)
+                        : col.meta?.style?.td || ""
+                    const colSpanVal =
+                      typeof col.meta?.colspan?.td === "function"
+                        ? col.meta.colspan.td(row)
+                        : col.meta?.colspan?.td
+                    const rowSpanVal =
+                      typeof col.meta?.rowspan?.td === "function"
+                        ? col.meta.rowspan.td(row)
+                        : col.meta?.rowspan?.td
+
+                    const pinStyle_ = getPinStyle(colId)
+                    const combinedTdStyle = [pinStyle_, metaTdStyle].filter(Boolean).join("")
+
+                    return (
+                      <td
+                        class:list={[
+                          classes.td,
+                          pinned ? "sticky bg-default z-10" : "",
+                          metaTdClass
+                        ]}
+                        style={combinedTdStyle || undefined}
+                        colspan={colSpanVal}
+                        rowspan={rowSpanVal}
+                        data-slot="td"
+                        data-col-id={colId}
+                      >
+                        {Astro.slots.has(cellSlotName) ? (
+                          <slot
+                            name={cellSlotName}
+                            {...({
+                              row,
+                              column: col,
+                              cell: { value: cellValue },
+                              getValue: () => cellValue,
+                              renderValue: () => cellValue
+                            } as any)}
+                          />
+                        ) : typeof col.cell === "function" ? (
+                          <Fragment set:html={col.cell({
+                            row,
+                            getValue: () => cellValue,
+                            renderValue: () => cellValue,
+                            column: col,
+                            table: {}
+                          })} />
+                        ) : cellValue !== undefined && cellValue !== null ? (
+                          String(cellValue)
+                        ) : (
+                          "—"
+                        )}
+                      </td>
+                    )
+                  })}
+                </tr>
+
+                {/* Expanded sub-row */}
+                {isExpanded && Astro.slots.has("expanded") && (
+                  <tr class={classes.trExpanded} data-slot="tr-expanded" data-row-id={row.id}>
+                    <td
+                      colspan={Math.max(1, visibleColumns.length)}
+                      class={classes.tdExpanded}
+                      data-slot="td-expanded"
+                    >
+                      <slot name="expanded" {...({ row } as any)} />
+                    </td>
+                  </tr>
+                )}
+
+                {/* Sub-rows (tree data) */}
+                {row.subRows && row.subRows.length > 0 && isExpanded &&
+                  row.subRows.map((subRow) => {
+                    const subTrMetaClass =
+                      typeof meta?.class?.tr === "function"
+                        ? meta.class.tr(subRow)
+                        : meta?.class?.tr || ""
+                    return (
+                      <tr
+                        class:list={[classes.tr, subTrMetaClass]}
+                        data-slot="tr"
+                        data-row-id={subRow.id}
+                        data-depth={subRow.depth}
+                      >
+                        {visibleColumns.map((col) => {
+                          const colId = (col.id || col.accessorKey || "") as string
+                          const accessorKey = (col.accessorKey || col.id || "") as string
+                          const cellValue = accessorKey ? subRow.getValue(accessorKey) : undefined
+                          const cellSlotName = `${colId}-cell`
+                          const metaTdClass =
+                            typeof col.meta?.class?.td === "function"
+                              ? col.meta.class.td(subRow)
+                              : col.meta?.class?.td || ""
+
+                          return (
+                            <td
+                              class:list={[classes.td, metaTdClass]}
+                              data-slot="td"
+                              data-col-id={colId}
+                            >
+                              {Astro.slots.has(cellSlotName) ? (
+                                <slot
+                                  name={cellSlotName}
+                                  {...({
+                                    row: subRow,
+                                    column: col,
+                                    cell: { value: cellValue },
+                                    getValue: () => cellValue,
+                                    renderValue: () => cellValue
+                                  } as any)}
+                                />
+                              ) : typeof col.cell === "function" ? (
+                                col.cell({
+                                  row: subRow,
+                                  getValue: () => cellValue,
+                                  renderValue: () => cellValue,
+                                  column: col,
+                                  table: {}
+                                })
+                              ) : cellValue !== undefined && cellValue !== null ? (
+                                String(cellValue)
+                              ) : (
+                                "—"
+                              )}
+                            </td>
+                          )
+                        })}
+                      </tr>
+                    )
+                  })}
+              </>
+            )
+          })
+        )}
+
+        <slot name="body-bottom" />
+      </tbody>
+
+      {/* ── tfoot ── */}
+      {hasFooters && (
+        <tfoot class={classes.tfoot} data-slot="tfoot">
+          <tr class={classes.tr} data-slot="tr">
+            {visibleColumns.map((col) => {
+              const colId = (col.id || col.accessorKey || "") as string
+              const footerSlotName = `${colId}-footer`
+              return (
+                <td class={classes.td} data-slot="td">
+                  {Astro.slots.has(footerSlotName) ? (
+                    <slot name={footerSlotName} {...({ column: col } as any)} />
+                  ) : typeof col.footer === "function" ? (
+                    <Fragment set:html={col.footer({ column: col, table: {} })} />
+                  ) : (
+                    col.footer || ""
+                  )}
+                </td>
+              )
+            })}
+          </tr>
+        </tfoot>
+      )}
+    </table>
+  </div>
+</rla-table>
+
+<script>
+  if (typeof HTMLElement !== "undefined") {
+    class RLATableElement extends HTMLElement {
+      private _allRows: HTMLTableRowElement[] = []
+
+      connectedCallback() {
+        const table = this.querySelector<HTMLTableElement>("table")
+        if (!table) return
+        const tbody = table.querySelector("tbody")
+        if (!tbody) return
+
+        // Cache original row order for sort resets
+        this._allRows = Array.from(tbody.querySelectorAll<HTMLTableRowElement>("tr[data-slot=tr]"))
+
+        this._initSearch(tbody)
+        this._initColumnVisibility(table, tbody)
+        this._initSort(table, tbody)
+        this._initRowEvents(tbody)
+      }
+
+      // ── Search ────────────────────────────────────────────────────────────
+      private _initSearch(tbody: Element) {
+        const input = this.querySelector<HTMLInputElement>("[data-rla-table-search]")
+        if (!input) return
+        input.addEventListener("input", () => {
+          const q = input.value.toLowerCase().trim()
+          tbody.querySelectorAll<HTMLTableRowElement>("tr[data-slot=tr]").forEach((row) => {
+            if (!q || (row.textContent?.toLowerCase() ?? "").includes(q)) {
+              row.style.display = ""
+            } else {
+              row.style.display = "none"
+            }
+          })
+        })
+      }
+
+      // ── Column visibility ─────────────────────────────────────────────────
+      private _initColumnVisibility(table: HTMLTableElement, tbody: Element) {
+        this.addEventListener("rla-dropdown-checkbox-change", (e: Event) => {
+          const ev = e as CustomEvent<{ id: string; checked: boolean }>
+          const { id: colId, checked } = ev.detail ?? {}
+          if (!colId) return
+
+          const display = checked ? "" : "none"
+
+          // Header th
+          const th = table.querySelector<HTMLElement>(`th[data-col-id="${colId}"]`)
+          if (th) th.style.display = display
+
+          // Footer td (tfoot)
+          const tfoot = table.querySelector<HTMLElement>("tfoot")
+          if (tfoot) {
+            tfoot
+              .querySelectorAll<HTMLElement>(`td[data-col-id="${colId}"]`)
+              .forEach((td) => (td.style.display = display))
+          }
+
+          // All body tds for this column
+          tbody
+            .querySelectorAll<HTMLElement>(`td[data-col-id="${colId}"]`)
+            .forEach((td) => (td.style.display = display))
+
+          this.dispatchEvent(
+            new CustomEvent("rla-column-visibility-change", {
+              detail: { id: colId, visible: checked },
+              bubbles: true
+            })
+          )
+        })
+      }
+
+      // ── Column sort ───────────────────────────────────────────────────────
+      private _initSort(table: HTMLTableElement, tbody: Element) {
+        const sortBtns = table.querySelectorAll<HTMLButtonElement>("[data-rla-sort-btn]")
+
+        sortBtns.forEach((btn) => {
+          btn.addEventListener("click", (e) => {
+            const colId = btn.getAttribute("data-rla-col-id")
+            if (!colId) return
+
+            const isMulti = (e as MouseEvent).shiftKey
+            const currentDir = btn.getAttribute("data-sort-dir") || "none"
+            const nextDir = currentDir === "asc" ? "desc" : currentDir === "desc" ? "none" : "asc"
+
+            if (!isMulti) {
+              // Reset all other buttons
+              sortBtns.forEach((other) => {
+                if (other !== btn) {
+                  other.setAttribute("data-sort-dir", "none")
+                  const icon = other.querySelector<HTMLElement>("[data-sort-icon]")
+                  if (icon) {
+                    icon.className =
+                      "i-lucide-arrow-up-down size-3.5 opacity-40 group-hover:opacity-100 transition-all shrink-0"
+                  }
+                }
+              })
+            }
+
+            btn.setAttribute("data-sort-dir", nextDir)
+            const icon = btn.querySelector<HTMLElement>("[data-sort-icon]")
+            if (icon) {
+              icon.className =
+                nextDir === "asc"
+                  ? "i-lucide-arrow-up-narrow-wide size-3.5 text-primary transition-all shrink-0"
+                  : nextDir === "desc"
+                    ? "i-lucide-arrow-down-wide-narrow size-3.5 text-primary transition-all shrink-0"
+                    : "i-lucide-arrow-up-down size-3.5 opacity-40 group-hover:opacity-100 transition-all shrink-0"
+            }
+
+            // Gather all active sorts
+            const activeSorts: Array<{ id: string; dir: string }> = []
+            sortBtns.forEach((b) => {
+              const dir = b.getAttribute("data-sort-dir") || "none"
+              if (dir !== "none") {
+                activeSorts.push({ id: b.getAttribute("data-rla-col-id") || "", dir })
+              }
+            })
+
+            if (nextDir === "none" && !isMulti) {
+              // Restore original DOM order
+              this._allRows.forEach((row) => tbody.appendChild(row))
+            } else {
+              const groupRows = Array.from(tbody.querySelectorAll<HTMLTableRowElement>("tr[data-slot=tr-group]"))
+              
+              if (groupRows.length > 0) {
+                // Sort within each group
+                groupRows.forEach((groupHeader) => {
+                  const groupId = groupHeader.getAttribute("data-group-id")
+                  const rowsInGroup = Array.from(
+                    tbody.querySelectorAll<HTMLTableRowElement>(`tr[data-slot=tr][data-group-id="${groupId}"]`)
+                  )
+                  rowsInGroup.sort((a, b) => {
+                    for (const { id, dir } of activeSorts) {
+                      const idx = Array.from(table.querySelectorAll("thead th")).findIndex(
+                        (th) => (th as HTMLElement).getAttribute("data-col-id") === id
+                      )
+                      if (idx < 0) continue
+                      const cellA = a.children[idx]?.textContent?.trim() ?? ""
+                      const cellB = b.children[idx]?.textContent?.trim() ?? ""
+                      const cleanA = cellA.replace(/[$€£,\s]/g, "")
+                      const cleanB = cellB.replace(/[$€£,\s]/g, "")
+                      const isNumA = cleanA !== "" && !isNaN(Number(cleanA))
+                      const isNumB = cleanB !== "" && !isNaN(Number(cleanB))
+
+                      let cmp: number
+                      if (isNumA && isNumB) {
+                        cmp = Number(cleanA) - Number(cleanB)
+                      } else {
+                        cmp = cellA.localeCompare(cellB)
+                      }
+                      if (dir === "desc") cmp = -cmp
+                      if (cmp !== 0) return cmp
+                    }
+                    return 0
+                  })
+                  // Re-insert sorted rows directly following the group header
+                  let lastElement: Element = groupHeader
+                  rowsInGroup.forEach((r) => {
+                    lastElement.insertAdjacentElement("afterend", r)
+                    lastElement = r
+                  })
+                })
+              } else {
+                const rows = Array.from(
+                  tbody.querySelectorAll<HTMLTableRowElement>("tr[data-slot=tr]")
+                )
+                rows.sort((a, b) => {
+                  for (const { id, dir } of activeSorts) {
+                    const idx = Array.from(table.querySelectorAll("thead th")).findIndex(
+                      (th) => (th as HTMLElement).getAttribute("data-col-id") === id
+                    )
+                    if (idx < 0) continue
+                    const cellA = a.children[idx]?.textContent?.trim() ?? ""
+                    const cellB = b.children[idx]?.textContent?.trim() ?? ""
+                    const cleanA = cellA.replace(/[$€£,\s]/g, "")
+                    const cleanB = cellB.replace(/[$€£,\s]/g, "")
+                    const isNumA = cleanA !== "" && !isNaN(Number(cleanA))
+                    const isNumB = cleanB !== "" && !isNaN(Number(cleanB))
+
+                    let cmp: number
+                    if (isNumA && isNumB) {
+                      cmp = Number(cleanA) - Number(cleanB)
+                    } else {
+                      cmp = cellA.localeCompare(cellB)
+                    }
+                    if (dir === "desc") cmp = -cmp
+                    if (cmp !== 0) return cmp
+                  }
+                  return 0
+                })
+                rows.forEach((row) => tbody.appendChild(row))
+              }
+            }
+
+            this.dispatchEvent(
+              new CustomEvent("rla-sorting-change", {
+                detail: { id: colId, dir: nextDir },
+                bubbles: true
+              })
+            )
+          })
+        })
+      }
+
+      // ── Row events ────────────────────────────────────────────────────────
+      private _initRowEvents(tbody: Element) {
+        // Select
+        tbody.addEventListener("click", (e) => {
+          const target = e.target as HTMLElement
+          if (target.closest("a, button, input, select, textarea, [role=button]")) return
+          const tr = target.closest<HTMLElement>("tr[data-row-id]")
+          if (!tr) return
+          this.dispatchEvent(
+            new CustomEvent("rla-row-select", {
+              detail: { rowId: tr.getAttribute("data-row-id"), event: e },
+              bubbles: true
+            })
+          )
+        })
+
+        // Hover
+        tbody.addEventListener("mouseover", (e) => {
+          const tr = (e.target as HTMLElement).closest<HTMLElement>("tr[data-row-id]")
+          if (!tr) return
+          this.dispatchEvent(
+            new CustomEvent("rla-row-hover", {
+              detail: { rowId: tr.getAttribute("data-row-id"), event: e },
+              bubbles: true
+            })
+          )
+        })
+
+        tbody.addEventListener("mouseleave", (e) => {
+          this.dispatchEvent(
+            new CustomEvent("rla-row-hover", {
+              detail: { rowId: null, event: e },
+              bubbles: true
+            })
+          )
+        })
+
+        // Context menu
+        tbody.addEventListener("contextmenu", (e) => {
+          const tr = (e.target as HTMLElement).closest<HTMLElement>("tr[data-row-id]")
+          if (!tr) return
+          this.dispatchEvent(
+            new CustomEvent("rla-row-contextmenu", {
+              detail: { rowId: tr.getAttribute("data-row-id"), event: e },
+              bubbles: true
+            })
+          )
+        })
+      }
+
+      // ── Public API (imperative) ───────────────────────────────────────────
+
+      /** Filter visible rows by a text query (case-insensitive). */
+      setGlobalFilter(query: string) {
+        const searchInput = this.querySelector<HTMLInputElement>("[data-rla-table-search]")
+        if (searchInput) {
+          searchInput.value = query
+          searchInput.dispatchEvent(new Event("input"))
+        } else {
+          // Manual DOM filter when no search input is rendered
+          const tbody = this.querySelector("tbody")
+          if (!tbody) return
+          const q = query.toLowerCase().trim()
+          tbody
+            .querySelectorAll<HTMLTableRowElement>("tr[data-slot=tr]")
+            .forEach((row) => {
+              row.style.display =
+                !q || (row.textContent?.toLowerCase() ?? "").includes(q) ? "" : "none"
+            })
+        }
+      }
+
+      /** Show or hide a column by its column ID. */
+      setColumnVisibility(colId: string, visible: boolean) {
+        this.dispatchEvent(
+          new CustomEvent("rla-dropdown-checkbox-change", {
+            detail: { id: colId, checked: visible },
+            bubbles: false
+          })
+        )
+      }
+
+      /** Return all currently-visible data rows. */
+      getVisibleRows(): HTMLTableRowElement[] {
+        const tbody = this.querySelector("tbody")
+        if (!tbody) return []
+        return Array.from(tbody.querySelectorAll<HTMLTableRowElement>("tr[data-slot=tr]")).filter(
+          (r) => r.style.display !== "none"
+        )
+      }
+
+      /** Return all selected rows (those with data-selected=true). */
+      getSelectedRows(): HTMLTableRowElement[] {
+        const tbody = this.querySelector("tbody")
+        if (!tbody) return []
+        return Array.from(
+          tbody.querySelectorAll<HTMLTableRowElement>("tr[data-selected=true]")
+        )
+      }
+    }
+
+    if (!customElements.get("rla-table")) {
+      customElements.define("rla-table", RLATableElement)
+    }
+  }
+</script>