@dynostack/react-grid 0.1.0 → 0.1.3

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { RowData, ColumnDef, ColumnPinningState, VisibilityState, Column, Table, CellContext, FilterFn } from '@tanstack/react-table';
+import { RowData, ColumnDef, SortingState, ColumnFiltersState, ColumnPinningState, VisibilityState, Column, Table, CellContext, FilterFn } from '@tanstack/react-table';
 import { CSSProperties } from 'react';
 
 type RowActionId = "view" | "edit" | "duplicate" | "delete" | string;
@@ -168,17 +168,54 @@ type DataTableLabels = {
     total?: string;
     noData?: string;
     noResults?: string;
+    loadError?: string;
+    retry?: string;
     refreshing?: string;
     rowsPerPage?: string;
     page?: string;
     of?: string;
 };
 type DataTableDensity = "compact" | "default" | "comfortable";
+type DataTableFetchParams = {
+    pageIndex: number;
+    pageSize: number;
+    sorting: SortingState;
+    columnFilters: ColumnFiltersState;
+    globalFilter: string;
+};
+type DataTableDataSourceResult<TData> = TData[] | {
+    rows: TData[];
+    totalRecords?: number;
+};
+type DataTableErrorContext = {
+    type: "load" | "refresh";
+    message: string;
+};
+type DataTableDataSource<TData> = {
+    /**
+     * Fetch rows internally. In "client" mode, return the full data set and the
+     * table applies client-side sort/filter/pagination. In "server" mode, return
+     * the current page and optionally `totalRecords`.
+     */
+    fetchRows: (params: DataTableFetchParams) => Promise<DataTableDataSourceResult<TData>>;
+    /** "client" by default. Use "server" for API-side pagination/filter/sort. */
+    mode?: "client" | "server";
+    /** Set false to pause fetching. */
+    enabled?: boolean;
+    /** Optional rows to show before the first fetch resolves. */
+    initialData?: TData[];
+    /** Refetch when these external values change. Memoize this array. */
+    deps?: readonly unknown[];
+    /** Called for load/refresh errors so apps can show a toast. */
+    onError?: (error: unknown, context: DataTableErrorContext) => void;
+};
 type DataTableProps<TData extends {
     id: string | number;
 }> = {
-    data: TData[];
+    data?: TData[];
     columns: ColumnDef<TData>[];
+    /** Optional internal fetcher. Omit this when using controlled `data`. */
+    dataSource?: DataTableDataSource<TData>;
     isLoading?: boolean;
     isFetching?: boolean;
     onRefresh?: () => void;
@@ -221,7 +258,7 @@ type DataTableProps<TData extends {
 };
 declare function DataTable<TData extends {
     id: string | number;
-}>({ data, columns, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 
 type Props$2<TData, TValue> = {
     column: Column<TData, TValue>;
@@ -313,4 +350,4 @@ declare function ColumnFilterPanel<TData, TValue>(props: CommonProps<TData, TVal
 declare function exportToCsv<TData>(table: Table<TData>, fileName?: string): void;
 declare function exportToExcel<TData>(table: Table<TData>, fileName?: string): void;
 
-export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDensity, type DataTableFeatures, type DataTableLabels, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, DataTableToolbar, type DateOp, EditableCell, type FilterType, type NumberOp, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, booleanFilterFn, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, textFilterFn, themePresets, themeToStyle };
+export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, DataTableToolbar, type DateOp, EditableCell, type FilterType, type NumberOp, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, booleanFilterFn, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, textFilterFn, themePresets, themeToStyle };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { RowData, ColumnDef, ColumnPinningState, VisibilityState, Column, Table, CellContext, FilterFn } from '@tanstack/react-table';
+import { RowData, ColumnDef, SortingState, ColumnFiltersState, ColumnPinningState, VisibilityState, Column, Table, CellContext, FilterFn } from '@tanstack/react-table';
 import { CSSProperties } from 'react';
 
 type RowActionId = "view" | "edit" | "duplicate" | "delete" | string;
@@ -168,17 +168,54 @@ type DataTableLabels = {
     total?: string;
     noData?: string;
     noResults?: string;
+    loadError?: string;
+    retry?: string;
     refreshing?: string;
     rowsPerPage?: string;
     page?: string;
     of?: string;
 };
 type DataTableDensity = "compact" | "default" | "comfortable";
+type DataTableFetchParams = {
+    pageIndex: number;
+    pageSize: number;
+    sorting: SortingState;
+    columnFilters: ColumnFiltersState;
+    globalFilter: string;
+};
+type DataTableDataSourceResult<TData> = TData[] | {
+    rows: TData[];
+    totalRecords?: number;
+};
+type DataTableErrorContext = {
+    type: "load" | "refresh";
+    message: string;
+};
+type DataTableDataSource<TData> = {
+    /**
+     * Fetch rows internally. In "client" mode, return the full data set and the
+     * table applies client-side sort/filter/pagination. In "server" mode, return
+     * the current page and optionally `totalRecords`.
+     */
+    fetchRows: (params: DataTableFetchParams) => Promise<DataTableDataSourceResult<TData>>;
+    /** "client" by default. Use "server" for API-side pagination/filter/sort. */
+    mode?: "client" | "server";
+    /** Set false to pause fetching. */
+    enabled?: boolean;
+    /** Optional rows to show before the first fetch resolves. */
+    initialData?: TData[];
+    /** Refetch when these external values change. Memoize this array. */
+    deps?: readonly unknown[];
+    /** Called for load/refresh errors so apps can show a toast. */
+    onError?: (error: unknown, context: DataTableErrorContext) => void;
+};
 type DataTableProps<TData extends {
     id: string | number;
 }> = {
-    data: TData[];
+    data?: TData[];
     columns: ColumnDef<TData>[];
+    /** Optional internal fetcher. Omit this when using controlled `data`. */
+    dataSource?: DataTableDataSource<TData>;
     isLoading?: boolean;
     isFetching?: boolean;
     onRefresh?: () => void;
@@ -221,7 +258,7 @@ type DataTableProps<TData extends {
 };
 declare function DataTable<TData extends {
     id: string | number;
-}>({ data, columns, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+}>({ data, columns, dataSource, isLoading, isFetching, onRefresh, totalRecords, exportFileName, enableSelection, renderSubRow, getSubRows, rowActions, customRowActions, onRowAction, onCellEdit, onRowSave, onAddRow, onBulkDelete, initialPageSize, pageSizeOptions, initialColumnPinning, initialColumnVisibility, globalFilter: globalFilterProp, onGlobalFilterChange, className, toolbarSlot, features, labels: labelsProp, density, theme, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 
 type Props$2<TData, TValue> = {
     column: Column<TData, TValue>;
@@ -313,4 +350,4 @@ declare function ColumnFilterPanel<TData, TValue>(props: CommonProps<TData, TVal
 declare function exportToCsv<TData>(table: Table<TData>, fileName?: string): void;
 declare function exportToExcel<TData>(table: Table<TData>, fileName?: string): void;
 
-export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDensity, type DataTableFeatures, type DataTableLabels, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, DataTableToolbar, type DateOp, EditableCell, type FilterType, type NumberOp, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, booleanFilterFn, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, textFilterFn, themePresets, themeToStyle };
+export { type AdvFilter, type CellEditorType, ColumnFilterPanel, type Combine, type Condition, type CustomRowAction, DataTable, type DataTableColumn, DataTableColumnHeader, type DataTableDataSource, type DataTableDataSourceResult, type DataTableDensity, type DataTableErrorContext, type DataTableFeatures, type DataTableFetchParams, type DataTableLabels, DataTablePagination, type DataTableProps, DataTableRowActions, type DataTableRowActionsProps, type DataTableTheme, type DataTableThemeName, DataTableToolbar, type DateOp, EditableCell, type FilterType, type NumberOp, type RowAction, type RowActionId, type SelectOption, type SetFilter, type TextOp, booleanFilterFn, dateFilterFn, exportToCsv, exportToExcel, isFilterActive, numberFilterFn, setFilterFn, textFilterFn, themePresets, themeToStyle };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useState, useRef, useEffect, useMemo, useContext } from 'react';
+import { createContext, useState, useRef, useEffect, useMemo, useLayoutEffect, 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,
+    open && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
         {
-          danger: a === "delete",
-          onClick: () => {
-            setOpen(false);
-            onAction?.(a, 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: [
-            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
+            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({
@@ -2164,6 +2197,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 +2212,7 @@ var DENSITY_CLASS = {
 function DataTable({
   data,
   columns,
+  dataSource,
   isLoading,
   isFetching,
   onRefresh,
@@ -2208,7 +2244,7 @@ function DataTable({
   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,
@@ -2252,14 +2288,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 +2511,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 +2539,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;
     });
   };
@@ -2510,9 +2645,9 @@ function DataTable({
               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 +2675,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 +2714,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 +2730,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 +2767,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