bolt-table 0.1.0

package/dist/index.mjs

@@ -0,0 +1,2043 @@
+// src/BoltTable.tsx
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext
+} from "@dnd-kit/sortable";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  GripVertical as GripVertical2
+} from "lucide-react";
+import React4, {
+  useCallback,
+  useMemo as useMemo2,
+  useRef as useRef4,
+  useState as useState2
+} from "react";
+
+// src/DraggableHeader.tsx
+import { useSortable } from "@dnd-kit/sortable";
+import {
+  ArrowDownAZ,
+  ArrowUpAZ,
+  EyeOff,
+  Filter,
+  FilterX,
+  GripVertical,
+  Pin,
+  PinOff
+} from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function isColumnSortable(col) {
+  return col.sortable !== false;
+}
+function isColumnFilterable(col) {
+  return col.filterable !== false;
+}
+var DraggableHeader = React.memo(
+  ({
+    column,
+    visualIndex,
+    accentColor,
+    onResizeStart,
+    styles,
+    classNames,
+    hideGripIcon = false,
+    gripIcon,
+    stickyOffset,
+    onTogglePin,
+    onToggleHide,
+    isLastColumn = false,
+    sortDirection,
+    onSort,
+    filterValue = "",
+    onFilter,
+    onClearFilter,
+    customContextMenuItems
+  }) => {
+    const effectivelySortable = isColumnSortable(column);
+    const effectivelyFilterable = isColumnFilterable(column);
+    const [contextMenu, setContextMenu] = useState(null);
+    const [showFilterInput, setShowFilterInput] = useState(false);
+    const filterInputRef = useRef(null);
+    const menuRef = useRef(null);
+    const {
+      attributes,
+      listeners,
+      setNodeRef,
+      transition,
+      isDragging,
+      // true while this header is being dragged
+      isOver
+      // true while another header is being dragged over this one
+    } = useSortable({
+      id: column.key,
+      // Pinned columns cannot be dragged (their position is fixed by pinning)
+      disabled: Boolean(column.pinned)
+    });
+    const theme = typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light";
+    useEffect(() => {
+      const handleClickOutside = (e) => {
+        if (menuRef.current && !menuRef.current.contains(e.target)) {
+          setContextMenu(null);
+        }
+      };
+      if (contextMenu) {
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+      }
+    }, [contextMenu]);
+    const handleContextMenu = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const menuWidth = 160;
+      const menuHeight = 180;
+      let x = e.clientX;
+      let y = e.clientY;
+      if (x + menuWidth > window.innerWidth) {
+        x = window.innerWidth - menuWidth - 10;
+      }
+      if (y + menuHeight > window.innerHeight) {
+        y = window.innerHeight - menuHeight - 10;
+      }
+      setContextMenu({ x, y });
+    };
+    const handleResizeStart = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (column.pinned) return;
+      onResizeStart?.(column.key, e);
+    };
+    const columnWidth = column.width ?? 150;
+    const widthPx = `${columnWidth}px`;
+    const isPinned = Boolean(column.pinned);
+    const zIndex = isDragging ? 5 : isPinned ? 12 : 10;
+    const style = {
+      position: "sticky",
+      top: 0,
+      zIndex,
+      // Last column stretches to fill remaining space; all others are fixed width
+      width: isLastColumn ? "100%" : widthPx,
+      minWidth: widthPx,
+      ...isLastColumn ? {} : { maxWidth: widthPx },
+      gridColumn: visualIndex + 1,
+      gridRow: 1,
+      // Fade out slightly while being dragged
+      opacity: isDragging ? 0.3 : 1,
+      transition,
+      borderWidth: "1px",
+      // Show a dashed accent-colored border when another column is dragged over this one
+      borderStyle: isOver ? "dashed" : "solid",
+      ...isOver ? { borderColor: accentColor || "#1788ff" } : { borderLeftColor: "transparent" },
+      // Sticky positioning for pinned columns
+      ...column.pinned === "left" && stickyOffset !== void 0 ? { left: `${stickyOffset}px`, position: "sticky" } : {},
+      ...column.pinned === "right" && stickyOffset !== void 0 ? { right: `${stickyOffset}px`, position: "sticky" } : {},
+      // Pinned columns get a semi-transparent background so they visually
+      // separate from scrolling content behind them
+      ...isPinned ? {
+        backgroundColor: styles?.pinnedBg ?? theme === "dark" ? "#10182890" : "#f9fafb90",
+        ...styles?.pinnedHeader
+      } : {},
+      // Column-level style overrides applied last (highest specificity)
+      ...column.style,
+      ...styles?.header
+    };
+    const baseClasses = "bg-muted/40 group relative truncate flex h-9 items-center overflow-hidden backdrop-blur ";
+    const className = `${baseClasses} ${column.className ?? ""} ${classNames?.header ?? ""} ${classNames?.pinnedHeader ?? ""} `;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: setNodeRef,
+          "data-column-key": column.key,
+          style,
+          className,
+          onContextMenu: handleContextMenu,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ...isPinned ? {} : attributes,
+                ...isPinned ? {} : listeners,
+                className: `group relative z-10 flex h-full flex-1 touch-none items-center gap-1 truncate overflow-hidden px-2 font-medium ${isPinned ? "cursor-default" : "cursor-grab active:cursor-grabbing"}`,
+                "aria-label": isPinned ? `${column.key} column (pinned)` : `Drag ${column.key} column`,
+                children: [
+                  hideGripIcon || isPinned ? null : gripIcon ?? /* @__PURE__ */ jsx(GripVertical, { className: "h-3 w-3 shrink-0 opacity-35 group-hover:opacity-80" }),
+                  /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: `flex min-w-0 items-center gap-1 truncate overflow-hidden text-left select-none`,
+                      children: [
+                        column.title,
+                        sortDirection === "asc" && /* @__PURE__ */ jsx(
+                          ArrowUpAZ,
+                          {
+                            className: "h-3 w-3 shrink-0",
+                            style: { color: accentColor }
+                          }
+                        ),
+                        sortDirection === "desc" && /* @__PURE__ */ jsx(
+                          ArrowDownAZ,
+                          {
+                            className: "h-3 w-3 shrink-0",
+                            style: { color: accentColor }
+                          }
+                        ),
+                        filterValue && /* @__PURE__ */ jsx(
+                          Filter,
+                          {
+                            className: "h-2.5 w-2.5 shrink-0",
+                            style: { color: accentColor }
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            isPinned && /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "group/unpin relative h-full w-6 shrink-0 cursor-pointer border-0 bg-transparent p-0",
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onTogglePin?.(column.key, false);
+                },
+                "aria-label": `Unpin ${column.key} column`,
+                title: "Unpin column",
+                style: { color: accentColor || "1788ff" },
+                children: /* @__PURE__ */ jsx(PinOff, { className: "mx-auto h-3 w-3" })
+              }
+            ),
+            !isPinned && /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "group/resize relative h-full w-3 shrink-0 cursor-col-resize border-0 bg-transparent p-0",
+                onMouseDown: handleResizeStart,
+                "aria-label": `Resize ${column.key} column`,
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute top-0 right-0 h-full w-0.5 opacity-0 transition-opacity group-hover/resize:opacity-100",
+                    style: {
+                      backgroundColor: accentColor || "#1788ff"
+                    }
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      contextMenu && typeof document !== "undefined" && createPortal(
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: menuRef,
+            className: "text-xxs fixed z-[9999] min-w-40 rounded-md border py-1 shadow-lg backdrop-blur",
+            style: {
+              left: `${contextMenu.x}px`,
+              top: `${contextMenu.y}px`,
+              position: "fixed"
+            },
+            role: "menu",
+            children: [
+              effectivelySortable && onSort && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: `cusror-pointer flex w-full items-center gap-2 px-3 py-1.5 text-left ${sortDirection === "asc" ? "font-semibold" : ""}`,
+                    style: sortDirection === "asc" ? { color: accentColor } : void 0,
+                    onClick: () => {
+                      onSort(column.key, "asc");
+                      setContextMenu(null);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(ArrowUpAZ, { className: "h-3 w-3" }),
+                      "Sort Ascending"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: `cusror-pointer flex w-full items-center gap-2 px-3 py-1.5 text-left ${sortDirection === "desc" ? "font-semibold" : ""}`,
+                    style: sortDirection === "desc" ? { color: accentColor } : void 0,
+                    onClick: () => {
+                      onSort(column.key, "desc");
+                      setContextMenu(null);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(ArrowDownAZ, { className: "h-3 w-3" }),
+                      "Sort Descending"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "my-1 border-t dark:border-gray-700" })
+              ] }),
+              effectivelyFilterable && onFilter && /* @__PURE__ */ jsxs(Fragment, { children: [
+                showFilterInput ? (
+                  // Inline text input — pressing Enter applies the filter,
+                  // pressing Escape cancels and returns to the button
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 px-2 py-1.5", children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: filterInputRef,
+                      type: "text",
+                      autoFocus: true,
+                      defaultValue: filterValue,
+                      placeholder: "Filter...",
+                      className: "bg-background text-foreground w-full rounded border px-1.5 py-0.5 text-xs outline-none focus:border-blue-400",
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter") {
+                          onFilter(
+                            column.key,
+                            e.target.value
+                          );
+                          setShowFilterInput(false);
+                          setContextMenu(null);
+                        }
+                        if (e.key === "Escape") {
+                          setShowFilterInput(false);
+                        }
+                      }
+                    }
+                  ) })
+                ) : /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: "cusror-pointer flex w-full items-center gap-2 px-3 py-1.5 text-left",
+                    onClick: () => {
+                      setShowFilterInput(true);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Filter, { className: "h-3 w-3" }),
+                      filterValue ? `Filtered: "${filterValue}"` : "Filter Column"
+                    ]
+                  }
+                ),
+                filterValue && /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: "cusror-pointer flex w-full items-center gap-2 px-3 py-1.5 text-left text-red-500",
+                    onClick: () => {
+                      onClearFilter?.(column.key);
+                      setShowFilterInput(false);
+                      setContextMenu(null);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(FilterX, { className: "h-3 w-3" }),
+                      "Clear Filter"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "my-1 border-t dark:border-gray-700" })
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: "cusror-pointer flex w-full items-center gap-2 px-3 py-1.5 text-left",
+                  onClick: () => {
+                    onTogglePin?.(
+                      column.key,
+                      column.pinned === "left" ? false : "left"
+                    );
+                    setContextMenu(null);
+                  },
+                  children: [
+                    column.pinned === "left" ? /* @__PURE__ */ jsx(PinOff, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Pin, { className: "h-3 w-3" }),
+                    column.pinned === "left" ? "Unpin Left" : "Pin Left"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: "cusror-pointer flex w-full items-center gap-2 px-3 py-1.5 text-left",
+                  onClick: () => {
+                    onTogglePin?.(
+                      column.key,
+                      column.pinned === "right" ? false : "right"
+                    );
+                    setContextMenu(null);
+                  },
+                  children: [
+                    column.pinned === "right" ? /* @__PURE__ */ jsx(PinOff, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Pin, { className: "h-3 w-3" }),
+                    column.pinned === "right" ? "Unpin Right" : "Pin Right"
+                  ]
+                }
+              ),
+              !isPinned && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: "my-1 border-t dark:border-gray-700" }),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: "cusror-pointer flex w-full items-center gap-2 px-3 py-1.5 text-left",
+                    onClick: () => {
+                      onToggleHide?.(column.key);
+                      setContextMenu(null);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(EyeOff, { className: "h-3 w-3" }),
+                      "Hide Column"
+                    ]
+                  }
+                )
+              ] }),
+              customContextMenuItems && customContextMenuItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: "my-1 border-t dark:border-gray-700" }),
+                customContextMenuItems.map((item) => /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    disabled: item.disabled,
+                    className: `flex w-full items-center gap-2 px-3 py-1.5 text-left ${item.disabled ? "cursor-not-allowed opacity-50" : "cusror-pointer"} ${item.danger ? "text-red-500" : ""}`,
+                    onClick: () => {
+                      item.onClick(column.key);
+                      setContextMenu(null);
+                    },
+                    children: [
+                      item.icon && /* @__PURE__ */ jsx("span", { className: "flex h-3 w-3 items-center justify-center", children: item.icon }),
+                      item.label
+                    ]
+                  },
+                  item.key
+                ))
+              ] })
+            ]
+          }
+        ),
+        document.body
+      )
+    ] });
+  },
+  // ── Custom memo comparator ─────────────────────────────────────────────────
+  // Only re-render when props that actually affect this header's output change.
+  // This prevents a sort/filter change on one column from re-rendering all others.
+  (prevProps, nextProps) => {
+    return prevProps.column.width === nextProps.column.width && prevProps.column.key === nextProps.column.key && prevProps.column.pinned === nextProps.column.pinned && prevProps.column.sortable === nextProps.column.sortable && prevProps.column.filterable === nextProps.column.filterable && prevProps.column.sorter === nextProps.column.sorter && prevProps.column.filterFn === nextProps.column.filterFn && prevProps.visualIndex === nextProps.visualIndex && prevProps.stickyOffset === nextProps.stickyOffset && prevProps.isLastColumn === nextProps.isLastColumn && prevProps.sortDirection === nextProps.sortDirection && prevProps.filterValue === nextProps.filterValue;
+  }
+);
+DraggableHeader.displayName = "DraggableHeader";
+var DraggableHeader_default = DraggableHeader;
+
+// src/ResizeOverlay.tsx
+import { forwardRef, useImperativeHandle, useRef as useRef2 } from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ResizeOverlay = forwardRef(
+  ({ accentColor = "#1778ff" }, ref) => {
+    const lineRef = useRef2(null);
+    const labelRef = useRef2(null);
+    const stateRef = useRef2({
+      headerLeftLocal: 0,
+      minSize: 40,
+      areaLeft: 0,
+      areaWidth: 0,
+      labelWidth: 80,
+      scrollLeft: 0
+    });
+    useImperativeHandle(
+      ref,
+      () => ({
+        show(_viewportX, columnName, areaRect, headerLeftLocal, minSize, scrollTop, scrollLeft, initialLineX) {
+          const line = lineRef.current;
+          const label = labelRef.current;
+          if (!line || !label) return;
+          line.style.top = `${scrollTop}px`;
+          line.style.height = `${areaRect.height}px`;
+          line.style.left = `${initialLineX - 2.5}px`;
+          line.style.display = "block";
+          label.textContent = `${columnName}`;
+          label.style.top = `${scrollTop + 8}px`;
+          label.style.left = `${initialLineX + 6}px`;
+          label.style.display = "block";
+          const labelWidth = label.offsetWidth ?? 80;
+          stateRef.current = {
+            headerLeftLocal,
+            minSize,
+            areaLeft: areaRect.left,
+            areaWidth: areaRect.width,
+            labelWidth,
+            scrollLeft
+          };
+        },
+        move(viewportX) {
+          const line = lineRef.current;
+          const label = labelRef.current;
+          if (!line || !label) return;
+          const {
+            headerLeftLocal,
+            minSize,
+            areaLeft,
+            areaWidth,
+            labelWidth,
+            scrollLeft
+          } = stateRef.current;
+          const localX = viewportX - areaLeft + scrollLeft;
+          const clampedLocalX = Math.max(localX, headerLeftLocal + minSize);
+          line.style.left = `${clampedLocalX}px`;
+          const currentText = label.textContent || "";
+          const colonIndex = currentText.indexOf(":");
+          if (colonIndex !== -1) {
+            label.textContent = `${currentText.substring(0, colonIndex)}`;
+          }
+          const labelViewportX = clampedLocalX - scrollLeft;
+          const FLIP_MARGIN = 20;
+          if (labelViewportX + labelWidth + FLIP_MARGIN > areaWidth) {
+            label.style.left = `${clampedLocalX - labelWidth - 10}px`;
+          } else {
+            label.style.left = `${clampedLocalX + 6}px`;
+          }
+        },
+        hide() {
+          const line = lineRef.current;
+          const label = labelRef.current;
+          if (line) line.style.display = "none";
+          if (label) label.style.display = "none";
+        }
+      }),
+      []
+    );
+    const hexToRgba = (hex, opacity) => {
+      const r = parseInt(hex.slice(1, 3), 16);
+      const g = parseInt(hex.slice(3, 5), 16);
+      const b = parseInt(hex.slice(5, 7), 16);
+      return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+    };
+    return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          ref: lineRef,
+          "aria-hidden": "true",
+          style: {
+            display: "none",
+            position: "absolute",
+            top: 0,
+            height: "0px",
+            left: 0,
+            width: "2px",
+            zIndex: 30,
+            pointerEvents: "none",
+            backgroundColor: accentColor,
+            boxShadow: `0 0 4px ${hexToRgba(accentColor, 0.5)}`,
+            willChange: "left"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          ref: labelRef,
+          "aria-hidden": "true",
+          style: {
+            display: "none",
+            position: "absolute",
+            top: "8px",
+            left: 0,
+            zIndex: 31,
+            pointerEvents: "none",
+            backgroundColor: accentColor,
+            color: "white",
+            fontSize: "11px",
+            fontWeight: 600,
+            lineHeight: 1,
+            padding: "4px 8px",
+            borderRadius: "5px",
+            whiteSpace: "nowrap",
+            boxShadow: "0 2px 10px rgba(0,0,0,0.2)",
+            userSelect: "none",
+            willChange: "left"
+          }
+        }
+      )
+    ] });
+  }
+);
+ResizeOverlay.displayName = "ResizeOverlay";
+var ResizeOverlay_default = ResizeOverlay;
+
+// src/TableBody.tsx
+import React3, { useEffect as useEffect2, useMemo, useRef as useRef3 } from "react";
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SHIMMER_WIDTHS = [55, 70, 45, 80, 60, 50, 75, 65];
+var Cell = React3.memo(
+  ({
+    value,
+    record,
+    column,
+    rowIndex,
+    classNames,
+    styles,
+    isSelected,
+    rowSelection,
+    rowKey,
+    allData,
+    getRowKey,
+    accentColor,
+    isLoading
+  }) => {
+    const justifyClass = column.key === "__select__" || column.key === "__expand__" ? "justify-center" : "";
+    const isPinned = Boolean(column.pinned);
+    if (isLoading && column.key !== "__select__" && column.key !== "__expand__") {
+      const shimmerContent = column.shimmerRender ? column.shimmerRender() : /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "bg-muted-foreground/15 animate-pulse rounded",
+          style: {
+            // Vary widths across cells so skeletons look more natural
+            width: `${SHIMMER_WIDTHS[(rowIndex + column.key.length) % SHIMMER_WIDTHS.length]}%`,
+            height: 14
+          }
+        }
+      );
+      return /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: `flex items-center overflow-hidden border-b px-2 ${column.className ?? ""} ${classNames?.cell ?? ""} ${isPinned ? classNames?.pinnedCell ?? "" : ""}`,
+          style: {
+            height: "100%",
+            ...column.style,
+            ...isPinned ? styles?.pinnedCell : void 0
+          },
+          children: shimmerContent
+        }
+      );
+    }
+    if (column.key === "__select__" && rowSelection && rowKey !== void 0) {
+      const checkboxProps = rowSelection.getCheckboxProps?.(record) ?? {
+        disabled: false
+      };
+      const content2 = rowSelection.type === "radio" ? /* @__PURE__ */ jsx3(
+        "input",
+        {
+          type: "radio",
+          checked: !!isSelected,
+          disabled: checkboxProps.disabled,
+          onChange: (e) => {
+            e.stopPropagation();
+            rowSelection.onSelect?.(record, true, [record], e.nativeEvent);
+            rowSelection.onChange?.([rowKey], [record], { type: "single" });
+          },
+          className: "cursor-pointer",
+          style: { accentColor }
+        }
+      ) : /* @__PURE__ */ jsx3(
+        "input",
+        {
+          type: "checkbox",
+          checked: !!isSelected,
+          disabled: checkboxProps.disabled,
+          onChange: (e) => {
+            e.stopPropagation();
+            const currentKeys = (rowSelection.selectedRowKeys ?? []).map(
+              (k) => String(k)
+            );
+            const newSelected = isSelected ? currentKeys.filter((k) => k !== rowKey) : [...currentKeys, rowKey];
+            const newSelectedRows = (allData ?? []).filter(
+              (row, idx) => newSelected.includes(
+                getRowKey ? getRowKey(row, idx) : String(idx)
+              )
+            );
+            rowSelection.onSelect?.(
+              record,
+              !isSelected,
+              newSelectedRows,
+              e.nativeEvent
+            );
+            rowSelection.onChange?.(newSelected, newSelectedRows, {
+              type: "multiple"
+            });
+          },
+          className: "cursor-pointer",
+          style: { accentColor }
+        }
+      );
+      return /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: `flex items-center overflow-hidden border-b px-2 ${justifyClass} ${column.className ?? ""} ${classNames?.cell ?? ""} `,
+          style: {
+            height: "100%",
+            ...column.style,
+            ...isPinned ? styles?.pinnedCell : void 0
+          },
+          children: content2
+        }
+      );
+    }
+    const content = column.render ? column.render(value, record, rowIndex) : value ?? "";
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: `flex items-center truncate overflow-hidden border-b px-2 ${justifyClass} ${column.className ?? ""} ${classNames?.cell ?? ""} `,
+        style: {
+          height: "100%",
+          ...column.style,
+          ...isPinned ? styles?.pinnedCell : void 0
+        },
+        children: content
+      }
+    );
+  },
+  // ── Custom memo comparator ─────────────────────────────────────────────────
+  // Minimizes re-renders:
+  // - __select__ cells: re-render only when selection changes
+  // - __expand__ cells: re-render only when expand state changes
+  // - Normal cells: re-render only when value or rowIndex changes
+  (prev, next) => {
+    if (prev.isLoading !== next.isLoading) return false;
+    if (prev.column.key === "__select__") {
+      return prev.isSelected === next.isSelected && prev.normalizedSelectedKeys === next.normalizedSelectedKeys;
+    }
+    if (prev.column.key === "__expand__") {
+      return prev.isExpanded === next.isExpanded;
+    }
+    return prev.value === next.value && prev.rowIndex === next.rowIndex && prev.column.key === next.column.key;
+  }
+);
+Cell.displayName = "Cell";
+var MeasuredExpandedRow = React3.memo(
+  ({
+    rowKey,
+    onResize,
+    children
+  }) => {
+    const ref = useRef3(null);
+    const onResizeRef = useRef3(onResize);
+    useEffect2(() => {
+      onResizeRef.current = onResize;
+    }, [onResize]);
+    useEffect2(() => {
+      const el = ref.current;
+      if (!el) return;
+      const observer = new ResizeObserver((entries) => {
+        const height = entries[0]?.borderBoxSize?.[0]?.blockSize;
+        if (height != null && height > 0) {
+          onResizeRef.current(rowKey, height);
+        }
+      });
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, [rowKey]);
+    return /* @__PURE__ */ jsx3("div", { ref, children });
+  }
+);
+MeasuredExpandedRow.displayName = "MeasuredExpandedRow";
+var TableBody = ({
+  data,
+  orderedColumns,
+  rowVirtualizer,
+  columnOffsets,
+  styles,
+  classNames,
+  rowSelection,
+  normalizedSelectedKeys = [],
+  getRowKey,
+  expandable,
+  resolvedExpandedKeys,
+  rowHeight = 40,
+  scrollAreaWidth,
+  accentColor,
+  isLoading = false,
+  onExpandedRowResize,
+  maxExpandedRowHeight
+}) => {
+  const virtualItems = rowVirtualizer.getVirtualItems();
+  const totalSize = rowVirtualizer.getTotalSize();
+  const theme = typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light";
+  const columnStyles = useMemo(() => {
+    return orderedColumns.map((col, colIndex) => {
+      const stickyOffset = columnOffsets.get(col.key);
+      const isPinned = Boolean(col.pinned);
+      let zIndex = 0;
+      if (col.key === "__select__" || col.key === "__expand__") zIndex = 11;
+      else if (isPinned) zIndex = 2;
+      const style = {
+        gridColumn: colIndex + 1,
+        gridRow: 2,
+        height: `${totalSize}px`,
+        position: isPinned ? "sticky" : "relative",
+        zIndex
+      };
+      if (col.pinned === "left" && stickyOffset !== void 0)
+        style.left = `${stickyOffset}px`;
+      else if (col.pinned === "right" && stickyOffset !== void 0)
+        style.right = `${stickyOffset}px`;
+      if (isPinned) {
+        style.backdropFilter = "blur(14px)";
+        style.backgroundColor = styles?.pinnedBg ?? theme === "dark" ? "#10182890" : "#f9fafb90";
+        if (styles?.pinnedCell) Object.assign(style, styles.pinnedCell);
+      }
+      return { key: col.key, style, isPinned };
+    });
+  }, [orderedColumns, columnOffsets, totalSize, styles]);
+  return /* @__PURE__ */ jsxs3(Fragment3, { children: [
+    columnStyles.map((colStyle, colIndex) => {
+      const col = orderedColumns[colIndex];
+      return /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "truncate",
+          style: colStyle.style,
+          children: virtualItems.map((virtualRow) => {
+            const row = data[virtualRow.index];
+            const rowKey = getRowKey ? getRowKey(row, virtualRow.index) : String(virtualRow.index);
+            const isSelected = normalizedSelectedKeys.includes(rowKey);
+            const isExpanded = resolvedExpandedKeys?.has(rowKey) ?? false;
+            const cellValue = row[col.dataIndex];
+            const isRowShimmer = isLoading || rowKey.startsWith("__shimmer_");
+            return (
+              /*
+               * Row wrapper div:
+               * - data-row-key: used by BoltTable's DOM-based hover system
+               *   (mouseover reads this attribute to apply hover styles
+               *   across all column divs for the same row simultaneously)
+               * - data-selected: presence/absence attribute consumed by the
+               *   CSS injected by BoltTable for selected row background
+               * - Absolute positioned at virtualRow.start for virtualization
+               * - Height = virtualRow.size (includes expanded row height)
+               */
+              /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  "data-row-key": rowKey,
+                  "data-selected": isSelected || void 0,
+                  style: {
+                    position: "absolute",
+                    top: `${virtualRow.start}px`,
+                    left: 0,
+                    right: 0,
+                    height: `${virtualRow.size}px`
+                  },
+                  className: "truncate",
+                  children: /* @__PURE__ */ jsx3(
+                    "div",
+                    {
+                      style: { height: `${rowHeight}px`, position: "relative" },
+                      className: "truncate",
+                      children: /* @__PURE__ */ jsx3(
+                        Cell,
+                        {
+                          value: cellValue,
+                          record: row,
+                          column: col,
+                          rowIndex: virtualRow.index,
+                          classNames,
+                          styles,
+                          isSelected,
+                          isExpanded,
+                          rowSelection,
+                          normalizedSelectedKeys,
+                          rowKey,
+                          allData: data,
+                          getRowKey,
+                          accentColor,
+                          isLoading: isRowShimmer
+                        }
+                      )
+                    }
+                  )
+                },
+                `${rowKey}-${col.key}`
+              )
+            );
+          })
+        },
+        `spacer-${colStyle.key}`
+      );
+    }),
+    expandable && /* @__PURE__ */ jsx3(
+      "div",
+      {
+        style: {
+          gridColumn: "1 / -1",
+          gridRow: 2,
+          height: `${totalSize}px`,
+          position: "relative",
+          zIndex: 15,
+          // pointerEvents: none on the overlay so hover/click pass through
+          // to the cells below for rows that are NOT expanded
+          pointerEvents: "none"
+        },
+        children: virtualItems.map((virtualRow) => {
+          const row = data[virtualRow.index];
+          const rk = getRowKey ? getRowKey(row, virtualRow.index) : String(virtualRow.index);
+          if (!(resolvedExpandedKeys?.has(rk) ?? false)) return null;
+          const expandedContent = /* @__PURE__ */ jsx3(
+            "div",
+            {
+              className: `${classNames?.expandedRow ?? ""}`,
+              style: {
+                // Sticky left:0 + fixed width = viewport-locked panel
+                // regardless of how far the user has scrolled horizontally
+                position: "sticky",
+                left: 0,
+                zIndex: 5,
+                width: scrollAreaWidth && scrollAreaWidth > 0 ? `${scrollAreaWidth}px` : "100%",
+                overflow: "auto",
+                // Restore pointer events so the expanded content is interactive
+                pointerEvents: "auto",
+                borderBottom: "1px solid hsl(var(--border))",
+                backgroundColor: "hsl(var(--muted)/0.4)",
+                padding: 20,
+                // Optional max height — makes the panel scrollable for tall content
+                ...maxExpandedRowHeight ? { maxHeight: `${maxExpandedRowHeight}px` } : void 0,
+                ...styles?.expandedRow
+              },
+              children: expandable.expandedRowRender(row, virtualRow.index, 0, true)
+            }
+          );
+          return /* @__PURE__ */ jsx3(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                // Position immediately below the row's base height
+                top: virtualRow.start + rowHeight,
+                left: 0,
+                right: 0
+              },
+              children: onExpandedRowResize ? /* @__PURE__ */ jsx3(
+                MeasuredExpandedRow,
+                {
+                  rowKey: rk,
+                  onResize: onExpandedRowResize,
+                  children: expandedContent
+                }
+              ) : expandedContent
+            },
+            `expanded-${rk}`
+          );
+        })
+      }
+    )
+  ] });
+};
+TableBody.displayName = "TableBody";
+var TableBody_default = TableBody;
+
+// src/BoltTable.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var SHIMMER_WIDTHS2 = [55, 70, 45, 80, 60, 50, 75, 65, 40, 72];
+function BoltTable({
+  columns: initialColumns,
+  data,
+  rowHeight = 40,
+  expandedRowHeight = 200,
+  maxExpandedRowHeight,
+  accentColor = "#1890ff",
+  className = "",
+  classNames = {},
+  styles = {},
+  gripIcon,
+  hideGripIcon,
+  pagination,
+  onPaginationChange,
+  onColumnResize,
+  onColumnOrderChange,
+  onColumnPin,
+  onColumnHide,
+  rowSelection,
+  expandable,
+  rowKey = "id",
+  onEndReached,
+  onEndReachedThreshold = 5,
+  isLoading = false,
+  onSortChange,
+  onFilterChange,
+  columnContextMenuItems,
+  autoHeight = true,
+  layoutLoading,
+  emptyRenderer
+}) {
+  const [columns, setColumns] = useState2(initialColumns);
+  const [columnOrder, setColumnOrder] = useState2(
+    () => initialColumns.map((c) => c.key)
+  );
+  const [activeId, setActiveId] = useState2(null);
+  const columnsFingerprintRef = useRef4("");
+  const newFingerprint = initialColumns.map((c) => {
+    const w = typeof c.width === "number" ? Math.round(c.width) : c.width ?? "";
+    return `${c.key}:${!!c.hidden}:${c.pinned || ""}:${w}`;
+  }).join("|");
+  const initialColumnsRef = useRef4(initialColumns);
+  initialColumnsRef.current = initialColumns;
+  React4.useEffect(() => {
+    if (columnsFingerprintRef.current === newFingerprint) return;
+    columnsFingerprintRef.current = newFingerprint;
+    setColumns(initialColumnsRef.current);
+    setColumnOrder(initialColumnsRef.current.map((c) => c.key));
+  }, [newFingerprint]);
+  const safeWidth = (w, fallback = 150) => typeof w === "number" && Number.isFinite(w) ? w : fallback;
+  const [columnWidths, setColumnWidths] = useState2(
+    () => /* @__PURE__ */ new Map()
+  );
+  const manuallyResizedRef = useRef4(/* @__PURE__ */ new Set());
+  const columnsWithPersistedWidths = useMemo2(
+    () => columns.map((col) => ({
+      ...col,
+      width: safeWidth(columnWidths.get(col.key) ?? col.width)
+    })),
+    [columns, columnWidths]
+  );
+  const [internalExpandedKeys, setInternalExpandedKeys] = useState2(() => {
+    if (expandable?.defaultExpandAllRows) {
+      return new Set(
+        data.map((row, idx) => {
+          if (typeof rowKey === "function") return rowKey(row);
+          if (typeof rowKey === "string")
+            return row[rowKey] ?? idx;
+          return idx;
+        })
+      );
+    }
+    return new Set(expandable?.defaultExpandedRowKeys ?? []);
+  });
+  const expandedKeysFingerprint = expandable?.expandedRowKeys?.map(String).join("|");
+  const resolvedExpandedKeys = useMemo2(() => {
+    if (expandable?.expandedRowKeys !== void 0)
+      return new Set(expandable.expandedRowKeys);
+    return internalExpandedKeys;
+  }, [expandedKeysFingerprint, internalExpandedKeys]);
+  const expandableRef = useRef4(expandable);
+  expandableRef.current = expandable;
+  const toggleExpand = useCallback((key) => {
+    const exp = expandableRef.current;
+    if (exp?.expandedRowKeys !== void 0) {
+      const next = new Set(exp.expandedRowKeys);
+      next.has(key) ? next.delete(key) : next.add(key);
+      exp.onExpandedRowsChange?.(Array.from(next));
+    } else {
+      setInternalExpandedKeys((prev) => {
+        const next = new Set(prev);
+        next.has(key) ? next.delete(key) : next.add(key);
+        exp?.onExpandedRowsChange?.(Array.from(next));
+        return next;
+      });
+    }
+  }, []);
+  const getRowKey = useCallback(
+    (record, index) => {
+      if (typeof rowKey === "function") return String(rowKey(record));
+      if (typeof rowKey === "string") {
+        const val = record[rowKey];
+        return val !== void 0 && val !== null ? String(val) : String(index);
+      }
+      return String(index);
+    },
+    [rowKey]
+  );
+  const normalizedSelectedKeys = useMemo2(
+    () => (rowSelection?.selectedRowKeys ?? []).map((k) => String(k)),
+    [rowSelection?.selectedRowKeys]
+  );
+  const columnsWithExpand = useMemo2(() => {
+    if (!expandable?.rowExpandable) return columnsWithPersistedWidths;
+    const expandColumn = {
+      key: "__expand__",
+      dataIndex: "__expand__",
+      title: "",
+      width: 40,
+      pinned: "left",
+      hidden: false,
+      render: (_, record, index) => {
+        const key = getRowKey(record, index);
+        const canExpand = expandable.rowExpandable?.(record) ?? true;
+        const isExpanded = resolvedExpandedKeys.has(key);
+        if (!canExpand)
+          return /* @__PURE__ */ jsx4("span", { style: { display: "inline-block", width: 16 } });
+        if (typeof expandable.expandIcon === "function") {
+          return expandable.expandIcon({
+            expanded: isExpanded,
+            onExpand: (_2, e) => {
+              e.stopPropagation();
+              toggleExpand(key);
+            },
+            record
+          });
+        }
+        return /* @__PURE__ */ jsx4(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              toggleExpand(key);
+            },
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: "2px",
+              borderRadius: "3px",
+              color: accentColor
+            },
+            children: isExpanded ? /* @__PURE__ */ jsx4(ChevronDown, { style: { width: 14, height: 14 } }) : /* @__PURE__ */ jsx4(ChevronRight, { style: { width: 14, height: 14 } })
+          }
+        );
+      }
+    };
+    return [expandColumn, ...columnsWithPersistedWidths];
+  }, [
+    expandable,
+    columnsWithPersistedWidths,
+    getRowKey,
+    resolvedExpandedKeys,
+    toggleExpand,
+    accentColor
+  ]);
+  const columnsWithSelection = useMemo2(() => {
+    if (!rowSelection) return columnsWithExpand;
+    const selectionColumn = {
+      key: "__select__",
+      dataIndex: "__select__",
+      title: "",
+      width: 48,
+      pinned: "left",
+      hidden: false,
+      render: () => null
+    };
+    return [selectionColumn, ...columnsWithExpand];
+  }, [rowSelection, columnsWithExpand]);
+  const resizeOverlayRef = useRef4(null);
+  const tableAreaRef = useRef4(null);
+  const [scrollAreaWidth, setScrollAreaWidth] = useState2(0);
+  const prevScrollAreaWidthRef = useRef4(0);
+  const roRef = useRef4(null);
+  const rafRef = useRef4(null);
+  const tableAreaCallbackRef = useCallback((el) => {
+    roRef.current?.disconnect();
+    roRef.current = null;
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    tableAreaRef.current = el;
+    if (!el) return;
+    const measure = () => {
+      rafRef.current = null;
+      const w = el.clientWidth;
+      if (w !== prevScrollAreaWidthRef.current) {
+        prevScrollAreaWidthRef.current = w;
+        setScrollAreaWidth(w);
+      }
+    };
+    measure();
+    const ro = new ResizeObserver(() => {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(measure);
+    });
+    ro.observe(el);
+    roRef.current = ro;
+  }, []);
+  const hoveredRowRef = useRef4(null);
+  React4.useEffect(() => {
+    const el = tableAreaRef.current;
+    if (!el) return;
+    const setHover = (key) => {
+      if (hoveredRowRef.current === key) return;
+      if (hoveredRowRef.current) {
+        el.querySelectorAll(
+          `[data-row-key="${hoveredRowRef.current}"]`
+        ).forEach((n) => n.removeAttribute("data-hover"));
+      }
+      hoveredRowRef.current = key;
+      if (key) {
+        el.querySelectorAll(`[data-row-key="${key}"]`).forEach(
+          (n) => n.setAttribute("data-hover", "")
+        );
+      }
+    };
+    const onOver = (e) => {
+      const target = e.target.closest(
+        "[data-row-key]"
+      );
+      setHover(target?.dataset.rowKey ?? null);
+    };
+    const onLeave = () => setHover(null);
+    el.addEventListener("mouseover", onOver, { passive: true });
+    el.addEventListener("mouseleave", onLeave, { passive: true });
+    return () => {
+      el.removeEventListener("mouseover", onOver);
+      el.removeEventListener("mouseleave", onLeave);
+    };
+  }, []);
+  const resizeStateRef = useRef4(null);
+  const sensors = useSensors(useSensor(PointerSensor));
+  const handleDragStart = (event) => {
+    if (event.active.id === "__select__" || event.active.id === "__expand__")
+      return;
+    setActiveId(event.active.id);
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      setColumnOrder((items) => {
+        const oldIndex = items.indexOf(active.id);
+        const newIndex = items.indexOf(over.id);
+        const newOrder = arrayMove(items, oldIndex, newIndex);
+        setTimeout(() => onColumnOrderChange?.(newOrder), 0);
+        return newOrder;
+      });
+    }
+    setActiveId(null);
+  };
+  const handleResizeStart = (columnKey, e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (columnKey === "__select__" || columnKey === "__expand__") return;
+    const columnIndex = columnsWithSelection.findIndex(
+      (col) => col.key === columnKey
+    );
+    if (columnIndex === -1) return;
+    if (columnsWithSelection[columnIndex].pinned) return;
+    const column = columnsWithSelection[columnIndex];
+    const startWidth = column.width ?? 150;
+    resizeStateRef.current = {
+      columnKey,
+      startX: e.clientX,
+      startWidth,
+      columnIndex,
+      currentX: e.clientX
+    };
+    if (tableAreaRef.current) {
+      const headerElement = tableAreaRef.current.querySelector(
+        `[data-column-key="${columnKey}"]`
+      );
+      if (headerElement) {
+        const areaRect = tableAreaRef.current.getBoundingClientRect();
+        const headerRect = headerElement.getBoundingClientRect();
+        const scrollTop = tableAreaRef.current.scrollTop;
+        const scrollLeft = tableAreaRef.current.scrollLeft;
+        const headerLeftInContent = headerRect.left - areaRect.left + scrollLeft;
+        resizeOverlayRef.current?.show(
+          headerRect.right,
+          typeof column.title === "string" ? column.title : String(column.key),
+          areaRect,
+          headerLeftInContent,
+          40,
+          // minimum column width
+          scrollTop,
+          scrollLeft,
+          headerLeftInContent + startWidth
+        );
+      }
+    }
+    document.addEventListener("mousemove", handleResizeMove);
+    document.addEventListener("mouseup", handleResizeEnd);
+  };
+  const handleResizeMove = (e) => {
+    if (!resizeStateRef.current) return;
+    resizeStateRef.current.currentX = e.clientX;
+    resizeOverlayRef.current?.move(e.clientX);
+  };
+  const handleResizeEnd = React4.useCallback(() => {
+    if (!resizeStateRef.current) return;
+    const { startX, startWidth, currentX, columnKey } = resizeStateRef.current;
+    const finalWidth = Math.max(40, startWidth + (currentX - startX));
+    manuallyResizedRef.current.add(columnKey);
+    setColumnWidths((prev) => {
+      const next = new Map(prev);
+      next.set(columnKey, finalWidth);
+      return next;
+    });
+    onColumnResize?.(columnKey, finalWidth);
+    resizeOverlayRef.current?.hide();
+    resizeStateRef.current = null;
+    document.removeEventListener("mousemove", handleResizeMove);
+    document.removeEventListener("mouseup", handleResizeEnd);
+  }, [onColumnResize]);
+  const { leftPinned, unpinned, rightPinned } = useMemo2(() => {
+    const columnMap = new Map(columnsWithSelection.map((c) => [c.key, c]));
+    const systemKeys = [
+      ...rowSelection ? ["__select__"] : [],
+      ...expandable ? ["__expand__"] : []
+    ];
+    const visibleColumns = [...systemKeys, ...columnOrder].map((key) => columnMap.get(key)).filter((col) => col !== void 0 && !col.hidden);
+    const left = [], center = [], right = [];
+    visibleColumns.forEach((col) => {
+      if (col.pinned === "left") left.push(col);
+      else if (col.pinned === "right") right.push(col);
+      else center.push(col);
+    });
+    return { leftPinned: left, unpinned: center, rightPinned: right };
+  }, [columnOrder, columnsWithSelection, rowSelection, expandable]);
+  const orderedColumns = useMemo2(
+    () => [...leftPinned, ...unpinned, ...rightPinned],
+    [leftPinned, unpinned, rightPinned]
+  );
+  const totalTableWidth = useMemo2(
+    () => orderedColumns.slice(0, -1).reduce((sum, col) => sum + (col.width ?? 150), 0) + (orderedColumns.at(-1)?.width ?? 150),
+    [orderedColumns]
+  );
+  const gridTemplateColumns = useMemo2(() => {
+    if (orderedColumns.length === 0) return "";
+    return orderedColumns.map((col, i) => {
+      const w = col.width ?? 150;
+      return i === orderedColumns.length - 1 ? `minmax(${w}px, 1fr)` : `${w}px`;
+    }).join(" ");
+  }, [orderedColumns]);
+  const columnOffsets = useMemo2(() => {
+    const offsets = /* @__PURE__ */ new Map();
+    let lo = 0;
+    leftPinned.forEach((col) => {
+      offsets.set(col.key, lo);
+      lo += col.width ?? 150;
+    });
+    let ro = 0;
+    for (let i = rightPinned.length - 1; i >= 0; i--) {
+      const col = rightPinned[i];
+      offsets.set(col.key, ro);
+      ro += col.width ?? 150;
+    }
+    return offsets;
+  }, [leftPinned, rightPinned]);
+  const handleTogglePin = (columnKey, pinned) => {
+    setColumns(
+      (prev) => prev.map((col) => col.key === columnKey ? { ...col, pinned } : col)
+    );
+    onColumnPin?.(columnKey, pinned);
+  };
+  const handleToggleHide = (columnKey) => {
+    setColumns(
+      (prev) => prev.map((col) => {
+        if (col.key !== columnKey || col.pinned) return col;
+        return { ...col, hidden: !col.hidden };
+      })
+    );
+    const column = columns.find((col) => col.key === columnKey);
+    if (column && !column.pinned) onColumnHide?.(columnKey, !column.hidden);
+  };
+  const onSortChangeRef = useRef4(onSortChange);
+  onSortChangeRef.current = onSortChange;
+  const [sortState, setSortState] = useState2({ key: "", direction: null });
+  const handleSort = useCallback(
+    (columnKey, direction) => {
+      setSortState((prev) => {
+        let next;
+        if (direction !== void 0) {
+          next = prev.key === columnKey && prev.direction === direction ? null : direction;
+        } else {
+          next = prev.key !== columnKey ? "asc" : prev.direction === "asc" ? "desc" : prev.direction === "desc" ? null : "asc";
+        }
+        const state = { key: next ? columnKey : "", direction: next };
+        onSortChangeRef.current?.(columnKey, next);
+        return state;
+      });
+    },
+    []
+  );
+  const [columnFilters, setColumnFilters] = useState2(
+    {}
+  );
+  const handleColumnFilter = useCallback(
+    (columnKey, value) => {
+      setColumnFilters((prev) => {
+        const next = { ...prev };
+        if (value) next[columnKey] = value;
+        else delete next[columnKey];
+        onFilterChange?.(next);
+        return next;
+      });
+    },
+    [onFilterChange]
+  );
+  const handleClearFilter = useCallback(
+    (columnKey) => {
+      handleColumnFilter(columnKey, "");
+    },
+    [handleColumnFilter]
+  );
+  const onFilterChangeRef = useRef4(onFilterChange);
+  onFilterChangeRef.current = onFilterChange;
+  const columnsLookupRef = useRef4(initialColumns);
+  columnsLookupRef.current = initialColumns;
+  const processedData = useMemo2(() => {
+    let result = data;
+    if (!onFilterChangeRef.current) {
+      const filterKeys = Object.keys(columnFilters);
+      if (filterKeys.length > 0) {
+        result = result.filter(
+          (row) => filterKeys.every((key) => {
+            const col = columnsLookupRef.current.find((c) => c.key === key);
+            if (typeof col?.filterFn === "function") {
+              return col.filterFn(columnFilters[key], row, col.dataIndex);
+            }
+            const cellVal = String(row[key] ?? "").toLowerCase();
+            return cellVal.includes(columnFilters[key].toLowerCase());
+          })
+        );
+      }
+    }
+    if (!onSortChangeRef.current && sortState.key && sortState.direction) {
+      const dir = sortState.direction === "asc" ? 1 : -1;
+      const key = sortState.key;
+      const col = columnsLookupRef.current.find((c) => c.key === key);
+      if (typeof col?.sorter === "function") {
+        const sorterFn = col.sorter;
+        result = [...result].sort((a, b) => sorterFn(a, b) * dir);
+      } else {
+        result = [...result].sort((a, b) => {
+          const aVal = a[key];
+          const bVal = b[key];
+          if (aVal == null && bVal == null) return 0;
+          if (aVal == null) return 1;
+          if (bVal == null) return -1;
+          if (typeof aVal === "number" && typeof bVal === "number")
+            return (aVal - bVal) * dir;
+          return String(aVal).localeCompare(String(bVal)) * dir;
+        });
+      }
+    }
+    return result;
+  }, [data, sortState, columnFilters]);
+  const columnFiltersKey = Object.keys(columnFilters).sort().map((k) => `${k}:${columnFilters[k]}`).join("|");
+  React4.useEffect(() => {
+    tableAreaRef.current?.scrollTo({ top: 0 });
+  }, [columnFiltersKey]);
+  const pgEnabled = pagination !== false && !!pagination;
+  const pgSize = pgEnabled ? pagination.pageSize ?? 10 : 10;
+  const pgCurrent = pgEnabled ? Number(pagination.current ?? 1) : 1;
+  const needsClientPagination = pgEnabled && processedData.length > pgSize;
+  const paginatedData = useMemo2(() => {
+    if (!needsClientPagination) return processedData;
+    const start = (pgCurrent - 1) * pgSize;
+    return processedData.slice(start, start + pgSize);
+  }, [processedData, needsClientPagination, pgCurrent, pgSize]);
+  const shimmerCount = pgEnabled ? pgSize : 15;
+  const showShimmer = isLoading && processedData.length === 0;
+  const shimmerData = useMemo2(() => {
+    if (!showShimmer) return null;
+    return Array.from(
+      { length: shimmerCount },
+      (_, i) => ({
+        [typeof rowKey === "string" ? rowKey : "id"]: `__shimmer_${i}__`
+      })
+    );
+  }, [showShimmer, shimmerCount, rowKey]);
+  const INFINITE_SHIMMER_COUNT = 5;
+  const infiniteLoadingShimmer = useMemo2(() => {
+    if (!isLoading || paginatedData.length === 0 || showShimmer) return null;
+    if (pgEnabled) return null;
+    return Array.from(
+      { length: INFINITE_SHIMMER_COUNT },
+      (_, i) => ({
+        [typeof rowKey === "string" ? rowKey : "id"]: `__shimmer_${i}__`
+      })
+    );
+  }, [isLoading, paginatedData.length, showShimmer, pgEnabled, rowKey]);
+  const displayData = useMemo2(() => {
+    if (shimmerData) return shimmerData;
+    if (infiniteLoadingShimmer)
+      return [...paginatedData, ...infiniteLoadingShimmer];
+    return paginatedData;
+  }, [shimmerData, infiniteLoadingShimmer, paginatedData]);
+  const measuredExpandedHeights = useRef4(/* @__PURE__ */ new Map());
+  const expandedRowMeasureRafRef = useRef4(null);
+  const handleExpandedRowResize = useCallback(
+    (rk, contentHeight) => {
+      const prev = measuredExpandedHeights.current.get(rk);
+      const rounded = Math.round(contentHeight);
+      if (prev === rounded) return;
+      measuredExpandedHeights.current.set(rk, rounded);
+      if (expandedRowMeasureRafRef.current !== null) {
+        cancelAnimationFrame(expandedRowMeasureRafRef.current);
+      }
+      expandedRowMeasureRafRef.current = requestAnimationFrame(() => {
+        expandedRowMeasureRafRef.current = null;
+        rowVirtualizerRef.current?.measure();
+      });
+    },
+    []
+  );
+  const rowVirtualizer = useVirtualizer({
+    count: displayData.length,
+    getScrollElement: () => tableAreaRef.current,
+    estimateSize: (index) => {
+      if (shimmerData) return rowHeight;
+      const key = getRowKey(displayData[index], index);
+      if (!resolvedExpandedKeys.has(key)) return rowHeight;
+      const cached = measuredExpandedHeights.current.get(key);
+      return cached ? rowHeight + cached : rowHeight + expandedRowHeight;
+    },
+    overscan: 5,
+    // Render 5 extra rows above and below the visible window
+    getItemKey: (index) => shimmerData ? `__shimmer_${index}__` : getRowKey(displayData[index], index)
+  });
+  const rowVirtualizerRef = useRef4(rowVirtualizer);
+  rowVirtualizerRef.current = rowVirtualizer;
+  const resolvedExpandedKeysFingerprint = Array.from(resolvedExpandedKeys).sort().join(",");
+  React4.useLayoutEffect(() => {
+    rowVirtualizer.measure();
+  }, [resolvedExpandedKeysFingerprint]);
+  const endReachedFiredRef = useRef4(false);
+  const onEndReachedRef = useRef4(onEndReached);
+  onEndReachedRef.current = onEndReached;
+  const isLoadingRef = useRef4(isLoading);
+  isLoadingRef.current = isLoading;
+  React4.useEffect(() => {
+    const timer = setTimeout(() => {
+      endReachedFiredRef.current = false;
+    }, 200);
+    return () => clearTimeout(timer);
+  }, [data.length, isLoading]);
+  React4.useEffect(() => {
+    const el = tableAreaRef.current;
+    if (!el) return;
+    const checkEndReached = () => {
+      if (!onEndReachedRef.current || displayData.length === 0 || endReachedFiredRef.current || isLoadingRef.current)
+        return;
+      const virtualItems = rowVirtualizer.getVirtualItems();
+      if (virtualItems.length === 0) return;
+      const lastVisibleIndex = virtualItems[virtualItems.length - 1].index;
+      const distanceFromEnd = displayData.length - 1 - lastVisibleIndex;
+      if (distanceFromEnd <= onEndReachedThreshold) {
+        endReachedFiredRef.current = true;
+        onEndReachedRef.current();
+      }
+    };
+    el.addEventListener("scroll", checkEndReached, { passive: true });
+    return () => el.removeEventListener("scroll", checkEndReached);
+  }, [displayData.length, onEndReachedThreshold]);
+  const activeColumn = activeId ? orderedColumns.find((col) => col.key === activeId) : null;
+  const currentPage = pgCurrent;
+  const pageSize = pgSize;
+  const rawTotal = pgEnabled ? pagination.total ?? (needsClientPagination ? processedData.length : data.length) : data.length;
+  const lastKnownTotalRef = useRef4(0);
+  if (!isLoading || rawTotal > 0) {
+    lastKnownTotalRef.current = rawTotal;
+  }
+  const total = isLoading && lastKnownTotalRef.current > 0 ? lastKnownTotalRef.current : rawTotal;
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const handlePageChange = (p) => {
+    if (p >= 1 && p <= totalPages) onPaginationChange?.(p, pageSize);
+  };
+  const handlePageSizeChange = (s) => onPaginationChange?.(1, s);
+  React4.useEffect(() => {
+    if (needsClientPagination) {
+      tableAreaRef.current?.scrollTo({ top: 0 });
+    }
+  }, [pgCurrent, needsClientPagination]);
+  const getPageNumbers = () => {
+    if (totalPages <= 7)
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    const leftSibling = Math.max(currentPage - 1, 2);
+    const showLeftEllipsis = leftSibling > 2;
+    const rightSibling = Math.min(currentPage + 1, totalPages - 1);
+    const showRightEllipsis = currentPage < totalPages - 3;
+    if (!showLeftEllipsis && showRightEllipsis)
+      return [1, 2, 3, 4, 5, "ellipsis-right", totalPages];
+    if (showLeftEllipsis && !showRightEllipsis)
+      return [
+        1,
+        "ellipsis-left",
+        ...Array.from({ length: 5 }, (_, i) => totalPages - 4 + i)
+      ];
+    return [
+      1,
+      "ellipsis-left",
+      leftSibling,
+      currentPage,
+      rightSibling,
+      "ellipsis-right",
+      totalPages
+    ];
+  };
+  const HEADER_HEIGHT = 36;
+  const MAX_AUTO_ROWS = 10;
+  const naturalContentHeight = rowVirtualizer.getTotalSize() + HEADER_HEIGHT;
+  const maxAutoHeight = MAX_AUTO_ROWS * rowHeight + HEADER_HEIGHT;
+  const isEmpty = displayData.length === 0 && !showShimmer;
+  const emptyMinHeight = 4 * rowHeight + HEADER_HEIGHT;
+  const clampedAutoHeight = isEmpty ? emptyMinHeight : Math.min(naturalContentHeight, maxAutoHeight);
+  return /* @__PURE__ */ jsxs4(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: closestCenter,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      children: [
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: `flex ${autoHeight ? "max-h-full" : "h-full"} w-full flex-col ${className}`,
+            children: [
+              /* @__PURE__ */ jsx4("style", { children: `
+          [data-row-key][data-hover] > div {
+            background-color: ${styles.rowHover?.backgroundColor ?? `hsl(var(--muted) / 0.5)`};
+          }
+          [data-row-key][data-selected] > div {
+            background-color: ${styles.rowSelected?.backgroundColor ?? `${accentColor}15`};
+          }
+          [data-row-key][data-selected][data-hover] > div {
+            background-color: ${styles.rowSelected?.backgroundColor ?? `${accentColor}25`};
+          }
+        ` }),
+              /* @__PURE__ */ jsx4(
+                "div",
+                {
+                  className: `relative ${autoHeight ? "" : "flex-1"}`,
+                  style: autoHeight ? {
+                    height: `${clampedAutoHeight}px`,
+                    maxHeight: `${clampedAutoHeight}px`,
+                    flexShrink: 1,
+                    flexGrow: 0
+                  } : void 0,
+                  children: layoutLoading ? (
+                    /*
+                     * ── Layout loading skeleton ──────────────────────────────────
+                     * Shown when layoutLoading=true. Renders real column headers
+                     * (based on orderedColumns) alongside shimmer body rows.
+                     * Used for initial page load when column widths are not yet known.
+                     */
+                    /* @__PURE__ */ jsx4(
+                      "div",
+                      {
+                        className: "absolute inset-0 overflow-auto",
+                        style: { contain: "layout paint" },
+                        children: /* @__PURE__ */ jsxs4(
+                          "div",
+                          {
+                            style: {
+                              display: "grid",
+                              gridTemplateColumns,
+                              gridTemplateRows: "36px auto",
+                              minWidth: `${totalTableWidth}px`,
+                              width: "100%",
+                              position: "relative"
+                            },
+                            children: [
+                              orderedColumns.map((column) => {
+                                const isPinned = !!column.pinned;
+                                const offset = columnOffsets.get(column.key);
+                                const isSystem = column.key === "__select__" || column.key === "__expand__";
+                                return /* @__PURE__ */ jsx4(
+                                  "div",
+                                  {
+                                    className: `flex h-9 items-center truncate border-t border-b ${isPinned ? `bg-background backdrop-blur ${classNames.pinnedHeader ?? ""}` : `bg-muted/40 backdrop-blur ${classNames.header ?? ""}`}`,
+                                    style: {
+                                      position: "sticky",
+                                      top: 0,
+                                      zIndex: isPinned ? 13 : 10,
+                                      ...isPinned ? {
+                                        [column.pinned]: offset ?? 0,
+                                        ...styles.pinnedHeader
+                                      } : styles.header,
+                                      paddingLeft: isSystem ? 0 : 8,
+                                      paddingRight: isSystem ? 0 : 8
+                                    }
+                                  },
+                                  column.key
+                                );
+                              }),
+                              /* @__PURE__ */ jsx4("div", { style: { gridColumn: "1 / -1" }, children: Array.from({ length: shimmerCount }).map((_, rowIndex) => /* @__PURE__ */ jsx4(
+                                "div",
+                                {
+                                  style: {
+                                    display: "grid",
+                                    gridTemplateColumns,
+                                    height: rowHeight
+                                  },
+                                  children: orderedColumns.map((column, colIndex) => {
+                                    const isPinned = !!column.pinned;
+                                    const offset = columnOffsets.get(column.key);
+                                    const isSystem = column.key === "__select__" || column.key === "__expand__";
+                                    const widthPercent = SHIMMER_WIDTHS2[(rowIndex * 7 + colIndex) % SHIMMER_WIDTHS2.length];
+                                    return /* @__PURE__ */ jsx4(
+                                      "div",
+                                      {
+                                        className: `flex items-center border-b ${isPinned ? `bg-background ${classNames.pinnedCell ?? ""}` : ""}`,
+                                        style: {
+                                          ...isPinned ? {
+                                            position: "sticky",
+                                            [column.pinned]: offset ?? 0,
+                                            zIndex: 5,
+                                            ...styles.pinnedCell
+                                          } : {},
+                                          paddingLeft: isSystem ? 0 : 8,
+                                          paddingRight: isSystem ? 0 : 8,
+                                          justifyContent: isSystem ? "center" : void 0
+                                        },
+                                        children: /* @__PURE__ */ jsx4(
+                                          "div",
+                                          {
+                                            className: "bg-muted-foreground/15 animate-pulse rounded",
+                                            style: {
+                                              height: isSystem ? 16 : 14,
+                                              width: isSystem ? 16 : `${widthPercent}%`,
+                                              borderRadius: isSystem ? 3 : 4,
+                                              animationDelay: `${(rowIndex * 7 + colIndex) * 50}ms`
+                                            }
+                                          }
+                                        )
+                                      },
+                                      column.key
+                                    );
+                                  })
+                                },
+                                rowIndex
+                              )) })
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  ) : (
+                    /*
+                     * ── Main scroll container ────────────────────────────────────
+                     * absolute inset-0 so it fills whatever height the wrapper resolves to.
+                     * contain: layout paint — browser optimization hint that this element
+                     * is a layout and paint boundary (improves compositing performance).
+                     */
+                    /* @__PURE__ */ jsxs4(
+                      "div",
+                      {
+                        ref: tableAreaCallbackRef,
+                        className: "absolute inset-0 overflow-auto",
+                        style: { contain: "layout paint" },
+                        children: [
+                          /* @__PURE__ */ jsx4(ResizeOverlay_default, { ref: resizeOverlayRef, accentColor }),
+                          /* @__PURE__ */ jsxs4(
+                            "div",
+                            {
+                              style: {
+                                display: "grid",
+                                gridTemplateColumns,
+                                gridTemplateRows: "36px 1fr",
+                                minWidth: `${totalTableWidth}px`,
+                                height: "100%",
+                                width: "100%",
+                                position: "relative"
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx4(
+                                  SortableContext,
+                                  {
+                                    items: columnOrder,
+                                    strategy: horizontalListSortingStrategy,
+                                    children: orderedColumns.map((column, visualIndex) => {
+                                      if (column.key === "__select__" && rowSelection) {
+                                        return /* @__PURE__ */ jsx4(
+                                          "div",
+                                          {
+                                            className: `bg-muted/40 sticky flex h-9 items-center justify-center truncate border-t border-b backdrop-blur ${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""} `,
+                                            style: {
+                                              position: "sticky",
+                                              left: columnOffsets.get("__select__") ?? 0,
+                                              top: 0,
+                                              zIndex: 13,
+                                              width: "48px",
+                                              ...styles.header,
+                                              ...styles.pinnedHeader
+                                            },
+                                            children: rowSelection.type !== "radio" && !rowSelection.hideSelectAll && /* @__PURE__ */ jsx4(
+                                              "input",
+                                              {
+                                                type: "checkbox",
+                                                checked: data.length > 0 && normalizedSelectedKeys.length === data.length,
+                                                ref: (input) => {
+                                                  if (input) {
+                                                    input.indeterminate = normalizedSelectedKeys.length > 0 && normalizedSelectedKeys.length < data.length;
+                                                  }
+                                                },
+                                                onChange: (e) => {
+                                                  if (e.target.checked) {
+                                                    const allKeys = data.map(
+                                                      (row, idx) => getRowKey(row, idx)
+                                                    );
+                                                    rowSelection.onSelectAll?.(
+                                                      true,
+                                                      data,
+                                                      data
+                                                    );
+                                                    rowSelection.onChange?.(allKeys, data, {
+                                                      type: "all"
+                                                    });
+                                                  } else {
+                                                    rowSelection.onSelectAll?.(false, [], data);
+                                                    rowSelection.onChange?.([], [], {
+                                                      type: "all"
+                                                    });
+                                                  }
+                                                },
+                                                className: "cursor-pointer",
+                                                style: { accentColor }
+                                              }
+                                            )
+                                          },
+                                          "__select__"
+                                        );
+                                      }
+                                      if (column.key === "__expand__") {
+                                        return /* @__PURE__ */ jsx4(
+                                          "div",
+                                          {
+                                            className: `bg-muted/40 sticky flex h-9 items-center justify-center truncate border-t border-b backdrop-blur ${classNames.header ?? ""} ${classNames.pinnedHeader ?? ""}`,
+                                            style: {
+                                              position: "sticky",
+                                              left: columnOffsets.get("__expand__") ?? 0,
+                                              top: 0,
+                                              zIndex: 13,
+                                              width: "40px",
+                                              ...styles.header,
+                                              ...styles.pinnedHeader
+                                            }
+                                          },
+                                          "__expand__"
+                                        );
+                                      }
+                                      return /* @__PURE__ */ jsx4(
+                                        DraggableHeader_default,
+                                        {
+                                          column,
+                                          accentColor,
+                                          visualIndex,
+                                          onResizeStart: handleResizeStart,
+                                          styles,
+                                          classNames,
+                                          gripIcon,
+                                          hideGripIcon,
+                                          stickyOffset: columnOffsets.get(column.key),
+                                          onTogglePin: handleTogglePin,
+                                          onToggleHide: handleToggleHide,
+                                          isLastColumn: visualIndex === orderedColumns.length - 1,
+                                          sortDirection: sortState.key === column.key ? sortState.direction : null,
+                                          onSort: handleSort,
+                                          filterValue: columnFilters[column.key] ?? "",
+                                          onFilter: handleColumnFilter,
+                                          onClearFilter: handleClearFilter,
+                                          customContextMenuItems: columnContextMenuItems
+                                        },
+                                        column.key
+                                      );
+                                    })
+                                  }
+                                ),
+                                isEmpty ? (
+                                  /*
+                                   * ── Empty state ────────────────────────────────────────
+                                   * col-span-full + height:100% fills the 1fr body grid row.
+                                   *
+                                   * The inner div uses `position: sticky; left: 0` with a fixed
+                                   * width (scrollAreaWidth) to viewport-lock the empty state panel.
+                                   * Without this, the empty message would scroll horizontally
+                                   * with the grid content when there are many columns.
+                                   */
+                                  /* @__PURE__ */ jsx4(
+                                    "div",
+                                    {
+                                      className: "col-span-full",
+                                      style: { height: "100%", position: "relative" },
+                                      children: /* @__PURE__ */ jsx4(
+                                        "div",
+                                        {
+                                          style: {
+                                            position: "sticky",
+                                            left: 0,
+                                            width: scrollAreaWidth > 0 ? `${scrollAreaWidth}px` : "100%",
+                                            height: "100%",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center"
+                                          },
+                                          children: emptyRenderer ?? /* @__PURE__ */ jsx4("div", { className: "text-muted-foreground flex flex-col items-center gap-2 py-8", children: /* @__PURE__ */ jsx4("span", { className: "text-sm", children: "No data" }) })
+                                        }
+                                      )
+                                    }
+                                  )
+                                ) : (
+                                  /* ── Virtualized table body ─────────────────────────── */
+                                  /* @__PURE__ */ jsx4(
+                                    TableBody_default,
+                                    {
+                                      data: displayData,
+                                      orderedColumns,
+                                      rowVirtualizer,
+                                      columnOffsets,
+                                      styles,
+                                      classNames,
+                                      rowSelection: !showShimmer ? rowSelection : void 0,
+                                      normalizedSelectedKeys,
+                                      getRowKey,
+                                      expandable: !showShimmer ? expandable : void 0,
+                                      resolvedExpandedKeys,
+                                      rowHeight,
+                                      totalTableWidth,
+                                      scrollAreaWidth,
+                                      accentColor,
+                                      scrollContainerRef: tableAreaRef,
+                                      isLoading: showShimmer,
+                                      onExpandedRowResize: handleExpandedRowResize,
+                                      maxExpandedRowHeight
+                                    }
+                                  )
+                                )
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  )
+                }
+              ),
+              pagination !== false && /* @__PURE__ */ jsxs4(
+                "div",
+                {
+                  className: "flex h-9 items-center justify-between border-t px-3 text-xs backdrop-blur",
+                  style: {
+                    backgroundColor: "hsl(var(--background)/0.4)",
+                    gap: "12px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx4("div", { className: "flex flex-1 items-center", children: (() => {
+                      const rangeStart = total > 0 ? (currentPage - 1) * pageSize + 1 : 0;
+                      const rangeEnd = Math.min(currentPage * pageSize, total);
+                      return pagination?.showTotal ? /* @__PURE__ */ jsxs4("span", { className: "text-muted-foreground text-xs", children: [
+                        "Showing",
+                        " ",
+                        pagination.showTotal(total, [rangeStart, rangeEnd]),
+                        " of",
+                        " ",
+                        total,
+                        " items"
+                      ] }) : /* @__PURE__ */ jsxs4("span", { className: "text-muted-foreground text-xs", children: [
+                        rangeStart,
+                        "\u2013",
+                        rangeEnd,
+                        " of ",
+                        total
+                      ] });
+                    })() }),
+                    /* @__PURE__ */ jsxs4("div", { className: "flex flex-1 items-center justify-center gap-1", children: [
+                      /* @__PURE__ */ jsx4(
+                        "button",
+                        {
+                          onClick: () => handlePageChange(1),
+                          disabled: currentPage === 1,
+                          className: "inline-flex h-6 w-6 cursor-pointer items-center justify-center text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-30",
+                          title: "First page",
+                          children: /* @__PURE__ */ jsx4(ChevronsLeft, { className: "h-3 w-3" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx4(
+                        "button",
+                        {
+                          onClick: () => handlePageChange(currentPage - 1),
+                          disabled: currentPage === 1,
+                          className: "inline-flex h-6 w-6 cursor-pointer items-center justify-center text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-30",
+                          title: "Previous page",
+                          children: /* @__PURE__ */ jsx4(ChevronLeft, { className: "h-3 w-3" })
+                        }
+                      ),
+                      getPageNumbers().map((page) => {
+                        if (page === "ellipsis-left" || page === "ellipsis-right") {
+                          return /* @__PURE__ */ jsx4(
+                            "span",
+                            {
+                              className: "text-muted-foreground px-1 text-xs select-none",
+                              children: "..."
+                            },
+                            page
+                          );
+                        }
+                        return /* @__PURE__ */ jsx4(
+                          "button",
+                          {
+                            style: {
+                              color: page === currentPage ? accentColor : void 0
+                            },
+                            onClick: () => handlePageChange(page),
+                            className: "inline-flex h-6 min-w-6 cursor-pointer items-center justify-center rounded px-1.5 text-xs transition-colors",
+                            children: page
+                          },
+                          page
+                        );
+                      }),
+                      /* @__PURE__ */ jsx4(
+                        "button",
+                        {
+                          onClick: () => handlePageChange(currentPage + 1),
+                          disabled: currentPage === totalPages,
+                          className: "inline-flex h-6 w-6 cursor-pointer items-center justify-center text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-30",
+                          title: "Next page",
+                          children: /* @__PURE__ */ jsx4(ChevronRight, { className: "h-3 w-3" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx4(
+                        "button",
+                        {
+                          onClick: () => handlePageChange(totalPages),
+                          disabled: currentPage === totalPages,
+                          className: "inline-flex h-6 w-6 cursor-pointer items-center justify-center text-xs transition-colors disabled:cursor-not-allowed disabled:opacity-30",
+                          title: "Last page",
+                          children: /* @__PURE__ */ jsx4(ChevronsRight, { className: "h-3 w-3" })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx4("div", { className: "flex flex-1 items-center justify-end gap-2", children: /* @__PURE__ */ jsx4(
+                      "select",
+                      {
+                        value: pageSize,
+                        onChange: (e) => handlePageSizeChange(Number(e.target.value)),
+                        className: "bg-background text-foreground hover:border-primary cursor-pointer rounded border px-1.5 py-0.5 text-xs",
+                        style: { height: "24px" },
+                        children: [10, 15, 20, 25, 50, 100].map((size) => /* @__PURE__ */ jsxs4("option", { value: size, children: [
+                          size,
+                          " / page"
+                        ] }, size))
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4(DragOverlay, { children: activeColumn ? /* @__PURE__ */ jsx4(
+          "div",
+          {
+            className: `flex h-9 items-center truncate overflow-hidden border border-dashed shadow-md backdrop-blur ${classNames.header ?? ""} ${classNames.dragHeader ?? ""}`,
+            style: {
+              width: `${activeColumn.width ?? 150}px`,
+              cursor: "grabbing",
+              ...styles.header,
+              ...styles.dragHeader
+            },
+            children: /* @__PURE__ */ jsxs4("div", { className: "relative z-10 flex h-full flex-1 items-center gap-1 truncate overflow-hidden px-2 font-medium", children: [
+              /* @__PURE__ */ jsx4(GripVertical2, { className: "h-3 w-3 shrink-0" }),
+              /* @__PURE__ */ jsx4("div", { className: "min-w-0 truncate overflow-hidden text-left text-ellipsis whitespace-nowrap select-none", children: typeof activeColumn.title === "string" ? activeColumn.title : activeColumn.key })
+            ] })
+          }
+        ) : null })
+      ]
+    }
+  );
+}
+export {
+  BoltTable,
+  DraggableHeader_default as DraggableHeader,
+  ResizeOverlay_default as ResizeOverlay,
+  TableBody_default as TableBody
+};
+//# sourceMappingURL=index.mjs.map