@burdenoff/fluidgrids-fe-sdk 2026.1007.1 → 2026.1007.3

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

@@ -46,10 +46,10 @@ import { Icon } from '@iconify/react';
 import { ErrorBoundary } from '@burdenoff/fe-libs/shared/components';
 import '@xyflow/react/dist/style.css';
 import { Button } from '@burdenoff/fe-libs/button';
-import { Tabs, TabsList, TabsTrigger, TabsContent, Card, CardContent, CardHeader, CardTitle, Badge, Input, 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 { 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, Search, Table2, RefreshCw, 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,
@@ -2806,10 +2992,16 @@ function DataTablesPage() {
             tr("fluidgrids.dataTables.workflowData", "Workflow data")
           ] }),
           /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-text-primary sm:text-3xl", children: tr("fluidgrids.dataTables.pageTitle", "Data Tables") }),
-          /* @__PURE__ */ jsx("p", { className: "mt-1 max-w-2xl text-text-secondary", children: tr(
-            "fluidgrids.dataTables.pageSubtitle",
-            "Store structured workspace data that your workflows can read and write across runs."
-          ) })
+          /* @__PURE__ */ jsx(
+            PagePurpose,
+            {
+              icon: /* @__PURE__ */ jsx(Database, { className: "size-4", "aria-hidden": "true" }),
+              children: tr(
+                "fluidgrids.dataTables.pageSubtitle",
+                "Use Data Tables as lightweight persistent storage for workflow state, lookups, and records shared across runs."
+              )
+            }
+          )
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
           /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: () => navigate("../list"), children: [
@@ -2831,6 +3023,59 @@ function DataTablesPage() {
           )
         ] })
       ] }),
+      /* @__PURE__ */ jsx(
+        NextSteps,
+        {
+          storageKey: "data-tables",
+          title: tr(
+            "fluidgrids.dataTables.nextStepsTitle",
+            "How to use Data Tables"
+          ),
+          steps: [
+            {
+              id: "create",
+              label: tr(
+                "fluidgrids.dataTables.nextStepCreateLabel",
+                "Create a table"
+              ),
+              description: tr(
+                "fluidgrids.dataTables.nextStepCreateDescription",
+                "Define typed columns for the records your workflow needs."
+              ),
+              icon: /* @__PURE__ */ jsx(Plus, { className: "size-4", "aria-hidden": "true" }),
+              onClick: () => {
+                setEditingTable(null);
+                setTableDialogOpen(true);
+              }
+            },
+            {
+              id: "connect",
+              label: tr(
+                "fluidgrids.dataTables.nextStepConnectLabel",
+                "Connect it to a workflow"
+              ),
+              description: tr(
+                "fluidgrids.dataTables.nextStepConnectDescription",
+                "Add a Data Table node to get, insert, update, upsert, or delete rows."
+              ),
+              icon: /* @__PURE__ */ jsx(Table2, { className: "size-4", "aria-hidden": "true" }),
+              onClick: () => navigate("../list")
+            },
+            {
+              id: "reuse",
+              label: tr(
+                "fluidgrids.dataTables.nextStepReuseLabel",
+                "Reuse data across runs"
+              ),
+              description: tr(
+                "fluidgrids.dataTables.nextStepReuseDescription",
+                "Use saved status, cursors, lookups, and deduplication keys on later runs."
+              ),
+              icon: /* @__PURE__ */ jsx(RefreshCw, { className: "size-4", "aria-hidden": "true" })
+            }
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxs("div", { className: "grid gap-5 lg: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: [
@@ -2869,13 +3114,38 @@ function DataTablesPage() {
           ] }),
           /* @__PURE__ */ jsxs(CardContent, { className: "p-2", 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__ */ jsxs("div", { className: "p-4 text-sm text-text-secondary", children: [
-              /* @__PURE__ */ jsx("p", { children: tr("fluidgrids.dataTables.empty", "No data tables yet") }),
-              /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs", children: tr(
-                "fluidgrids.dataTables.emptyHint",
-                "Create a table to give your workflows a shared data store."
-              ) })
-            ] }),
+            !loading && tables.length === 0 && /* @__PURE__ */ jsx(
+              IllustratedEmptyState,
+              {
+                className: "py-8",
+                illustration: "onboarding",
+                title: tr(
+                  "fluidgrids.dataTables.empty",
+                  "Create your first Data Table"
+                ),
+                description: tr(
+                  "fluidgrids.dataTables.emptyHint",
+                  "Give your workflows a shared place to store typed records across runs."
+                ),
+                action: /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    size: "sm",
+                    onClick: () => {
+                      setEditingTable(null);
+                      setTableDialogOpen(true);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }),
+                      tr(
+                        "fluidgrids.dataTables.createFirstTable",
+                        "Create a table"
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
             !loading && tables.map((table) => /* @__PURE__ */ jsxs(
               "button",
               {
@@ -2941,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(