@dynostack/react-grid 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useState, useRef, useEffect, useMemo, useContext } from 'react';
+import { createContext, useState, useRef, useEffect, useMemo, useLayoutEffect, useId, useContext } from 'react';
 import { useReactTable, getPaginationRowModel, getExpandedRowModel, getSortedRowModel, getFilteredRowModel, getCoreRowModel, flexRender } from '@tanstack/react-table';
 import { Trash2Icon, XIcon, SearchIcon, RefreshCwIcon, ColumnsIcon, DownloadIcon, FileTextIcon, FileSpreadsheetIcon, PlusIcon, ChevronsLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsRightIcon, ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon, PinOffIcon, PinIcon, EyeOffIcon, FilterIcon, CheckIcon, MoreHorizontalIcon, ChevronDownIcon, GripVerticalIcon, Loader2Icon, MinusIcon, CopyIcon, PencilIcon, EyeIcon, ChevronUpIcon } from 'lucide-react';
 import { clsx } from 'clsx';
@@ -6,6 +6,7 @@ import { twMerge } from 'tailwind-merge';
 import { Slot, Separator as Separator$1, Popover as Popover$1, Checkbox as Checkbox$1, DropdownMenu as DropdownMenu$1, Select as Select$1 } from 'radix-ui';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
+import { createPortal } from 'react-dom';
 
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -1715,14 +1716,34 @@ function DataTableRowActions({
   onCancelEdit
 }) {
   const [open, setOpen] = useState(false);
+  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef(null);
   const menuRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!open || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    setMenuPosition({
+      top: rect.bottom + 4,
+      left: Math.max(8, rect.right - 160)
+    });
+  }, [open]);
   useEffect(() => {
     if (!open) return;
     const onPointerDown = (event) => {
-      if (!menuRef.current?.contains(event.target)) setOpen(false);
+      const target = event.target;
+      if (!menuRef.current?.contains(target) && !triggerRef.current?.contains(target)) {
+        setOpen(false);
+      }
     };
+    const onDismiss = () => setOpen(false);
     document.addEventListener("pointerdown", onPointerDown);
-    return () => document.removeEventListener("pointerdown", onPointerDown);
+    window.addEventListener("scroll", onDismiss, true);
+    window.addEventListener("resize", onDismiss);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("scroll", onDismiss, true);
+      window.removeEventListener("resize", onDismiss);
+    };
   }, [open]);
   if (isEditing) {
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1", children: [
@@ -1753,6 +1774,7 @@ function DataTableRowActions({
     /* @__PURE__ */ jsx(
       Button,
       {
+        ref: triggerRef,
         variant: "ghost",
         size: "icon-xs",
         "aria-label": "Open row actions",
@@ -1761,41 +1783,52 @@ function DataTableRowActions({
         children: /* @__PURE__ */ jsx(MoreHorizontalIcon, {})
       }
     ),
-    open && /* @__PURE__ */ jsxs("div", { className: "absolute top-7 right-0 z-50 w-40 rounded-md border bg-popover p-1 text-popover-foreground shadow-md", children: [
-      actions.map((a) => /* @__PURE__ */ jsxs(
-        RowActionButton,
-        {
-          danger: a === "delete",
-          onClick: () => {
-            setOpen(false);
-            onAction?.(a, row);
-          },
-          children: [
-            builtinIcons[a],
-            " ",
-            builtinLabels[a]
-          ]
-        },
-        a
-      )),
-      customActions.length > 0 && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "-mx-1 my-1 h-px bg-border" }),
-      customActions.filter((c) => c.show ? c.show(row) : true).map((c) => /* @__PURE__ */ jsxs(
-        RowActionButton,
+    open && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
         {
-          danger: c.danger,
-          onClick: () => {
-            setOpen(false);
-            onAction?.(c.id, row);
-          },
+          ref: menuRef,
+          className: "fixed z-[1000] w-40 rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
+          style: { top: menuPosition.top, left: menuPosition.left },
           children: [
-            c.icon,
-            " ",
-            c.label
+            actions.map((a) => /* @__PURE__ */ jsxs(
+              RowActionButton,
+              {
+                danger: a === "delete",
+                onClick: () => {
+                  setOpen(false);
+                  onAction?.(a, row);
+                },
+                children: [
+                  builtinIcons[a],
+                  " ",
+                  builtinLabels[a]
+                ]
+              },
+              a
+            )),
+            customActions.length > 0 && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "-mx-1 my-1 h-px bg-border" }),
+            customActions.filter((c) => c.show ? c.show(row) : true).map((c) => /* @__PURE__ */ jsxs(
+              RowActionButton,
+              {
+                danger: c.danger,
+                onClick: () => {
+                  setOpen(false);
+                  onAction?.(c.id, row);
+                },
+                children: [
+                  c.icon,
+                  " ",
+                  c.label
+                ]
+              },
+              c.id
+            ))
           ]
-        },
-        c.id
-      ))
-    ] })
+        }
+      ),
+      document.body
+    )
   ] });
 }
 function RowActionButton({
@@ -1991,57 +2024,148 @@ var TOKEN_TO_VAR = {
   radius: "--radius",
   fontFamily: "--font-family"
 };
-function themeToStyle(theme) {
-  if (!theme) return {};
+function isModed(theme) {
+  if (!theme) return false;
+  return "light" in theme || "dark" in theme;
+}
+function tokensToStyle(tokens) {
+  if (!tokens) return {};
   const out = {};
-  for (const [k, v] of Object.entries(theme)) {
+  for (const [k, v] of Object.entries(tokens)) {
     if (v == null) continue;
     const cssVar = TOKEN_TO_VAR[k];
     if (cssVar) out[cssVar] = v;
   }
   return out;
 }
-var themePresets = {
+function themeToStyle(theme) {
+  if (!theme) return {};
+  if (isModed(theme)) return tokensToStyle(theme.light);
+  return tokensToStyle(theme);
+}
+function splitTheme(theme) {
+  if (!theme) return { light: void 0, dark: void 0 };
+  if (isModed(theme)) return { light: theme.light, dark: theme.dark };
+  return { light: theme, dark: void 0 };
+}
+function buildPreset(hue, chroma = 0.03) {
+  const c = chroma;
+  return {
+    light: {
+      background: `oklch(0.99 ${c * 0.2} ${hue})`,
+      foreground: `oklch(0.18 ${c * 1.2} ${hue})`,
+      card: `oklch(1 0 0)`,
+      cardForeground: `oklch(0.18 ${c * 1.2} ${hue})`,
+      popover: `oklch(1 0 0)`,
+      popoverForeground: `oklch(0.18 ${c * 1.2} ${hue})`,
+      primary: `oklch(0.55 0.2 ${hue})`,
+      primaryForeground: `oklch(0.99 0 0)`,
+      secondary: `oklch(0.96 ${c} ${hue})`,
+      secondaryForeground: `oklch(0.25 ${c * 2} ${hue})`,
+      muted: `oklch(0.96 ${c} ${hue})`,
+      mutedForeground: `oklch(0.5 ${c * 1.5} ${hue})`,
+      accent: `oklch(0.94 ${c * 1.2} ${hue})`,
+      accentForeground: `oklch(0.3 ${c * 3} ${hue})`,
+      destructive: `oklch(0.577 0.245 27.325)`,
+      destructiveForeground: `oklch(0.985 0 0)`,
+      border: `oklch(0.9 ${c * 0.8} ${hue})`,
+      input: `oklch(0.9 ${c * 0.8} ${hue})`,
+      ring: `oklch(0.55 0.2 ${hue} / 0.5)`,
+      radius: "0.625rem"
+    },
+    dark: {
+      background: `oklch(0.16 ${c * 0.6} ${hue})`,
+      foreground: `oklch(0.97 ${c * 0.2} ${hue})`,
+      card: `oklch(0.21 ${c * 0.8} ${hue})`,
+      cardForeground: `oklch(0.97 ${c * 0.2} ${hue})`,
+      popover: `oklch(0.21 ${c * 0.8} ${hue})`,
+      popoverForeground: `oklch(0.97 ${c * 0.2} ${hue})`,
+      primary: `oklch(0.7 0.18 ${hue})`,
+      primaryForeground: `oklch(0.16 ${c * 0.6} ${hue})`,
+      secondary: `oklch(0.27 ${c * 0.8} ${hue})`,
+      secondaryForeground: `oklch(0.97 ${c * 0.2} ${hue})`,
+      muted: `oklch(0.27 ${c * 0.8} ${hue})`,
+      mutedForeground: `oklch(0.7 ${c * 0.5} ${hue})`,
+      accent: `oklch(0.3 ${c * 1.5} ${hue})`,
+      accentForeground: `oklch(0.97 ${c * 0.2} ${hue})`,
+      destructive: `oklch(0.577 0.245 27.325 / 0.6)`,
+      destructiveForeground: `oklch(0.985 0 0)`,
+      border: `oklch(0.27 ${c * 0.8} ${hue})`,
+      input: `oklch(0.27 ${c * 0.8} ${hue})`,
+      ring: `oklch(0.7 0.18 ${hue} / 0.5)`,
+      radius: "0.625rem"
+    }
+  };
+}
+function tokensToCssBlock(tokens) {
+  if (!tokens) return "";
+  const parts = [];
+  for (const [k, v] of Object.entries(tokens)) {
+    if (v == null) continue;
+    const cssVar = TOKEN_TO_VAR[k];
+    if (cssVar) parts.push(`${cssVar}:${v}`);
+  }
+  return parts.join(";");
+}
+var neutral = {
   light: {
     background: "oklch(1 0 0)",
     foreground: "oklch(0.145 0 0)",
     card: "oklch(1 0 0)",
     cardForeground: "oklch(0.145 0 0)",
+    popover: "oklch(1 0 0)",
+    popoverForeground: "oklch(0.145 0 0)",
     primary: "oklch(0.205 0 0)",
     primaryForeground: "oklch(0.985 0 0)",
-    border: "oklch(0.922 0 0)"
+    secondary: "oklch(0.97 0 0)",
+    secondaryForeground: "oklch(0.205 0 0)",
+    muted: "oklch(0.97 0 0)",
+    mutedForeground: "oklch(0.556 0 0)",
+    accent: "oklch(0.97 0 0)",
+    accentForeground: "oklch(0.205 0 0)",
+    destructive: "oklch(0.577 0.245 27.325)",
+    destructiveForeground: "oklch(0.985 0 0)",
+    border: "oklch(0.922 0 0)",
+    input: "oklch(0.922 0 0)",
+    ring: "oklch(0.708 0 0)",
+    radius: "0.625rem"
   },
   dark: {
     background: "oklch(0.145 0 0)",
     foreground: "oklch(0.985 0 0)",
     card: "oklch(0.205 0 0)",
     cardForeground: "oklch(0.985 0 0)",
+    popover: "oklch(0.205 0 0)",
+    popoverForeground: "oklch(0.985 0 0)",
     primary: "oklch(0.985 0 0)",
     primaryForeground: "oklch(0.205 0 0)",
-    border: "oklch(0.269 0 0)"
-  },
-  emerald: {
-    primary: "oklch(0.66 0.15 162)",
-    primaryForeground: "oklch(1 0 0)",
-    accent: "oklch(0.94 0.04 162)",
-    accentForeground: "oklch(0.3 0.1 162)",
-    ring: "oklch(0.66 0.15 162 / 0.5)"
-  },
-  violet: {
-    primary: "oklch(0.55 0.22 285)",
-    primaryForeground: "oklch(1 0 0)",
-    accent: "oklch(0.94 0.04 285)",
-    accentForeground: "oklch(0.3 0.12 285)",
-    ring: "oklch(0.55 0.22 285 / 0.5)"
-  },
-  amber: {
-    primary: "oklch(0.7 0.18 65)",
-    primaryForeground: "oklch(0.2 0 0)",
-    accent: "oklch(0.94 0.05 65)",
-    accentForeground: "oklch(0.3 0.12 65)",
-    ring: "oklch(0.7 0.18 65 / 0.5)"
+    secondary: "oklch(0.269 0 0)",
+    secondaryForeground: "oklch(0.985 0 0)",
+    muted: "oklch(0.269 0 0)",
+    mutedForeground: "oklch(0.708 0 0)",
+    accent: "oklch(0.269 0 0)",
+    accentForeground: "oklch(0.985 0 0)",
+    destructive: "oklch(0.577 0.245 27.325 / 0.6)",
+    destructiveForeground: "oklch(0.985 0 0)",
+    border: "oklch(0.269 0 0)",
+    input: "oklch(0.269 0 0)",
+    ring: "oklch(0.439 0 0)",
+    radius: "0.625rem"
   }
 };
+var themePresets = {
+  neutral,
+  light: { light: neutral.light },
+  dark: { light: neutral.dark },
+  violet: buildPreset(285),
+  emerald: buildPreset(162),
+  amber: buildPreset(65),
+  rose: buildPreset(15),
+  sky: buildPreset(235),
+  slate: buildPreset(240, 0.015)
+};
+var ISOLATE_LIGHT_TOKENS = neutral.light;
+var ISOLATE_DARK_TOKENS = neutral.dark;
 function getPinningStyles(column) {
   const isPinned = column.getIsPinned();
   if (!isPinned) return {};
@@ -2164,6 +2288,8 @@ var DEFAULT_LABELS = {
   total: "Total",
   noData: "No data.",
   noResults: "No rows match the current filters.",
+  loadError: "Could not load rows.",
+  retry: "Retry",
   refreshing: "Refreshing",
   rowsPerPage: "Rows per page",
   page: "Page",
@@ -2177,6 +2303,7 @@ var DENSITY_CLASS = {
 function DataTable({
   data,
   columns,
+  dataSource,
   isLoading,
   isFetching,
   onRefresh,
@@ -2203,12 +2330,13 @@ function DataTable({
   features,
   labels: labelsProp,
   density = "default",
-  theme
+  theme,
+  isolate = false
 }) {
   const labels = { ...DEFAULT_LABELS, ...labelsProp };
   const f = {
     search: features?.search ?? true,
-    refresh: features?.refresh ?? !!onRefresh,
+    refresh: features?.refresh ?? !!(onRefresh || dataSource),
     columnVisibility: features?.columnVisibility ?? true,
     export: features?.export ?? true,
     addRow: features?.addRow ?? !!onAddRow,
@@ -2219,7 +2347,20 @@ function DataTable({
     reordering: features?.reordering ?? true,
     pinning: features?.pinning ?? true
   };
-  const themeStyle = themeToStyle(theme);
+  const rawInstanceId = useId();
+  const instanceId = useMemo(
+    () => `dyno-grid-${rawInstanceId.replace(/[^a-zA-Z0-9]/g, "")}`,
+    [rawInstanceId]
+  );
+  const { lightStyle, darkCss } = useMemo(() => {
+    const { light, dark } = splitTheme(theme);
+    const lightTokens = isolate ? { ...ISOLATE_LIGHT_TOKENS, ...light ?? {} } : light;
+    const darkTokens = isolate ? { ...ISOLATE_DARK_TOKENS, ...dark ?? light ?? {} } : dark;
+    return {
+      lightStyle: tokensToStyle(lightTokens),
+      darkCss: darkTokens ? tokensToCssBlock(darkTokens) : null
+    };
+  }, [theme, isolate]);
   const [sorting, setSorting] = useState([]);
   const [columnFilters, setColumnFilters] = useState([]);
   const [internalGlobalFilter, setInternalGlobalFilter] = useState("");
@@ -2252,14 +2393,80 @@ function DataTable({
     pageIndex: 0,
     pageSize: initialPageSize
   });
+  const [sourceRows, setSourceRows] = useState(
+    () => dataSource?.initialData ?? []
+  );
+  const [sourceTotalRecords, setSourceTotalRecords] = useState(void 0);
+  const [sourceError, setSourceError] = useState(null);
+  const [sourceLoading, setSourceLoading] = useState(false);
+  const [sourceFetching, setSourceFetching] = useState(false);
+  const [sourceRefreshKey, setSourceRefreshKey] = useState(0);
   const [editingCell, setEditingCell] = useState(null);
   const [editingRowId, setEditingRowId] = useState(null);
   const [rowDraft, setRowDraft] = useState({});
+  const dataSourceEnabled = !!dataSource && dataSource.enabled !== false;
+  const dataSourceMode = dataSource?.mode ?? "client";
+  const isServerSideDataSource = dataSourceEnabled && dataSourceMode === "server";
+  const dataSourceDeps = dataSource?.deps ?? [];
+  useEffect(() => {
+    if (!dataSourceEnabled || !dataSource) return;
+    let cancelled = false;
+    const isInitialLoad = sourceRows.length === 0;
+    setSourceError(null);
+    setSourceLoading(isInitialLoad);
+    setSourceFetching(!isInitialLoad);
+    dataSource.fetchRows({
+      pageIndex: pagination.pageIndex,
+      pageSize: pagination.pageSize,
+      sorting,
+      columnFilters,
+      globalFilter
+    }).then((result) => {
+      if (cancelled) return;
+      const rows2 = Array.isArray(result) ? result : result.rows;
+      setSourceRows(rows2);
+      setSourceTotalRecords(
+        Array.isArray(result) ? rows2.length : result.totalRecords ?? rows2.length
+      );
+    }).catch((error) => {
+      if (cancelled) return;
+      setSourceError(error);
+      dataSource.onError?.(error, {
+        type: isInitialLoad ? "load" : "refresh",
+        message: isInitialLoad ? labels.loadError : labels.refreshing
+      });
+    }).finally(() => {
+      if (cancelled) return;
+      setSourceLoading(false);
+      setSourceFetching(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    dataSourceEnabled,
+    dataSource,
+    sourceRefreshKey,
+    pagination.pageIndex,
+    pagination.pageSize,
+    sorting,
+    columnFilters,
+    globalFilter,
+    labels.loadError,
+    labels.refreshing,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    ...dataSourceDeps
+  ]);
+  const baseData = dataSourceEnabled ? sourceRows : data ?? [];
+  const effectiveIsLoading = dataSourceEnabled ? sourceLoading : isLoading;
+  const effectiveIsFetching = dataSourceEnabled ? sourceFetching : isFetching;
+  const effectiveOnRefresh = dataSourceEnabled ? () => setSourceRefreshKey((key) => key + 1) : onRefresh;
   const [extraRows, setExtraRows] = useState([]);
   const mergedData = useMemo(
-    () => extraRows.length ? [...extraRows, ...data] : data,
-    [extraRows, data]
+    () => extraRows.length ? [...extraRows, ...baseData] : baseData,
+    [extraRows, baseData]
   );
+  const effectiveTotalRecords = totalRecords ?? (dataSourceEnabled ? sourceTotalRecords ?? mergedData.length : mergedData.length);
   const augmentedColumns = useMemo(() => {
     const wrap = (col) => {
       const meta = col.meta;
@@ -2409,6 +2616,10 @@ function DataTable({
     enableRowSelection: true,
     enableExpanding: !!(renderSubRow || getSubRows),
     enablePinning: f.pinning,
+    manualPagination: isServerSideDataSource,
+    manualSorting: isServerSideDataSource,
+    manualFiltering: isServerSideDataSource,
+    pageCount: isServerSideDataSource ? Math.max(1, Math.ceil(effectiveTotalRecords / pagination.pageSize)) : void 0,
     getRowId: (row) => String(row.id),
     getSubRows,
     getRowCanExpand: (row) => {
@@ -2433,27 +2644,56 @@ function DataTable({
     getExpandedRowModel: getExpandedRowModel(),
     getPaginationRowModel: getPaginationRowModel()
   });
-  const dragState = useRef({ src: null });
-  const onHeaderDragStart = (id, e) => {
-    dragState.current.src = id;
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("text/plain", id);
+  const reorderState = useRef(null);
+  const [activeReorderId, setActiveReorderId] = useState(null);
+  const [dragOverColId, setDragOverColId] = useState(null);
+  const isInteractiveTarget = (target) => {
+    const el = target;
+    if (!el || !el.closest) return false;
+    return !!el.closest(
+      'button, a, input, select, textarea, [role="menuitem"], [data-no-drag]'
+    );
   };
-  const onHeaderDragOver = (e) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "move";
+  const onHeaderPointerDown = (id) => (e) => {
+    if (e.button !== 0) return;
+    if (isInteractiveTarget(e.target)) return;
+    reorderState.current = { x: e.clientX, y: e.clientY, id };
   };
-  const onHeaderDrop = (targetId) => {
-    const src = dragState.current.src;
-    dragState.current.src = null;
-    if (!src || src === targetId) return;
+  const onHeaderPointerMove = (e) => {
+    const start = reorderState.current;
+    if (!start) return;
+    if (!activeReorderId) {
+      const dx = e.clientX - start.x;
+      const dy = e.clientY - start.y;
+      if (Math.hypot(dx, dy) < 6) return;
+      setActiveReorderId(start.id);
+      e.currentTarget.setPointerCapture(e.pointerId);
+    }
+    const el = document.elementFromPoint(e.clientX, e.clientY);
+    const th = el ? el.closest("th[data-col-id]") : null;
+    const overId = th?.dataset.colId ?? null;
+    const next = overId && overId !== start.id ? overId : null;
+    if (next !== dragOverColId) setDragOverColId(next);
+  };
+  const onHeaderPointerUp = (e) => {
+    const start = reorderState.current;
+    reorderState.current = null;
+    if (!activeReorderId) return;
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    const target = dragOverColId;
+    setActiveReorderId(null);
+    setDragOverColId(null);
+    if (!start || !target || target === start.id) return;
     setColumnOrder((order) => {
       const next = [...order];
-      const from = next.indexOf(src);
-      const to = next.indexOf(targetId);
+      const from = next.indexOf(start.id);
+      const to = next.indexOf(target);
       if (from === -1 || to === -1) return order;
       next.splice(from, 1);
-      next.splice(to, 0, src);
+      next.splice(to, 0, start.id);
       return next;
     });
   };
@@ -2499,20 +2739,26 @@ function DataTable({
       children: /* @__PURE__ */ jsxs(
         "div",
         {
+          "data-dyno-grid": instanceId,
           className: cn(
             "flex flex-col rounded-lg border bg-card text-card-foreground shadow-sm",
             DENSITY_CLASS[density],
             className
           ),
-          style: themeStyle,
+          style: lightStyle,
           children: [
+            darkCss && /* @__PURE__ */ jsxs("style", { children: [
+              `@media (prefers-color-scheme: dark){[data-dyno-grid="${instanceId}"]{${darkCss}}}`,
+              `.dark [data-dyno-grid="${instanceId}"]{${darkCss}}`,
+              `[data-dyno-grid="${instanceId}"].dark{${darkCss}}`
+            ] }),
             /* @__PURE__ */ jsx(
               DataTableToolbar,
               {
                 table,
-                totalRecords: totalRecords ?? mergedData.length,
-                isFetching,
-                onRefresh: f.refresh ? onRefresh : void 0,
+                totalRecords: effectiveTotalRecords,
+                isFetching: effectiveIsFetching,
+                onRefresh: f.refresh ? effectiveOnRefresh : void 0,
                 onAddRow: f.addRow ? handleAddRow : void 0,
                 onBulkDelete,
                 exportFileName,
@@ -2540,32 +2786,38 @@ function DataTable({
                       const meta = header.column.columnDef.meta;
                       const isUtility = header.column.id === "__select" || header.column.id === "__expand" || header.column.id === "__actions";
                       const isPinned = !!header.column.getIsPinned();
+                      const canReorder = !isUtility && f.reordering;
+                      const isDropTarget = canReorder && dragOverColId === header.column.id;
+                      const isBeingDragged = canReorder && activeReorderId === header.column.id;
                       return /* @__PURE__ */ jsxs(
                         "th",
                         {
                           colSpan: header.colSpan,
+                          "data-col-id": header.column.id,
+                          onPointerDown: canReorder ? onHeaderPointerDown(header.column.id) : void 0,
+                          onPointerMove: canReorder ? onHeaderPointerMove : void 0,
+                          onPointerUp: canReorder ? onHeaderPointerUp : void 0,
+                          onPointerCancel: canReorder ? onHeaderPointerUp : void 0,
                           style: {
                             width: header.getSize(),
                             ...getPinningStyles(header.column),
                             ...isPinned ? { zIndex: 2 } : {}
                           },
                           className: cn(
-                            "group/th relative h-9 px-2 text-left align-middle text-xs font-medium text-muted-foreground",
+                            "group/th relative h-9 px-2 text-left align-middle text-xs font-medium text-muted-foreground select-none",
+                            canReorder && "cursor-grab active:cursor-grabbing",
                             isPinned && "bg-card",
+                            isBeingDragged && "opacity-50",
+                            isDropTarget && "bg-primary/10 ring-2 ring-inset ring-primary/40",
                             meta?.headerClassName
                           ),
                           children: [
                             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                              !isUtility && f.reordering && /* @__PURE__ */ jsx(
-                                "span",
+                              canReorder && /* @__PURE__ */ jsx(
+                                GripVerticalIcon,
                                 {
-                                  draggable: true,
-                                  onDragStart: (e) => onHeaderDragStart(header.column.id, e),
-                                  onDragOver: onHeaderDragOver,
-                                  onDrop: () => onHeaderDrop(header.column.id),
-                                  className: "-ml-1 cursor-grab rounded p-0.5 text-muted-foreground/40 opacity-0 transition group-hover/th:opacity-100 hover:bg-muted hover:text-foreground active:cursor-grabbing",
-                                  title: "Drag to reorder",
-                                  children: /* @__PURE__ */ jsx(GripVerticalIcon, { className: "size-3" })
+                                  className: "-ml-1 size-3 shrink-0 text-muted-foreground/40 opacity-0 transition group-hover/th:opacity-100",
+                                  "aria-hidden": "true"
                                 }
                               ),
                               /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) })
@@ -2573,6 +2825,8 @@ function DataTable({
                             header.column.getCanResize() && /* @__PURE__ */ jsx(
                               "span",
                               {
+                                "data-no-drag": true,
+                                onPointerDown: (e) => e.stopPropagation(),
                                 onMouseDown: header.getResizeHandler(),
                                 onTouchStart: header.getResizeHandler(),
                                 onDoubleClick: () => header.column.resetSize(),
@@ -2587,7 +2841,25 @@ function DataTable({
                         header.id
                       );
                     }) }, hg.id)) }),
-                    /* @__PURE__ */ jsx("tbody", { children: isLoading ? renderSkeleton(visibleLeafCount, pagination.pageSize) : rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx("tbody", { children: effectiveIsLoading ? renderSkeleton(visibleLeafCount, pagination.pageSize) : sourceError && rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        colSpan: visibleLeafCount,
+                        className: "h-32 text-center text-sm text-muted-foreground",
+                        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                          /* @__PURE__ */ jsx("span", { children: labels.loadError }),
+                          effectiveOnRefresh && /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: effectiveOnRefresh,
+                              className: "rounded-md border px-2 py-1 text-xs text-foreground hover:bg-muted",
+                              children: labels.retry
+                            }
+                          )
+                        ] })
+                      }
+                    ) }) : rows.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
                       "td",
                       {
                         colSpan: visibleLeafCount,
@@ -2606,7 +2878,7 @@ function DataTable({
                   ]
                 }
               ),
-              isFetching && !isLoading && /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute top-1.5 right-2 flex items-center gap-1.5 rounded-md bg-background/80 px-2 py-1 text-xs text-muted-foreground shadow-sm backdrop-blur", children: [
+              effectiveIsFetching && !effectiveIsLoading && /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute top-1.5 right-2 flex items-center gap-1.5 rounded-md bg-background/80 px-2 py-1 text-xs text-muted-foreground shadow-sm backdrop-blur", children: [
                 /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3 animate-spin" }),
                 " ",
                 labels.refreshing
@@ -2666,6 +2938,6 @@ function renderSkeleton(cols, rows) {
   return Array.from({ length: rows }).map((_, r) => /* @__PURE__ */ jsx("tr", { className: "border-b", children: Array.from({ length: cols }).map((__, c) => /* @__PURE__ */ jsx("td", { className: "px-2 py-2", children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }) }, c)) }, r));
 }
 
-export { ColumnFilterPanel, DataTable, DataTableColumnHeader, DataTablePagination, DataTableRowActions, DataTableToolbar, EditableCell, booleanFilterFn, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, textFilterFn, themePresets, themeToStyle };
+export { ColumnFilterPanel, DataTable, DataTableColumnHeader, DataTablePagination, DataTableRowActions, DataTableToolbar, EditableCell, ISOLATE_DARK_TOKENS, ISOLATE_LIGHT_TOKENS, booleanFilterFn, buildPreset, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, splitTheme, textFilterFn, themePresets, themeToStyle, tokensToCssBlock, tokensToStyle };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map