@burdenoff/fluidgrids-fe-sdk 2026.1007.2 → 2026.1007.4

package/dist/index.d.ts

@@ -777,7 +777,12 @@ declare function useDataTables(search?: string): {
     error: Error | null;
     refetch: () => Promise<void>;
 };
-declare function useDataTableRows(tableId: string | null): {
+interface DataTableRowsPaging {
+    /** Zero-based page index. */
+    page: number;
+    pageSize: number;
+}
+declare function useDataTableRows(tableId: string | null, paging: DataTableRowsPaging): {
     rows: DataTableRow$1[];
     total: number;
     loading: boolean;

package/dist/index.js

@@ -49,7 +49,7 @@ import { Button } from '@burdenoff/fe-libs/button';
 import { Tabs, TabsList, TabsTrigger, TabsContent, Card, CardContent, PagePurpose, NextSteps, CardHeader, CardTitle, Badge, Input, IllustratedEmptyState, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Label, Switch, CardDescription, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Textarea } from '@burdenoff/fe-libs/ui';
 import { toast } from 'sonner';
 import { gql } from '@apollo/client';
-import { ChevronRight, Check, Circle, Database, ArrowLeft, Plus, Table2, RefreshCw, Search, Pencil, Trash2, ChevronDown, ChevronUp, ArrowUpFromLine, ArrowDownToLine } from 'lucide-react';
+import { ChevronRight, Check, Circle, Database, ArrowLeft, Plus, Table2, RefreshCw, Search, ChevronDown, ChevronUp, Pencil, Trash2, ArrowUpFromLine, ArrowDownToLine, ChevronLeft } from 'lucide-react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
@@ -1745,7 +1745,38 @@ function useDataTables(search) {
   }, [fetchTables]);
   return { tables, total, loading, error, refetch: fetchTables };
 }
-function useDataTableRows(tableId) {
+var DATA_TABLE_MAX_PAGE_SIZE = 5e3;
+async function queryRowsPage(tableId, limit, offset) {
+  const result = throwIfResultError(
+    await getFluidGridsClient().query({
+      query: GET_DATA_TABLE_ROWS,
+      variables: { input: { tableId, limit, offset } },
+      fetchPolicy: "network-only"
+    })
+  );
+  const response = result.data?.dataTableRows;
+  return {
+    rows: response?.rows.map(toRow) ?? [],
+    total: response?.total ?? 0
+  };
+}
+async function fetchAllDataTableRows(tableId) {
+  const collected = [];
+  let total = Number.POSITIVE_INFINITY;
+  while (collected.length < total) {
+    const page = await queryRowsPage(
+      tableId,
+      DATA_TABLE_MAX_PAGE_SIZE,
+      collected.length
+    );
+    total = page.total;
+    if (page.rows.length === 0) break;
+    collected.push(...page.rows);
+  }
+  return collected;
+}
+function useDataTableRows(tableId, paging) {
+  const { page, pageSize } = paging;
   const [rows, setRows] = useState([]);
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(false);
@@ -1761,22 +1792,15 @@ function useDataTableRows(tableId) {
     setLoading(true);
     setError(null);
     try {
-      const result = throwIfResultError(
-        await getFluidGridsClient().query({
-          query: GET_DATA_TABLE_ROWS,
-          variables: { input: { tableId, limit: 5e3, offset: 0 } },
-          fetchPolicy: "network-only"
-        })
-      );
-      const response = result.data?.dataTableRows;
-      setRows(response?.rows.map(toRow) ?? []);
-      setTotal(response?.total ?? 0);
+      const response = await queryRowsPage(tableId, pageSize, page * pageSize);
+      setRows(response.rows);
+      setTotal(response.total);
     } catch (err) {
       setError(operationError(err, "Failed to load data table rows"));
     } finally {
       setLoading(false);
     }
-  }, [tableId]);
+  }, [tableId, page, pageSize]);
   useEffect(() => {
     void fetchRows();
   }, [fetchRows]);
@@ -2030,6 +2054,22 @@ function rowsToCsv(columns, rows) {
   );
   return [header, ...values].join("\r\n");
 }
+
+// src/modules/data-tables/utils/paging.ts
+var ROW_PAGE_SIZES = [50, 100, 250];
+var DEFAULT_ROW_PAGE_SIZE = ROW_PAGE_SIZES[0];
+function pageCount(total, pageSize) {
+  if (pageSize <= 0) return 1;
+  return Math.max(1, Math.ceil(total / pageSize));
+}
+function clampPage(page, total, pageSize) {
+  return Math.min(Math.max(page, 0), pageCount(total, pageSize) - 1);
+}
+function pageRange(page, pageSize, shown) {
+  if (shown <= 0) return { from: 0, to: 0 };
+  const from = page * pageSize + 1;
+  return { from, to: from + shown - 1 };
+}
 var COLUMN_TYPES = [
   "STRING",
   "NUMBER",
@@ -2440,15 +2480,35 @@ function RowFormDialog({
     ] })
   ] }) });
 }
-function TableRowsPanel({ table, onTableChanged }) {
+function TableRowsPanel({
+  table,
+  onTableChanged,
+  onEditTable,
+  onDeleteTable,
+  deletingTable
+}) {
   const tr = useTr();
-  const { rows, total, loading, error, refetch } = useDataTableRows(table.id);
+  const [page, setPage] = useState(0);
+  const [pageSize, setPageSize] = useState(DEFAULT_ROW_PAGE_SIZE);
+  const { rows, total, loading, error, refetch } = useDataTableRows(table.id, {
+    page,
+    pageSize
+  });
   const { deleteDataTableRows, loading: deleting } = useDeleteDataTableRows();
   const { insertDataTableRow } = useInsertDataTableRow();
   const [selectedIds, setSelectedIds] = useState(/* @__PURE__ */ new Set());
   const [rowDialogOpen, setRowDialogOpen] = useState(false);
   const [editingRow, setEditingRow] = useState(null);
+  const [exporting, setExporting] = useState(false);
+  const [importProgress, setImportProgress] = useState(null);
   const fileInputRef = useRef(null);
+  const pages = pageCount(total, pageSize);
+  const range = pageRange(page, pageSize, rows.length);
+  useEffect(() => {
+    if (loading) return;
+    const clamped = clampPage(page, total, pageSize);
+    if (clamped !== page) setPage(clamped);
+  }, [loading, page, pageSize, total]);
   useEffect(() => {
     setSelectedIds((current) => {
       const visible = new Set(rows.map((row) => row.id));
@@ -2488,43 +2548,68 @@ function TableRowsPanel({ table, onTableChanged }) {
       );
     }
   }, [deleteDataTableRows, onTableChanged, refetch, selectedIds, table.id, tr]);
-  const handleExport = useCallback(() => {
-    const csv = rowsToCsv(table.columns, rows);
-    const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
-    const url = URL.createObjectURL(blob);
-    const anchor = document.createElement("a");
-    anchor.href = url;
-    anchor.download = `${table.name}.csv`;
-    anchor.click();
-    URL.revokeObjectURL(url);
-    toast.success(
-      tr("fluidgrids.dataTables.exported", "Visible rows exported to CSV")
-    );
-  }, [rows, table.columns, table.name, tr]);
+  const handleExport = useCallback(async () => {
+    setExporting(true);
+    try {
+      const allRows = await fetchAllDataTableRows(table.id);
+      const csv = rowsToCsv(table.columns, allRows);
+      const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
+      const url = URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = `${table.name}.csv`;
+      anchor.click();
+      URL.revokeObjectURL(url);
+      toast.success(
+        tr(
+          "fluidgrids.dataTables.exported",
+          `${allRows.length} row(s) exported to CSV`
+        )
+      );
+    } catch (error2) {
+      toast.error(
+        describeOperationError(
+          error2,
+          tr("fluidgrids.dataTables.exportFailed", "Failed to export CSV")
+        )
+      );
+    } finally {
+      setExporting(false);
+    }
+  }, [table.columns, table.id, table.name, tr]);
   const handleImport = useCallback(
     async (event) => {
       const file = event.target.files?.[0];
       event.target.value = "";
       if (!file) return;
+      let inserted = 0;
       try {
         const importedRows = csvToRows(await file.text(), table.columns);
-        let inserted = 0;
+        setImportProgress({ done: 0, total: importedRows.length });
         for (const data of importedRows) {
           await insertDataTableRow(table.id, data);
           inserted += 1;
+          setImportProgress({ done: inserted, total: importedRows.length });
         }
         toast.success(
           tr("fluidgrids.dataTables.imported", `${inserted} row(s) imported`)
         );
-        await refetch();
-        onTableChanged();
       } catch (error2) {
+        const reason = describeOperationError(
+          error2,
+          tr("fluidgrids.dataTables.importFailed", "Failed to import CSV")
+        );
         toast.error(
-          describeOperationError(
-            error2,
-            tr("fluidgrids.dataTables.importFailed", "Failed to import CSV")
-          )
+          inserted > 0 ? tr(
+            "fluidgrids.dataTables.importPartial",
+            `Import stopped after ${inserted} row(s): ${reason}`
+          ) : reason
         );
+      } finally {
+        setImportProgress(null);
+        setPage(0);
+        await refetch();
+        onTableChanged();
       }
     },
     [insertDataTableRow, onTableChanged, refetch, table.columns, table.id, tr]
@@ -2538,14 +2623,14 @@ function TableRowsPanel({ table, onTableChanged }) {
     setRowDialogOpen(true);
   }, []);
   return /* @__PURE__ */ jsxs(Card, { className: "min-w-0 border-border-secondary", children: [
-    /* @__PURE__ */ jsxs(CardHeader, { className: "gap-3 border-b border-border-secondary p-4 sm:p-5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between", children: [
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ jsxs(CardHeader, { className: "gap-4 border-b border-border-secondary p-4 sm:p-5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 basis-64", children: [
           /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-lg", children: [
             /* @__PURE__ */ jsx(
               Table2,
               {
-                className: "size-5 text-text-secondary",
+                className: "size-5 shrink-0 text-text-secondary",
                 "aria-hidden": "true"
               }
             ),
@@ -2553,20 +2638,95 @@ function TableRowsPanel({ table, onTableChanged }) {
           ] }),
           /* @__PURE__ */ jsx(CardDescription, { className: "mt-1", children: table.description || tr("fluidgrids.dataTables.noDescription", "No description") })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-          /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: openNewRow, children: [
-            /* @__PURE__ */ jsx(Plus, { className: "mr-1.5 size-4", "aria-hidden": "true" }),
-            tr("fluidgrids.dataTables.addRow", "Add row")
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "whitespace-nowrap",
+              onClick: onEditTable,
+              children: [
+                /* @__PURE__ */ jsx(Pencil, { className: "mr-1.5 size-4", "aria-hidden": "true" }),
+                tr("fluidgrids.dataTables.editTable", "Edit table")
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "whitespace-nowrap",
+              onClick: onDeleteTable,
+              disabled: deletingTable,
+              children: [
+                /* @__PURE__ */ jsx(Trash2, { className: "mr-1.5 size-4", "aria-hidden": "true" }),
+                deletingTable ? tr("fluidgrids.dataTables.deleting", "Deleting\u2026") : tr("fluidgrids.dataTables.deleteTable", "Delete table")
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-text-secondary", children: [
+          /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
+            total,
+            " ",
+            tr("fluidgrids.dataTables.rows", "rows")
+          ] }),
+          /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
+            table.columns.length,
+            " ",
+            tr("fluidgrids.dataTables.columns", "columns")
           ] }),
+          /* @__PURE__ */ jsx(Badge, { variant: "outline", children: formatBytes(table.sizeBytes) }),
+          selectedIds.size > 0 && /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "whitespace-nowrap",
+              onClick: handleDeleteRows,
+              disabled: deleting,
+              children: [
+                /* @__PURE__ */ jsx(Trash2, { className: "mr-1.5 size-4", "aria-hidden": "true" }),
+                deleting ? tr("fluidgrids.dataTables.deleting", "Deleting\u2026") : tr(
+                  "fluidgrids.dataTables.deleteSelected",
+                  `Delete ${selectedIds.size} selected`
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "sm",
+              className: "whitespace-nowrap",
+              onClick: openNewRow,
+              disabled: importProgress !== null,
+              children: [
+                /* @__PURE__ */ jsx(Plus, { className: "mr-1.5 size-4", "aria-hidden": "true" }),
+                tr("fluidgrids.dataTables.addRow", "Add row")
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxs(
             Button,
             {
               variant: "outline",
               size: "sm",
+              className: "whitespace-nowrap",
               onClick: () => fileInputRef.current?.click(),
+              disabled: importProgress !== null,
               children: [
                 /* @__PURE__ */ jsx(ArrowUpFromLine, { className: "mr-1.5 size-4", "aria-hidden": "true" }),
-                tr("fluidgrids.dataTables.import", "Import CSV")
+                importProgress ? tr(
+                  "fluidgrids.dataTables.importing",
+                  `Importing ${importProgress.done} / ${importProgress.total}\u2026`
+                ) : tr("fluidgrids.dataTables.import", "Import CSV")
               ]
             }
           ),
@@ -2585,44 +2745,16 @@ function TableRowsPanel({ table, onTableChanged }) {
             {
               variant: "outline",
               size: "sm",
+              className: "whitespace-nowrap",
               onClick: handleExport,
-              disabled: rows.length === 0,
+              disabled: total === 0 || exporting,
               children: [
                 /* @__PURE__ */ jsx(ArrowDownToLine, { className: "mr-1.5 size-4", "aria-hidden": "true" }),
-                tr("fluidgrids.dataTables.export", "Export CSV")
+                exporting ? tr("fluidgrids.dataTables.exporting", "Exporting\u2026") : tr("fluidgrids.dataTables.export", "Export CSV")
               ]
             }
           )
         ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-text-secondary", children: [
-        /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
-          total,
-          " ",
-          tr("fluidgrids.dataTables.rows", "rows")
-        ] }),
-        /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
-          table.columns.length,
-          " ",
-          tr("fluidgrids.dataTables.columns", "columns")
-        ] }),
-        /* @__PURE__ */ jsx(Badge, { variant: "outline", children: formatBytes(table.sizeBytes) }),
-        selectedIds.size > 0 && /* @__PURE__ */ jsxs(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            onClick: handleDeleteRows,
-            disabled: deleting,
-            children: [
-              /* @__PURE__ */ jsx(Trash2, { className: "mr-1.5 size-4", "aria-hidden": "true" }),
-              deleting ? tr("fluidgrids.dataTables.deleting", "Deleting\u2026") : tr(
-                "fluidgrids.dataTables.deleteSelected",
-                `Delete ${selectedIds.size} selected`
-              )
-            ]
-          }
-        )
       ] })
     ] }),
     /* @__PURE__ */ jsxs(CardContent, { className: "p-0", children: [
@@ -2637,7 +2769,7 @@ function TableRowsPanel({ table, onTableChanged }) {
               onChange: toggleAll,
               "aria-label": tr(
                 "fluidgrids.dataTables.selectAll",
-                "Select all rows"
+                "Select all rows on this page"
               )
             }
           ) }),
@@ -2710,10 +2842,64 @@ function TableRowsPanel({ table, onTableChanged }) {
           ] }, row.id))
         ] })
       ] }) }),
-      total > rows.length && !loading && /* @__PURE__ */ jsx("p", { className: "border-t border-border-secondary px-4 py-3 text-xs text-text-secondary", children: tr(
-        "fluidgrids.dataTables.rowLimitNote",
-        "Showing the first 5,000 rows. Use workflow filters for larger tables."
-      ) })
+      total > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-t border-border-secondary px-4 py-3 text-xs text-text-secondary", children: [
+        /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: tr(
+          "fluidgrids.dataTables.showingRange",
+          `Showing ${range.from}\u2013${range.to} of ${total}`
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { children: tr("fluidgrids.dataTables.rowsPerPage", "Rows per page") }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: "h-8 rounded-md border border-input bg-background px-2 text-xs text-text-primary",
+                value: pageSize,
+                onChange: (event) => {
+                  setPageSize(Number(event.target.value));
+                  setPage(0);
+                },
+                children: ROW_PAGE_SIZES.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("span", { children: tr(
+            "fluidgrids.dataTables.pageOf",
+            `Page ${page + 1} of ${pages}`
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "icon",
+                className: "size-8",
+                onClick: () => setPage((current) => Math.max(current - 1, 0)),
+                disabled: page === 0 || loading,
+                title: tr("fluidgrids.dataTables.prevPage", "Previous page"),
+                "aria-label": tr(
+                  "fluidgrids.dataTables.prevPage",
+                  "Previous page"
+                ),
+                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "outline",
+                size: "icon",
+                className: "size-8",
+                onClick: () => setPage((current) => Math.min(current + 1, pages - 1)),
+                disabled: page >= pages - 1 || loading,
+                title: tr("fluidgrids.dataTables.nextPage", "Next page"),
+                "aria-label": tr("fluidgrids.dataTables.nextPage", "Next page"),
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+              }
+            )
+          ] })
+        ] })
+      ] })
     ] }),
     /* @__PURE__ */ jsx(
       RowFormDialog,
@@ -2890,7 +3076,7 @@ function DataTablesPage() {
           ]
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "grid gap-5 lg:grid-cols-[minmax(16rem,22rem)_minmax(0,1fr)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "grid gap-5 xl:grid-cols-[minmax(16rem,22rem)_minmax(0,1fr)]", children: [
         /* @__PURE__ */ jsxs(Card, { className: "h-fit border-border-secondary", children: [
           /* @__PURE__ */ jsxs(CardHeader, { className: "gap-3 border-b border-border-secondary p-4", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
@@ -2926,7 +3112,7 @@ function DataTablesPage() {
               /* @__PURE__ */ jsx(Button, { type: "submit", variant: "outline", size: "sm", children: tr("fluidgrids.dataTables.searchAction", "Search") })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs(CardContent, { className: "p-2", children: [
+          /* @__PURE__ */ jsxs(CardContent, { className: "max-h-72 overflow-y-auto p-2 xl:max-h-[36rem]", children: [
             loading && /* @__PURE__ */ jsx("p", { className: "p-4 text-sm text-text-secondary", children: tr("fluidgrids.dataTables.loading", "Loading tables\u2026") }),
             !loading && tables.length === 0 && /* @__PURE__ */ jsx(
               IllustratedEmptyState,
@@ -3025,39 +3211,20 @@ function DataTablesPage() {
             "Choose a table to view and edit its rows, or create your first table."
           ) })
         ] }) }),
-        selectedTable && /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap justify-end gap-2", children: [
-            /* @__PURE__ */ jsxs(
-              Button,
-              {
-                variant: "outline",
-                size: "sm",
-                onClick: () => {
-                  setEditingTable(selectedTable);
-                  setTableDialogOpen(true);
-                },
-                children: [
-                  /* @__PURE__ */ jsx(Pencil, { className: "mr-1.5 size-4", "aria-hidden": "true" }),
-                  tr("fluidgrids.dataTables.editTable", "Edit table")
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              Button,
-              {
-                variant: "outline",
-                size: "sm",
-                onClick: handleDeleteTable,
-                disabled: deleting,
-                children: [
-                  /* @__PURE__ */ jsx(Trash2, { className: "mr-1.5 size-4", "aria-hidden": "true" }),
-                  deleting ? tr("fluidgrids.dataTables.deleting", "Deleting\u2026") : tr("fluidgrids.dataTables.deleteTable", "Delete table")
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(TableRowsPanel, { table: selectedTable, onTableChanged: refresh })
-        ] })
+        selectedTable && /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx(
+          TableRowsPanel,
+          {
+            table: selectedTable,
+            onTableChanged: refresh,
+            onEditTable: () => {
+              setEditingTable(selectedTable);
+              setTableDialogOpen(true);
+            },
+            onDeleteTable: handleDeleteTable,
+            deletingTable: deleting
+          },
+          selectedTable.id
+        ) })
       ] })
     ] }),
     /* @__PURE__ */ jsx(