@dynostack/react-grid 0.1.0 → 0.1.3

package/README.md

@@ -40,6 +40,7 @@ A single `<DataTable />` component that gives you ag-grid–level functionality
 - [Tailwind setup](#tailwind-setup)
 - [Theme tokens](#theme-tokens)
 - [Quick start](#quick-start)
+- [Data fetching](#data-fetching)
 - [Theming](#theming)
 - [Density](#density)
 - [Feature flags](#feature-flags)
@@ -167,6 +168,84 @@ That's it. You now have sort + filter + edit + add + delete + export + pin + res
 
 ---
 
+## Data fetching
+
+`DataTable` supports two data ownership models.
+
+### 1. Controlled data from your page
+
+Use this when your app already owns fetching with TanStack Query, SWR, Redux,
+loader functions, or custom hooks. The table receives rows and loading flags as
+props, and your app owns error/toast behavior.
+
+```tsx
+const usersQuery = useQuery({
+  queryKey: ["users"],
+  queryFn: fetchUsers,
+})
+
+<DataTable<User>
+  data={usersQuery.data ?? []}
+  columns={columns}
+  isLoading={usersQuery.isLoading}
+  isFetching={usersQuery.isFetching}
+  onRefresh={() => usersQuery.refetch()}
+  totalRecords={usersQuery.data?.length ?? 0}
+/>
+```
+
+For blocking load errors, render your own page-level error state or pass an empty
+array. For background errors, show a toast from your query/mutation callbacks.
+
+### 2. Internal fetching with `dataSource`
+
+Use this when you want the table to own fetch/loading/error/refresh state.
+`fetchRows` receives the current table state and can return either an array or
+`{ rows, totalRecords }`.
+
+```tsx
+<DataTable<User>
+  columns={columns}
+  dataSource={{
+    fetchRows: async ({ pageIndex, pageSize, sorting, columnFilters, globalFilter }) => {
+      const res = await fetch("/api/users", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({
+          pageIndex,
+          pageSize,
+          sorting,
+          columnFilters,
+          q: globalFilter,
+        }),
+      })
+
+      if (!res.ok) throw new Error("Failed to load users")
+      return res.json() as Promise<{ rows: User[]; totalRecords: number }>
+    },
+    mode: "server",
+    onError: (error, context) => {
+      toast.error(context.message)
+      console.error(error)
+    },
+  }}
+/>
+```
+
+Internal mode behavior:
+
+- Initial load shows the table skeleton.
+- Initial load failure shows an inline `Could not load rows` state with `Retry`.
+- Refresh failure keeps the last successful rows visible and calls `onError`.
+- `mode: "client"` expects the full row array and lets the table sort/filter/page in memory.
+- `mode: "server"` expects the current page and uses `totalRecords` for pagination.
+
+Keep using `onCellEdit`, `onRowSave`, `onAddRow`, and `onBulkDelete` for mutations.
+The table does not assume your write API; this lets you choose optimistic updates,
+rollback, toast notifications, and validation.
+
+---
+
 ## Theming
 
 All shadcn tokens are supported plus `radius` and `fontFamily`. Anything you omit falls through to the consumer's `:root`.
@@ -454,7 +533,11 @@ Mark a column non-exportable via `meta.exportable: false`.
 
 ## Server-side data
 
-Provide a controlled global filter and refetch on change:
+You can do server-side data in either mode.
+
+### Controlled server-side data
+
+Own the API call in your page and pass the result into the table:
 
 ```tsx
 const [q, setQ] = useState("")
@@ -474,7 +557,38 @@ const usersQuery = useQuery({
 />
 ```
 
-Pair with TanStack Query's pagination/cursor utilities for cursor-based grids.
+Pair this with TanStack Query's pagination/cursor utilities when you want query
+caching and mutation orchestration outside the grid.
+
+### Built-in server-side data
+
+Let the grid call your API by setting `dataSource.mode` to `"server"`:
+
+```tsx
+<DataTable<User>
+  columns={columns}
+  dataSource={{
+    mode: "server",
+    fetchRows: async (state) => {
+      const res = await fetch("/api/users/grid", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(state),
+      })
+
+      if (!res.ok) throw new Error("Users request failed")
+      return res.json() as Promise<{ rows: User[]; totalRecords: number }>
+    },
+    onError: (_error, context) => {
+      toast.error(context.message)
+    },
+  }}
+/>
+```
+
+`state` contains `pageIndex`, `pageSize`, `sorting`, `columnFilters`, and
+`globalFilter`. In server mode the table assumes the API already applied those
+operations and only renders the returned page.
 
 ---
 
@@ -482,8 +596,9 @@ Pair with TanStack Query's pagination/cursor utilities for cursor-based grids.
 
 | Prop                      | Type                                                       | Default                | Description                                            |
 | ------------------------- | ---------------------------------------------------------- | ---------------------- | ------------------------------------------------------ |
-| `data`                    | `TData[]`                                                  | —                      | Row data.                                              |
+| `data`                    | `TData[]`                                                  | `[]`                   | Controlled row data. Use this when fetching outside the table. |
 | `columns`                 | `ColumnDef<TData>[]`                                       | —                      | TanStack column definitions.                           |
+| `dataSource`              | `DataTableDataSource<TData>`                               | —                      | Optional internal fetcher for client/server data loading. |
 | `isLoading`               | `boolean`                                                  | `false`                | Initial skeleton state.                                |
 | `isFetching`              | `boolean`                                                  | `false`                | Background-refresh indicator.                          |
 | `onRefresh`               | `() => void`                                               | —                      | Refresh button handler.                                |
@@ -514,6 +629,26 @@ Pair with TanStack Query's pagination/cursor utilities for cursor-based grids.
 
 `TData` must extend `{ id: string \| number }`.
 
+```ts
+type DataTableDataSource<TData> = {
+  fetchRows: (params: {
+    pageIndex: number
+    pageSize: number
+    sorting: SortingState
+    columnFilters: ColumnFiltersState
+    globalFilter: string
+  }) => Promise<TData[] | { rows: TData[]; totalRecords?: number }>
+  mode?: "client" | "server"
+  enabled?: boolean
+  initialData?: TData[]
+  deps?: readonly unknown[]
+  onError?: (
+    error: unknown,
+    context: { type: "load" | "refresh"; message: string }
+  ) => void
+}
+```
+
 ---
 
 ## Compatibility

package/dist/index.cjs

@@ -8,6 +8,7 @@ var tailwindMerge = require('tailwind-merge');
 var radixUi = require('radix-ui');
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
+var reactDom = require('react-dom');
 
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
@@ -1717,14 +1718,34 @@ function DataTableRowActions({
   onCancelEdit
 }) {
   const [open, setOpen] = react.useState(false);
+  const [menuPosition, setMenuPosition] = react.useState({ top: 0, left: 0 });
+  const triggerRef = react.useRef(null);
   const menuRef = react.useRef(null);
+  react.useLayoutEffect(() => {
+    if (!open || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    setMenuPosition({
+      top: rect.bottom + 4,
+      left: Math.max(8, rect.right - 160)
+    });
+  }, [open]);
   react.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-end gap-1", children: [
@@ -1755,6 +1776,7 @@ function DataTableRowActions({
     /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
+        ref: triggerRef,
         variant: "ghost",
         size: "icon-xs",
         "aria-label": "Open row actions",
@@ -1763,41 +1785,52 @@ function DataTableRowActions({
         children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontalIcon, {})
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-        RowActionButton,
+    open && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "-mx-1 my-1 h-px bg-border" }),
-      customActions.filter((c) => c.show ? c.show(row) : true).map((c) => /* @__PURE__ */ jsxRuntime.jsxs(
-        RowActionButton,
-        {
-          danger: c.danger,
-          onClick: () => {
-            setOpen(false);
-            onAction?.(c.id, row);
-          },
-          children: [
-            c.icon,
-            " ",
-            c.label
+            actions.map((a) => /* @__PURE__ */ jsxRuntime.jsxs(
+              RowActionButton,
+              {
+                danger: a === "delete",
+                onClick: () => {
+                  setOpen(false);
+                  onAction?.(a, row);
+                },
+                children: [
+                  builtinIcons[a],
+                  " ",
+                  builtinLabels[a]
+                ]
+              },
+              a
+            )),
+            customActions.length > 0 && actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "-mx-1 my-1 h-px bg-border" }),
+            customActions.filter((c) => c.show ? c.show(row) : true).map((c) => /* @__PURE__ */ jsxRuntime.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({
@@ -2166,6 +2199,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",
@@ -2179,6 +2214,7 @@ var DENSITY_CLASS = {
 function DataTable({
   data,
   columns,
+  dataSource,
   isLoading,
   isFetching,
   onRefresh,
@@ -2210,7 +2246,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,
@@ -2254,14 +2290,80 @@ function DataTable({
     pageIndex: 0,
     pageSize: initialPageSize
   });
+  const [sourceRows, setSourceRows] = react.useState(
+    () => dataSource?.initialData ?? []
+  );
+  const [sourceTotalRecords, setSourceTotalRecords] = react.useState(void 0);
+  const [sourceError, setSourceError] = react.useState(null);
+  const [sourceLoading, setSourceLoading] = react.useState(false);
+  const [sourceFetching, setSourceFetching] = react.useState(false);
+  const [sourceRefreshKey, setSourceRefreshKey] = react.useState(0);
   const [editingCell, setEditingCell] = react.useState(null);
   const [editingRowId, setEditingRowId] = react.useState(null);
   const [rowDraft, setRowDraft] = react.useState({});
+  const dataSourceEnabled = !!dataSource && dataSource.enabled !== false;
+  const dataSourceMode = dataSource?.mode ?? "client";
+  const isServerSideDataSource = dataSourceEnabled && dataSourceMode === "server";
+  const dataSourceDeps = dataSource?.deps ?? [];
+  react.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] = react.useState([]);
   const mergedData = react.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 = react.useMemo(() => {
     const wrap = (col) => {
       const meta = col.meta;
@@ -2411,6 +2513,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) => {
@@ -2435,27 +2541,56 @@ function DataTable({
     getExpandedRowModel: reactTable.getExpandedRowModel(),
     getPaginationRowModel: reactTable.getPaginationRowModel()
   });
-  const dragState = react.useRef({ src: null });
-  const onHeaderDragStart = (id, e) => {
-    dragState.current.src = id;
-    e.dataTransfer.effectAllowed = "move";
-    e.dataTransfer.setData("text/plain", id);
+  const reorderState = react.useRef(null);
+  const [activeReorderId, setActiveReorderId] = react.useState(null);
+  const [dragOverColId, setDragOverColId] = react.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;
     });
   };
@@ -2512,9 +2647,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,
@@ -2542,32 +2677,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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-                              !isUtility && f.reordering && /* @__PURE__ */ jsxRuntime.jsx(
-                                "span",
+                              canReorder && /* @__PURE__ */ jsxRuntime.jsx(
+                                lucideReact.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__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: header.isPlaceholder ? null : reactTable.flexRender(header.column.columnDef.header, header.getContext()) })
@@ -2575,6 +2716,8 @@ function DataTable({
                             header.column.getCanResize() && /* @__PURE__ */ jsxRuntime.jsx(
                               "span",
                               {
+                                "data-no-drag": true,
+                                onPointerDown: (e) => e.stopPropagation(),
                                 onMouseDown: header.getResizeHandler(),
                                 onTouchStart: header.getResizeHandler(),
                                 onDoubleClick: () => header.column.resetSize(),
@@ -2589,7 +2732,25 @@ function DataTable({
                         header.id
                       );
                     }) }, hg.id)) }),
-                    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: isLoading ? renderSkeleton(visibleLeafCount, pagination.pageSize) : rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: effectiveIsLoading ? renderSkeleton(visibleLeafCount, pagination.pageSize) : sourceError && rows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "td",
+                      {
+                        colSpan: visibleLeafCount,
+                        className: "h-32 text-center text-sm text-muted-foreground",
+                        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { children: labels.loadError }),
+                          effectiveOnRefresh && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx(
                       "td",
                       {
                         colSpan: visibleLeafCount,
@@ -2608,7 +2769,7 @@ function DataTable({
                   ]
                 }
               ),
-              isFetching && !isLoading && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "size-3 animate-spin" }),
                 " ",
                 labels.refreshing