@rimelight/ui 0.0.51 → 0.0.52

package/src/components/table/RLATable.astro

@@ -1,1044 +1,1692 @@
----
-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>
+---
+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 = {},
+  columnSizing = {},
+  columnOrder = [],
+  enableColumnResizing = false,
+  enableColumnReordering = false,
+  enableRowReordering = false,
+  sorting = [],
+  grouping = [],
+  rowPinning = {},
+  rowSelection = {},
+  expanded = {},
+  pagination,
+  getSubRows,
+  getRowCanExpand,
+  getRowId,
+  searchable = false,
+  searchPlaceholder = "Filter table...",
+  showColumnsToggle = false,
+  exportable = false,
+  exportFilename = "export",
+  actions: tableActions,
+  rowActions,
+  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 rawColumns: TableColumn[] = []
+
+if (columns && columns.length > 0) {
+  rawColumns = [...columns]
+} else if (data && data.length > 0 && typeof data[0] === "object" && data[0] !== null) {
+  const firstRow = data[0] as AnyData
+  rawColumns = Object.keys(firstRow).map((key) => ({
+    id: key,
+    accessorKey: key,
+    header: key.charAt(0).toUpperCase() + key.slice(1),
+    enableSorting: true
+  }))
+}
+
+// Auto-inject rowActions / actions column if defined on table props and not in columns
+const tableActionsDef = tableActions || rowActions
+if (tableActionsDef && !rawColumns.some((c) => c.id === "actions")) {
+  rawColumns.push({
+    id: "actions",
+    header: "",
+    size: 80,
+    minSize: 60,
+    enableSorting: false,
+    enableHiding: false,
+    meta: {
+      class: {
+        th: "text-right",
+        td: "text-right"
+      }
+    },
+    actions: tableActionsDef
+  })
+}
+
+// Normalize actions column defaults
+for (const c of rawColumns) {
+  if (c.id === "actions" || c.actions || c.items) {
+    if (c.enableSorting === undefined) c.enableSorting = false
+    if (c.header === undefined && c.id === "actions") c.header = ""
+    if (c.size === undefined && c.id === "actions") c.size = 60
+    if (c.minSize === undefined && c.id === "actions") c.minSize = 60
+    if (!c.meta?.class?.td && c.id === "actions") {
+      c.meta = {
+        ...c.meta,
+        class: {
+          ...c.meta?.class,
+          th: c.meta?.class?.th || "text-right",
+          td: c.meta?.class?.td || "text-right"
+        }
+      }
+    }
+  }
+}
+
+function getCellActions(row: TableRow, col: TableColumn) {
+  const actionsFn = col.actions ?? col.items ?? (col.id === "actions" ? tableActionsDef : undefined)
+  if (actionsFn) {
+    return typeof actionsFn === "function" ? actionsFn(row) : actionsFn
+  }
+  return null
+}
+
+if (enableRowReordering && !rawColumns.some((c) => c.id === "reorder" || c.id === "dragHandle")) {
+  const reorderCol: TableColumn = {
+    id: "reorder",
+    size: 36,
+    minSize: 36,
+    maxSize: 36,
+    enableSorting: false,
+    enableHiding: false,
+    header: "",
+    cell: () => `<div class="flex items-center justify-center"><span class="${classes.dragHandle}" data-slot="drag-handle" draggable="true"><span class="i-lucide-grip-vertical size-4"></span></span></div>`
+  }
+  rawColumns = [reorderCol, ...rawColumns]
+}
+
+let resolvedColumns: TableColumn[] = rawColumns
+if (columnOrder && columnOrder.length > 0) {
+  const ordered: TableColumn[] = []
+  const map = new Map<string, TableColumn>()
+  for (const c of rawColumns) {
+    map.set(String(c.id || c.accessorKey || ""), c)
+  }
+  for (const id of columnOrder) {
+    if (map.has(id)) {
+      ordered.push(map.get(id)!)
+      map.delete(id)
+    }
+  }
+  for (const remaining of map.values()) {
+    ordered.push(remaining)
+  }
+  resolvedColumns = ordered
+}
+
+// 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 && col.id !== "reorder")
+  .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
+    }
+  })
+
+const exportDropdownItems = [
+  {
+    id: "csv",
+    label: "Export as CSV",
+    icon: "i-lucide-file-spreadsheet"
+  },
+  {
+    id: "json",
+    label: "Export as JSON",
+    icon: "i-lucide-file-json"
+  }
+]
+
+// ─── 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 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
+        const colDef = resolvedColumns.find((c) => (c.id || c.accessorKey) === key)
+        if (colDef && typeof colDef.accessorFn === "function") {
+          return colDef.accessorFn(item)
+        }
+        return getNestedValue(item as AnyData, key)
+      },
+      getIsSelected: () => {
+        if (rowSelection[rId]) return true
+        if (subRowsList && subRowsList.length > 0) {
+          return subRowsList.every((s) => s.getIsSelected())
+        }
+        return false
+      },
+      getIsSomeSelected: () => {
+        if (!subRowsList || subRowsList.length === 0) return false
+        const count = subRowsList.filter((s) => s.getIsSelected() || s.getIsSomeSelected()).length
+        return count > 0 && !subRowsList.every((s) => s.getIsSelected())
+      },
+      toggleSelected: () => {},
+      getToggleSelectedHandler: () => () => {},
+      getIsExpanded: () => isExpanded,
+      toggleExpanded: () => {},
+      getToggleExpandedHandler: () => () => {},
+      getIsPinned: () => {
+        if (rowPinning.top?.includes(rId)) return "top"
+        if (rowPinning.bottom?.includes(rId)) return "bottom"
+        return false
+      },
+      pin: () => {},
+      getIsGrouped: () => false,
+      getCanExpand: () => {
+        if (typeof getRowCanExpand === "function") {
+          return getRowCanExpand(rowObj)
+        }
+        return !!(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)
+      ) ||
+      resolvedColumns.some((col) => {
+        const v = col.accessorFn
+          ? col.accessorFn(r.original)
+          : r.getValue((col.id || col.accessorKey || "") as string)
+        return String(v ?? "").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 if (valA instanceof Date && valB instanceof Date) {
+        cmp = valA.getTime() - valB.getTime()
+      } else {
+        const numA = Number(valA)
+        const numB = Number(valB)
+        if (!isNaN(numA) && !isNaN(numB)) {
+          cmp = numA - numB
+        } else {
+          cmp = String(valA).localeCompare(String(valB))
+        }
+      }
+      return desc ? -cmp : cmp
+    }
+    return 0
+  })
+}
+
+// ─── Multi-level Grouping ─────────────────────────────────────────────────────
+
+type GroupedItem =
+  | { type: "group"; group: TableGroup; depth: number }
+  | { type: "row"; row: TableRow }
+
+function groupRowsRecursively(
+  rows: TableRow[],
+  groupCols: string[],
+  depth = 0,
+  parentPath = ""
+): GroupedItem[] {
+  if (depth >= groupCols.length || rows.length === 0) {
+    return rows.map((r) => ({ type: "row", row: r }))
+  }
+
+  const colId = groupCols[depth]!
+  const groupMap = new Map<string, TableRow[]>()
+  const groupOrder: string[] = []
+
+  for (const row of rows) {
+    const val = String(row.getValue(colId) ?? "")
+    if (!groupMap.has(val)) {
+      groupMap.set(val, [])
+      groupOrder.push(val)
+    }
+    row.groupingColumnId = colId
+    row.groupingValue = val
+    groupMap.get(val)!.push(row)
+  }
+
+  const result: GroupedItem[] = []
+  for (const val of groupOrder) {
+    const subRows = groupMap.get(val)!
+    const groupId = `group-${parentPath}${colId}-${val}`
+    const group: TableGroup = {
+      id: groupId,
+      columnId: colId,
+      value: val,
+      depth,
+      rows: subRows
+    }
+    result.push({ type: "group", group, depth })
+    result.push(...groupRowsRecursively(subRows, groupCols, depth + 1, `${groupId}/`))
+  }
+  return result
+}
+
+let groupedItems: GroupedItem[] = []
+if (grouping && grouping.length > 0) {
+  groupedItems = groupRowsRecursively(processedRows, grouping, 0, "")
+} 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)
+    const sized = columnSizing[colId]
+    offset += typeof sized === "number" ? sized : 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)
+    const sized = columnSizing[colId]
+    offset += typeof sized === "number" ? sized : 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 || exportable || 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
+}
+
+function getColumnSizeStyle(col: TableColumn): string {
+  const colId = (col.id || col.accessorKey || "") as string
+  const sizeVal = columnSizing[colId] ?? col.size
+  const styles: string[] = []
+  if (sizeVal) {
+    styles.push(`width:${typeof sizeVal === "number" ? `${sizeVal}px` : sizeVal};`)
+  }
+  if (col.minSize) {
+    styles.push(`min-width:${typeof col.minSize === "number" ? `${col.minSize}px` : col.minSize};`)
+  }
+  if (col.maxSize) {
+    styles.push(`max-width:${typeof col.maxSize === "number" ? `${col.maxSize}px` : col.maxSize};`)
+  }
+  return styles.join(" ")
+}
+---
+
+<rla-table
+  class:list={[classes.root, className]}
+  data-slot="root"
+  {...rest}
+>
+  {showToolbar && (
+    <div
+      class={classes.toolbar}
+      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" />
+
+      <div class="ml-auto flex items-center gap-2 shrink-0">
+        {exportable && (
+          <RLADropdownMenu
+            label="Export"
+            icon="i-lucide-download"
+            items={exportDropdownItems as any}
+            content={{ align: "end" }}
+            size="sm"
+            color="neutral"
+            data-rla-export-menu
+          />
+        )}
+
+        {showColumnsToggle && (
+          <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">
+      <colgroup>
+        {visibleColumns.map((col) => {
+          const colId = (col.id || col.accessorKey || "") as string
+          const sizeStyle = getColumnSizeStyle(col)
+          return <col data-col-id={colId} style={sizeStyle || undefined} />
+        })}
+      </colgroup>
+
+      {(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 || col.accessorFn) &&
+                colId !== "actions" &&
+                colId !== "select" &&
+                colId !== "reorder" &&
+                colId !== "dragHandle"
+              const activeSort = (sorting as SortingState).find((s) => s.id === colId)
+              const sortDir = activeSort ? (activeSort.desc ? "desc" : "asc") : "none"
+              const headerSlotName = `${colId}-header`
+
+              const sizeStyle = getColumnSizeStyle(col)
+              const pinStyle = getPinStyle(colId)
+              const combinedStyle = [sizeStyle, pinStyle, metaThStyle]
+                .filter(Boolean)
+                .join("")
+
+              const headerLabel =
+                typeof col.header === "string"
+                  ? col.header
+                  : col.header !== undefined
+                    ? ""
+                    : colId === "reorder" || colId === "select" || colId === "actions" || colId === "dragHandle"
+                      ? ""
+                      : colId.charAt(0).toUpperCase() + colId.slice(1)
+
+              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"
+                >
+                  <div class="flex items-center gap-1.5">
+                    {enableColumnReordering && colId !== "reorder" && colId !== "select" && colId !== "actions" && colId !== "dragHandle" && (
+                      <span
+                        class={classes.dragHandle}
+                        data-slot="drag-handle"
+                        draggable="true"
+                      >
+                        <span class="i-lucide-grip-vertical size-3.5 opacity-40 hover:opacity-100" />
+                      </span>
+                    )}
+
+                    <div class="flex-1 min-w-0">
+                      {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: {} })
+                              : headerLabel}
+                          </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: {} })} />
+                      ) : (
+                        headerLabel
+                      )}
+                    </div>
+                  </div>
+
+                  {enableColumnResizing && (
+                    <div
+                      class={classes.resizer}
+                      data-slot="resizer"
+                      data-col-id={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, depth } = item
+              return (
+                <tr class={classes.trGroup} data-slot="tr-group" data-group-id={group.id} data-depth={depth}>
+                  <td
+                    colspan={Math.max(1, visibleColumns.length)}
+                    class={classes.tdGroup}
+                    style={depth ? `padding-left: ${depth * 1.5 + 1}rem;` : undefined}
+                    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-xs uppercase text-muted font-medium">{group.columnId}:</span>
+                        <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-row-index={row.index}
+                  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 cellValue = typeof col.accessorFn === "function"
+                      ? col.accessorFn(row.original)
+                      : (col.accessorKey || col.id)
+                        ? row.getValue((col.accessorKey || col.id) as string)
+                        : 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)}
+                          />
+                        ) : (() => {
+                          const actionItems = getCellActions(row, col)
+                          if (Array.isArray(actionItems) && actionItems.length > 0) {
+                            return (
+                              <div class="flex items-center justify-end">
+                                <RLADropdownMenu
+                                  items={actionItems as any}
+                                  content={{ align: "end", side: "bottom" }}
+                                  size="xs"
+                                  color="neutral"
+                                />
+                              </div>
+                            )
+                          }
+
+                          if (typeof col.cell === "function") {
+                            const rendered = col.cell({
+                              row,
+                              getValue: () => cellValue,
+                              renderValue: () => cellValue,
+                              column: col,
+                              table: {}
+                            })
+                            if (Array.isArray(rendered) && rendered.length > 0) {
+                              return (
+                                <div class="flex items-center justify-end">
+                                  <RLADropdownMenu
+                                    items={rendered as any}
+                                    content={{ align: "end", side: "bottom" }}
+                                    size="xs"
+                                    color="neutral"
+                                  />
+                                </div>
+                              )
+                            }
+                            return <Fragment set:html={rendered} />
+                          }
+
+                          return cellValue !== undefined && cellValue !== null ? (
+                            String(cellValue)
+                          ) : (
+                            "—"
+                          )
+                        })()}
+                      </td>
+                    )
+                  })}
+                </tr>
+
+                {/* Expanded sub-row */}
+                {row.getCanExpand() && 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-row-index={subRow.index}
+                        data-depth={subRow.depth}
+                      >
+                        {visibleColumns.map((col) => {
+                          const colId = (col.id || col.accessorKey || "") as string
+                          const cellValue = typeof col.accessorFn === "function"
+                            ? col.accessorFn(subRow.original)
+                            : (col.accessorKey || col.id)
+                              ? subRow.getValue((col.accessorKey || col.id) as string)
+                              : undefined
+                          const cellSlotName = `${colId}-cell`
+                          const pinned = isPinned(colId)
+                          const metaTdClass =
+                            typeof col.meta?.class?.td === "function"
+                              ? col.meta.class.td(subRow)
+                              : col.meta?.class?.td || ""
+                          const metaTdStyle =
+                            typeof col.meta?.style?.td === "function"
+                              ? col.meta.style.td(subRow)
+                              : col.meta?.style?.td || ""
+                          const colSpanVal =
+                            typeof col.meta?.colspan?.td === "function"
+                              ? col.meta.colspan.td(subRow)
+                              : col.meta?.colspan?.td
+                          const rowSpanVal =
+                            typeof col.meta?.rowspan?.td === "function"
+                              ? col.meta.rowspan.td(subRow)
+                              : col.meta?.rowspan?.td
+
+                          const sizeStyle = getColumnSizeStyle(col)
+                          const pinStyle_ = getPinStyle(colId)
+                          const combinedTdStyle = [sizeStyle, 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: subRow,
+                                    column: col,
+                                    cell: { value: cellValue },
+                                    getValue: () => cellValue,
+                                    renderValue: () => cellValue
+                                  } as any)}
+                                />
+                              ) : (() => {
+                                const actionItems = getCellActions(subRow, col)
+                                if (Array.isArray(actionItems) && actionItems.length > 0) {
+                                  return (
+                                    <div class="flex items-center justify-end">
+                                      <RLADropdownMenu
+                                        items={actionItems as any}
+                                        content={{ align: "end", side: "bottom" }}
+                                        size="xs"
+                                        color="neutral"
+                                      />
+                                    </div>
+                                  )
+                                }
+
+                                if (typeof col.cell === "function") {
+                                  const rendered = col.cell({
+                                    row: subRow,
+                                    getValue: () => cellValue,
+                                    renderValue: () => cellValue,
+                                    column: col,
+                                    table: {}
+                                  })
+                                  if (Array.isArray(rendered) && rendered.length > 0) {
+                                    return (
+                                      <div class="flex items-center justify-end">
+                                        <RLADropdownMenu
+                                          items={rendered as any}
+                                          content={{ align: "end", side: "bottom" }}
+                                          size="xs"
+                                          color="neutral"
+                                        />
+                                      </div>
+                                    )
+                                  }
+                                  return <Fragment set:html={rendered} />
+                                }
+
+                                return 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 window !== "undefined") {
+    class RLATableElement extends HTMLElement {
+      connectedCallback() {
+        this._initSearch()
+        this._initSorting()
+        this._initRowEvents()
+        this._initSelection()
+        this._initExpandToggles()
+        this._initColumnResizing()
+        this._initColumnReordering()
+        this._initRowReordering()
+      }
+
+      private _initColumnResizing() {
+        const resizers = this.querySelectorAll<HTMLElement>("[data-slot=resizer]")
+        resizers.forEach((resizer) => {
+          resizer.addEventListener("pointerdown", (e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            const startX = e.clientX
+            const th = resizer.closest<HTMLTableCellElement>("th")
+            const colId = resizer.getAttribute("data-col-id") || th?.getAttribute("data-col-id")
+            if (!th || !colId) return
+            const initialWidth = th.offsetWidth
+            const colEl = this.querySelector<HTMLTableColElement>(`col[data-col-id="${colId}"]`)
+
+            const onPointerMove = (moveEv: PointerEvent) => {
+              const deltaX = moveEv.clientX - startX
+              const newWidth = Math.max(40, initialWidth + deltaX)
+              th.style.width = `${newWidth}px`
+              if (colEl) colEl.style.width = `${newWidth}px`
+            }
+
+            const onPointerUp = () => {
+              window.removeEventListener("pointermove", onPointerMove)
+              window.removeEventListener("pointerup", onPointerUp)
+              this.dispatchEvent(
+                new CustomEvent("rla-column-resize", {
+                  detail: { colId, width: th.offsetWidth },
+                  bubbles: true
+                })
+              )
+            }
+
+            window.addEventListener("pointermove", onPointerMove)
+            window.addEventListener("pointerup", onPointerUp)
+          })
+        })
+      }
+
+      private _initColumnReordering() {
+        const handles = this.querySelectorAll<HTMLElement>("thead th [data-slot=drag-handle]")
+        let draggedColId: string | null = null
+
+        handles.forEach((handle) => {
+          handle.addEventListener("dragstart", (e) => {
+            const th = handle.closest<HTMLTableCellElement>("th")
+            draggedColId = th?.getAttribute("data-col-id") || null
+            e.dataTransfer?.setData("text/plain", draggedColId || "")
+            if (e.dataTransfer) {
+              e.dataTransfer.effectAllowed = "move"
+            }
+          })
+          handle.addEventListener("dragend", () => {
+            draggedColId = null
+            this.querySelectorAll("thead th").forEach((th) => th.removeAttribute("data-drop-position"))
+          })
+        })
+
+        const ths = this.querySelectorAll<HTMLTableCellElement>("thead th")
+        ths.forEach((th) => {
+          th.addEventListener("dragover", (e) => {
+            if (!draggedColId) return
+            e.preventDefault()
+            const rect = th.getBoundingClientRect()
+            const pos = e.clientX < rect.left + rect.width / 2 ? "left" : "right"
+            ths.forEach((other) => {
+              if (other !== th) other.removeAttribute("data-drop-position")
+            })
+            th.setAttribute("data-drop-position", pos)
+          })
+          th.addEventListener("dragleave", () => {
+            th.removeAttribute("data-drop-position")
+          })
+          th.addEventListener("drop", (e) => {
+            if (!draggedColId) return
+            e.preventDefault()
+            const targetColId = th.getAttribute("data-col-id")
+            const pos = th.getAttribute("data-drop-position") || "left"
+            th.removeAttribute("data-drop-position")
+            if (!targetColId || draggedColId === targetColId) return
+            this.dispatchEvent(
+              new CustomEvent("rla-column-reorder", {
+                detail: { from: draggedColId, to: targetColId, position: pos },
+                bubbles: true
+              })
+            )
+          })
+        })
+      }
+
+      private _initRowReordering() {
+        const handles = this.querySelectorAll<HTMLElement>("tbody tr [data-slot=drag-handle]")
+        let draggedRowId: string | null = null
+
+        handles.forEach((handle) => {
+          handle.addEventListener("dragstart", (e) => {
+            const tr = handle.closest<HTMLTableRowElement>("tr")
+            draggedRowId = tr?.getAttribute("data-row-id") || null
+            e.dataTransfer?.setData("text/plain", draggedRowId || "")
+            if (e.dataTransfer) {
+              e.dataTransfer.effectAllowed = "move"
+            }
+          })
+          handle.addEventListener("dragend", () => {
+            draggedRowId = null
+            this.querySelectorAll("tbody tr").forEach((tr) => tr.removeAttribute("data-drop-position"))
+          })
+        })
+
+        const trs = this.querySelectorAll<HTMLTableRowElement>("tbody tr[data-slot=tr]")
+        trs.forEach((tr) => {
+          tr.addEventListener("dragover", (e) => {
+            if (!draggedRowId) return
+            e.preventDefault()
+            const rect = tr.getBoundingClientRect()
+            const pos = e.clientY < rect.top + rect.height / 2 ? "top" : "bottom"
+            trs.forEach((other) => {
+              if (other !== tr) other.removeAttribute("data-drop-position")
+            })
+            tr.setAttribute("data-drop-position", pos)
+          })
+          tr.addEventListener("dragleave", () => {
+            tr.removeAttribute("data-drop-position")
+          })
+          tr.addEventListener("drop", (e) => {
+            if (!draggedRowId) return
+            e.preventDefault()
+            const targetRowId = tr.getAttribute("data-row-id")
+            const pos = tr.getAttribute("data-drop-position") || "top"
+            tr.removeAttribute("data-drop-position")
+            if (!targetRowId || draggedRowId === targetRowId) return
+
+            // Move in DOM
+            const sourceTr = this.querySelector<HTMLTableRowElement>(`tbody tr[data-row-id="${draggedRowId}"]`)
+            if (sourceTr && tr) {
+              if (pos === "top") {
+                tr.insertAdjacentElement("beforebegin", sourceTr)
+              } else {
+                tr.insertAdjacentElement("afterend", sourceTr)
+              }
+            }
+
+            this.dispatchEvent(
+              new CustomEvent("rla-row-reorder", {
+                detail: { from: draggedRowId, to: targetRowId, position: pos },
+                bubbles: true
+              })
+            )
+          })
+        })
+      }
+
+      // ── Search / Filtering ────────────────────────────────────────────────
+      private _initSearch() {
+        const searchInput = this.querySelector<HTMLInputElement>("[data-rla-table-search]")
+        if (!searchInput) return
+
+        searchInput.addEventListener("input", () => {
+          const query = searchInput.value.toLowerCase().trim()
+          const tbody = this.querySelector("tbody")
+          if (!tbody) return
+
+          const rows = tbody.querySelectorAll<HTMLTableRowElement>("tr[data-slot=tr]")
+          rows.forEach((row) => {
+            const text = row.textContent?.toLowerCase() ?? ""
+            const match = !query || text.includes(query)
+            row.style.display = match ? "" : "none"
+            const rowId = row.getAttribute("data-row-id")
+            if (rowId) {
+              const expandedRow = tbody.querySelector<HTMLTableRowElement>(
+                `tr[data-slot=tr-expanded][data-row-id="${rowId}"]`
+              )
+              if (expandedRow) {
+                expandedRow.style.display = match && row.getAttribute("data-expanded") === "true" ? "" : "none"
+              }
+            }
+          })
+        })
+      }
+
+      // ── Sorting ───────────────────────────────────────────────────────────
+      private _initSorting() {
+        const sortButtons = this.querySelectorAll<HTMLButtonElement>("[data-rla-sort-btn]")
+        const activeSorts: Array<{ id: string; dir: "asc" | "desc" }> = []
+
+        sortButtons.forEach((btn) => {
+          btn.addEventListener("click", (e) => {
+            const colId = btn.getAttribute("data-rla-col-id")
+            if (!colId) return
+
+            const currentDir = btn.getAttribute("data-sort-dir") ?? "none"
+            const isMulti = (e as MouseEvent).shiftKey
+
+            let nextDir: "asc" | "desc" | "none" = "asc"
+            if (currentDir === "asc") nextDir = "desc"
+            else if (currentDir === "desc") nextDir = "none"
+
+            if (!isMulti) {
+              activeSorts.length = 0
+              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 opacity-40 group-hover:opacity-100 size-3.5 transition-all shrink-0"
+                  }
+                }
+              })
+            }
+
+            btn.setAttribute("data-sort-dir", nextDir)
+            const icon = btn.querySelector("[data-sort-icon]")
+            if (icon) {
+              if (nextDir === "asc") {
+                icon.className =
+                  "i-lucide-arrow-up-narrow-wide text-primary size-3.5 transition-all shrink-0"
+              } else if (nextDir === "desc") {
+                icon.className =
+                  "i-lucide-arrow-down-wide-narrow text-primary size-3.5 transition-all shrink-0"
+              } else {
+                icon.className =
+                  "i-lucide-arrow-up-down opacity-40 group-hover:opacity-100 size-3.5 transition-all shrink-0"
+              }
+            }
+
+            const existingIdx = activeSorts.findIndex((s) => s.id === colId)
+            if (nextDir === "none") {
+              if (existingIdx >= 0) activeSorts.splice(existingIdx, 1)
+            } else if (existingIdx >= 0) {
+              activeSorts[existingIdx] = { id: colId, dir: nextDir }
+            } else {
+              activeSorts.push({ id: colId, dir: nextDir })
+            }
+
+            const tbody = this.querySelector("tbody")
+            const table = this.querySelector("table")
+            if (tbody && table) {
+              const groupRows = Array.from(
+                tbody.querySelectorAll<HTMLTableRowElement>("tr[data-slot=tr-group]")
+              )
+
+              if (groupRows.length > 0) {
+                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
+                  })
+                  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() {
+        const tbody = this.querySelector("tbody")
+        if (!tbody) return
+
+        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
+            })
+          )
+        })
+
+        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
+            })
+          )
+        })
+
+        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
+            })
+          )
+        })
+      }
+
+      // ── Selection handling ────────────────────────────────────────────────
+      private _initSelection() {
+        const tbody = this.querySelector("tbody")
+        if (!tbody) return
+        const selectAll = this.querySelector<HTMLInputElement>("[data-rla-select-all]")
+        const rowCheckboxes = tbody.querySelectorAll<HTMLInputElement>("[data-row-checkbox]")
+
+        const updateSelectAllState = () => {
+          if (!selectAll) return
+          const checkedCount = Array.from(rowCheckboxes).filter((cb) => cb.checked).length
+          if (checkedCount === 0) {
+            selectAll.checked = false
+            selectAll.indeterminate = false
+          } else if (checkedCount === rowCheckboxes.length) {
+            selectAll.checked = true
+            selectAll.indeterminate = false
+          } else {
+            selectAll.checked = false
+            selectAll.indeterminate = true
+          }
+        }
+
+        if (selectAll) {
+          selectAll.addEventListener("change", () => {
+            const isChecked = selectAll.checked
+            rowCheckboxes.forEach((cb) => {
+              cb.checked = isChecked
+              const tr = cb.closest<HTMLTableRowElement>("tr[data-row-id]")
+              if (tr) {
+                if (isChecked) tr.setAttribute("data-selected", "true")
+                else tr.removeAttribute("data-selected")
+              }
+            })
+          })
+        }
+
+        rowCheckboxes.forEach((cb) => {
+          cb.addEventListener("change", () => {
+            const tr = cb.closest<HTMLTableRowElement>("tr[data-row-id]")
+            if (tr) {
+              if (cb.checked) tr.setAttribute("data-selected", "true")
+              else tr.removeAttribute("data-selected")
+            }
+            updateSelectAllState()
+          })
+        })
+      }
+
+      // ── Row Expand Toggles ────────────────────────────────────────────────
+      private _initExpandToggles() {
+        const tbody = this.querySelector("tbody")
+        if (!tbody) return
+
+        tbody.addEventListener("click", (e) => {
+          const target = e.target as HTMLElement
+          const btn = target.closest<HTMLButtonElement>("[data-row-expand]")
+          if (!btn) return
+          e.stopPropagation()
+
+          const rowId = btn.getAttribute("data-row-expand")
+          if (!rowId) return
+
+          const tr = tbody.querySelector<HTMLTableRowElement>(`tr[data-slot=tr][data-row-id="${rowId}"]`)
+          const expandedRow = tbody.querySelector<HTMLTableRowElement>(`tr[data-slot=tr-expanded][data-row-id="${rowId}"]`)
+
+          const isExpanded = tr?.getAttribute("data-expanded") === "true"
+          const next = !isExpanded
+
+          if (tr) {
+            if (next) tr.setAttribute("data-expanded", "true")
+            else tr.removeAttribute("data-expanded")
+          }
+
+          if (expandedRow) {
+            expandedRow.style.display = next ? "" : "none"
+          }
+
+          const chevron = btn.querySelector(".i-lucide-chevron-right, .i-lucide-chevron-down")
+          if (chevron) {
+            if (next) {
+              chevron.classList.remove("i-lucide-chevron-right")
+              chevron.classList.add("i-lucide-chevron-down")
+            } else {
+              chevron.classList.remove("i-lucide-chevron-down")
+              chevron.classList.add("i-lucide-chevron-right")
+            }
+          }
+
+          this.dispatchEvent(
+            new CustomEvent("rla-row-expand-change", {
+              detail: { rowId, expanded: next },
+              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 {
+          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]")
+        )
+      }
+
+      /** Export table data to CSV. */
+      exportToCsv(options?: { filename?: string; selectedOnly?: boolean; columns?: string[] }): string {
+        const table = this.querySelector("table")
+        if (!table) return ""
+        const ths = Array.from(table.querySelectorAll("thead th"))
+        const colIds = ths
+          .map((th) => th.getAttribute("data-col-id") || "")
+          .filter((id) => id && id !== "select" && id !== "actions" && id !== "reorder" && id !== "dragHandle")
+        const targetCols = options?.columns && options.columns.length > 0 ? options.columns : colIds
+
+        const escapeCsv = (val: string) => {
+          if (val.includes(",") || val.includes('"') || val.includes("\n")) {
+            return `"${val.replace(/"/g, '""')}"`
+          }
+          return val
+        }
+
+        const headers = targetCols.map((id) => escapeCsv(id.charAt(0).toUpperCase() + id.slice(1)))
+        const rows = options?.selectedOnly ? this.getSelectedRows() : this.getVisibleRows()
+
+        const lines: string[] = [headers.join(",")]
+        rows.forEach((tr) => {
+          const cells = targetCols.map((colId) => {
+            const td = tr.querySelector(`td[data-col-id="${colId}"]`)
+            return escapeCsv(td?.textContent?.trim() ?? "")
+          })
+          lines.push(cells.join(","))
+        })
+
+        const csvContent = lines.join("\r\n")
+        if (options?.filename) {
+          const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
+          const url = URL.createObjectURL(blob)
+          const link = document.createElement("a")
+          link.href = url
+          link.download = options.filename.endsWith(".csv") ? options.filename : `${options.filename}.csv`
+          link.click()
+          URL.revokeObjectURL(url)
+        }
+        return csvContent
+      }
+
+      /** Export table data to JSON. */
+      exportToJson(options?: { filename?: string; selectedOnly?: boolean; columns?: string[] }): string {
+        const table = this.querySelector("table")
+        if (!table) return "[]"
+        const ths = Array.from(table.querySelectorAll("thead th"))
+        const colIds = ths
+          .map((th) => th.getAttribute("data-col-id") || "")
+          .filter((id) => id && id !== "select" && id !== "actions" && id !== "reorder" && id !== "dragHandle")
+        const targetCols = options?.columns && options.columns.length > 0 ? options.columns : colIds
+        const rows = options?.selectedOnly ? this.getSelectedRows() : this.getVisibleRows()
+
+        const dataArr = rows.map((tr) => {
+          const rowObj: Record<string, string> = {}
+          targetCols.forEach((colId) => {
+            const td = tr.querySelector(`td[data-col-id="${colId}"]`)
+            rowObj[colId] = td?.textContent?.trim() ?? ""
+          })
+          return rowObj
+        })
+
+        const jsonContent = JSON.stringify(dataArr, null, 2)
+        if (options?.filename) {
+          const blob = new Blob([jsonContent], { type: "application/json;charset=utf-8;" })
+          const url = URL.createObjectURL(blob)
+          const link = document.createElement("a")
+          link.href = url
+          link.download = options.filename.endsWith(".json") ? options.filename : `${options.filename}.json`
+          link.click()
+          URL.revokeObjectURL(url)
+        }
+        return jsonContent
+      }
+
+      /** Return map of unique values and counts for a given column. */
+      getFacetedUniqueValues(columnId: string): Map<string, number> {
+        const map = new Map<string, number>()
+        const rows = this.getVisibleRows()
+        rows.forEach((tr) => {
+          const td = tr.querySelector(`td[data-col-id="${columnId}"]`)
+          const val = td?.textContent?.trim() ?? ""
+          map.set(val, (map.get(val) || 0) + 1)
+        })
+        return map
+      }
+
+      /** Return min/max numeric range for a given column. */
+      getFacetedMinMaxValues(columnId: string): [number, number] | undefined {
+        const rows = this.getVisibleRows()
+        let min: number | undefined
+        let max: number | undefined
+        rows.forEach((tr) => {
+          const td = tr.querySelector(`td[data-col-id="${columnId}"]`)
+          const text = (td?.textContent?.trim() ?? "").replace(/[$€£,\s]/g, "")
+          const val = Number(text)
+          if (!isNaN(val)) {
+            if (min === undefined || val < min) min = val
+            if (max === undefined || val > max) max = val
+          }
+        })
+        return min !== undefined && max !== undefined ? [min, max] : undefined
+      }
+    }
+
+    if (!customElements.get("rla-table")) {
+      customElements.define("rla-table", RLATableElement)
+    }
+  }
+</script>