feat: add pagination to TableView (#83)

qwerty7878 · web-flow · commit d7fca877de87 · 2026-05-27T17:53:21.000+05:30
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -86,6 +86,9 @@ export default function App() {
   const [filters, setFilters] = useState<Record<string, string>>({});
   const [schemaReloadKey, setSchemaReloadKey] = useState(0);
   const [maskSensitive, setMaskSensitive] = useState(false);
+  const [page, setPage] = useState(0);
+  const [pageSize] = useState(200);
+  const [hasNextPage, setHasNextPage] = useState(false);
 
   // Apply theme & mode to <body>
   useEffect(() => {
@@ -218,21 +221,25 @@ export default function App() {
       sField?: string,
       sOrder?: "asc" | "desc",
       currentFilters?: Record<string, string>,
+      targetPage?: number,
     ) => {
       const dbToUse = targetDbId || activeDbId;
       if (targetDbId && targetDbId !== activeDbId) {
         setActiveDbId(targetDbId);
         await loadDatabaseMetadata(targetDbId);
       }
 
+      const resolvedPage = targetPage ?? 0;
+
       setAppMode("table");
       setCurrentTable(name);
       setData([]);
       setLoading(true);
       setError("");
 
       try {
-        let url = `/api/data/${encodeURIComponent(name)}?dbId=${dbToUse}&limit=200`;
+        const offset = resolvedPage * pageSize;
+        let url = `/api/data/${encodeURIComponent(name)}?dbId=${dbToUse}&limit=${pageSize}&offset=${offset}`;
         if (sField) {
           url += `&sortBy=${encodeURIComponent(sField)}&sortOrder=${sOrder || "asc"}`;
         }
@@ -244,8 +251,17 @@ export default function App() {
         const payload = await res.json();
         if (!res.ok)
           throw new Error(payload.error || "Failed to load table data.");
-        setData(payload.data || []);
-        showStatus(`Loaded ${(payload.data || []).length} records`);
+        const rows: Record<string, unknown>[] = payload.data || [];
+        setData(rows);
+        setPage(resolvedPage);
+        setHasNextPage(rows.length === pageSize);
+        const startRow = offset + 1;
+        const endRow = offset + rows.length;
+        showStatus(
+          rows.length > 0
+            ? `Page ${resolvedPage + 1} · Rows ${startRow}–${endRow}`
+            : "No records found",
+        );
       } catch (err: unknown) {
         const msg = err instanceof Error ? err.message : "Unknown error";
         showStatus(msg, true);
@@ -254,7 +270,7 @@ export default function App() {
         setLoading(false);
       }
     },
-    [activeDbId],
+    [activeDbId, pageSize],
   );
 
   const openQueryWorkspace = useCallback(() => {
@@ -280,7 +296,7 @@ export default function App() {
     if (appMode === "overview") {
       loadOverview();
     } else if (currentTable) {
-      loadTable(currentTable);
+      loadTable(currentTable, activeDbId, sortBy, sortOrder, filters, 0);
     } else if (appMode === "schema") {
       setSchemaReloadKey((k) => k + 1);
     }
@@ -349,16 +365,36 @@ export default function App() {
           sortBy={sortBy}
           sortOrder={sortOrder}
           filters={filters}
+          page={page}
+          pageSize={pageSize}
+          hasNextPage={hasNextPage}
           onSort={(field) => {
             const nextOrder =
               sortBy === field && sortOrder === "asc" ? "desc" : "asc";
             setSortBy(field);
             setSortOrder(nextOrder);
-            loadTable(currentTable, activeDbId, field, nextOrder, filters);
+            loadTable(currentTable, activeDbId, field, nextOrder, filters, 0);
           }}
           onFilterChange={(newFilters) => {
             setFilters(newFilters);
-            loadTable(currentTable, activeDbId, sortBy, sortOrder, newFilters);
+            loadTable(
+              currentTable,
+              activeDbId,
+              sortBy,
+              sortOrder,
+              newFilters,
+              0,
+            );
+          }}
+          onPageChange={(newPage) => {
+            loadTable(
+              currentTable,
+              activeDbId,
+              sortBy,
+              sortOrder,
+              filters,
+              newPage,
+            );
           }}
         />
       );
diff --git a/frontend/src/components/views/TableView.tsx b/frontend/src/components/views/TableView.tsx
@@ -37,6 +37,10 @@ interface TableViewProps {
   onSort?: (col: string) => void;
   onFilterChange?: (filters: Record<string, string>) => void;
   maskSensitive?: boolean;
+  page?: number;
+  pageSize?: number;
+  hasNextPage?: boolean;
+  onPageChange?: (page: number) => void;
 }
 
 const escapeHtml = (value: unknown): string => {
@@ -59,6 +63,10 @@ export default function TableView({
   onSort,
   onFilterChange,
   maskSensitive = false,
+  page = 0,
+  pageSize = 200,
+  hasNextPage = false,
+  onPageChange,
 }: TableViewProps) {
   const [localFilters, setLocalFilters] =
     useState<Record<string, string>>(filters);
@@ -295,6 +303,73 @@ export default function TableView({
           </tbody>
         </table>
       </div>
+      {/* Pagination footer */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "0.6rem 1rem",
+          borderTop: "1px solid var(--border)",
+          background: "var(--surface)",
+          fontSize: "0.8rem",
+          color: "var(--text-dim)",
+          userSelect: "none",
+          flexShrink: 0,
+        }}
+      >
+        <button
+          className="icon-btn"
+          onClick={() => onPageChange?.(page - 1)}
+          disabled={page === 0}
+          type="button"
+          aria-label="Previous page"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "4px 12px",
+            fontSize: "0.8rem",
+            opacity: page === 0 ? 0.35 : 1,
+            cursor: page === 0 ? "not-allowed" : "pointer",
+          }}
+        >
+          ← Previous
+        </button>
+
+        <span style={{ fontFamily: "var(--font-mono)", fontSize: "0.78rem" }}>
+          {rows.length > 0 ? (
+            <>
+              Page <strong style={{ color: "var(--text)" }}>{page + 1}</strong>
+              &nbsp;·&nbsp; Rows{" "}
+              <strong style={{ color: "var(--text)" }}>
+                {page * pageSize + 1}–{page * pageSize + rows.length}
+              </strong>
+            </>
+          ) : (
+            "No records"
+          )}
+        </span>
+
+        <button
+          className="icon-btn"
+          onClick={() => onPageChange?.(page + 1)}
+          disabled={!hasNextPage}
+          type="button"
+          aria-label="Next page"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "4px 12px",
+            fontSize: "0.8rem",
+            opacity: !hasNextPage ? 0.35 : 1,
+            cursor: !hasNextPage ? "not-allowed" : "pointer",
+          }}
+        >
+          Next →
+        </button>
+      </div>
     </div>
   );
 }
