@izumisy-tailor/tailor-data-viewer 0.2.13 → 0.2.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.2.13",
+  "version": "0.2.15",
   "type": "module",
   "description": "Flexible data viewer component for Tailor Platform",
   "files": [

package/src/component/collection/use-collection.test.ts

@@ -243,7 +243,7 @@ describe("useCollection", () => {
   // Pagination operations
   // ---------------------------------------------------------------------------
   describe("pagination operations", () => {
-    it("navigates to next page", () => {
+    it("navigates to next page (forward)", () => {
       const { result } = renderHook(() => useCollection({ query: FAKE_QUERY }));
 
       act(() => {
@@ -251,54 +251,75 @@ describe("useCollection", () => {
       });
 
       expect(result.current.cursor).toBe("cursor1");
-      expect(result.current.hasPrevPage).toBe(true);
+      expect(result.current.paginationDirection).toBe("forward");
       expect(result.current.toQueryArgs().variables.after).toBe("cursor1");
+      expect(result.current.toQueryArgs().variables.first).toBe(20);
+      expect(result.current.toQueryArgs().variables.last).toBeUndefined();
+      expect(result.current.toQueryArgs().variables.before).toBeUndefined();
     });
 
-    it("navigates back to previous page", () => {
+    it("navigates to previous page (backward)", () => {
       const { result } = renderHook(() => useCollection({ query: FAKE_QUERY }));
 
       act(() => {
-        result.current.nextPage("cursor1");
-      });
-      act(() => {
-        result.current.nextPage("cursor2");
-      });
-      act(() => {
-        result.current.prevPage();
+        result.current.prevPage("cursor1");
       });
 
       expect(result.current.cursor).toBe("cursor1");
-      expect(result.current.hasPrevPage).toBe(true);
+      expect(result.current.paginationDirection).toBe("backward");
+      expect(result.current.toQueryArgs().variables.before).toBe("cursor1");
+      expect(result.current.toQueryArgs().variables.last).toBe(20);
+      expect(result.current.toQueryArgs().variables.first).toBeUndefined();
+      expect(result.current.toQueryArgs().variables.after).toBeUndefined();
     });
 
-    it("navigates back to first page", () => {
+    it("switches direction on nextPage after prevPage", () => {
       const { result } = renderHook(() => useCollection({ query: FAKE_QUERY }));
 
       act(() => {
-        result.current.nextPage("cursor1");
+        result.current.prevPage("cursorB");
       });
+      expect(result.current.paginationDirection).toBe("backward");
+
       act(() => {
-        result.current.prevPage();
+        result.current.nextPage("cursorA");
       });
-
-      expect(result.current.cursor).toBeNull();
-      expect(result.current.hasPrevPage).toBe(false);
+      expect(result.current.paginationDirection).toBe("forward");
+      expect(result.current.toQueryArgs().variables.after).toBe("cursorA");
+      expect(result.current.toQueryArgs().variables.first).toBe(20);
     });
 
-    it("resets page", () => {
+    it("resets page to forward direction", () => {
       const { result } = renderHook(() => useCollection({ query: FAKE_QUERY }));
 
       act(() => {
-        result.current.nextPage("cursor1");
-        result.current.nextPage("cursor2");
+        result.current.prevPage("cursor1");
       });
       act(() => {
         result.current.resetPage();
       });
 
       expect(result.current.cursor).toBeNull();
+      expect(result.current.paginationDirection).toBe("forward");
+    });
+
+    it("tracks hasPrevPage and hasNextPage from setPageInfo", () => {
+      const { result } = renderHook(() => useCollection({ query: FAKE_QUERY }));
+
       expect(result.current.hasPrevPage).toBe(false);
+      expect(result.current.hasNextPage).toBe(false);
+
+      act(() => {
+        result.current.setPageInfo({
+          hasNextPage: true,
+          endCursor: "end",
+          hasPreviousPage: true,
+          startCursor: "start",
+        });
+      });
+
+      expect(result.current.hasPrevPage).toBe(true);
+      expect(result.current.hasNextPage).toBe(true);
     });
   });
 
@@ -346,6 +367,8 @@ describe("useCollection", () => {
       expect("query" in variables).toBe(false);
       expect("order" in variables).toBe(false);
       expect("after" in variables).toBe(false);
+      expect("last" in variables).toBe(false);
+      expect("before" in variables).toBe(false);
     });
 
     it("includes query in toQueryArgs result", () => {

package/src/component/collection/use-collection.ts

@@ -4,14 +4,33 @@ import type {
   Filter,
   FilterOperator,
   MetadataFilter,
+  PageInfo,
   QueryVariables,
   SortState,
   UseCollectionOptions,
   UseCollectionReturn,
+  ExtractQueryVariables,
   ValidateCollectionQuery,
 } from "../types";
 import type { FieldName, OrderableFieldName } from "../types";
 
+/**
+ * Resolves the variables type for `toQueryArgs()` return value.
+ *
+ * When the query document carries gql-tada type information
+ * (`ExtractQueryVariables` resolves to a concrete type), uses that type
+ * so the result is directly compatible with `useQuery()` from urql.
+ * Otherwise falls back to `QueryVariables`.
+ *
+ * Note: The runtime value is always `QueryVariables`, but the gql-tada
+ * variables type is structurally compatible (a supertype), so the cast
+ * is safe.
+ */
+type ResolveVariables<TQuery> =
+  ExtractQueryVariables<TQuery> extends never
+    ? QueryVariables
+    : ExtractQueryVariables<TQuery>;
+
 // -----------------------------------------------------------------------------
 // Overload signatures
 // -----------------------------------------------------------------------------
@@ -57,7 +76,7 @@ export function useCollection<
   FieldName<TMetadata, TTableName>,
   {
     query: TQuery;
-    variables: QueryVariables;
+    variables: ResolveVariables<TQuery>;
   },
   MetadataFilter<TMetadata, TTableName>
 >;
@@ -83,7 +102,10 @@ export function useCollection<TQuery>(
     metadata?: never;
     tableName?: never;
   },
-): UseCollectionReturn<string, { query: TQuery; variables: QueryVariables }>;
+): UseCollectionReturn<
+  string,
+  { query: TQuery; variables: ResolveVariables<TQuery> }
+>;
 
 // -----------------------------------------------------------------------------
 // Implementation
@@ -109,7 +131,15 @@ export function useCollection(
   const [sortStates, setSortStates] = useState<SortState[]>(initialSort);
   const [pageSize] = useState(initialPageSize);
   const [cursor, setCursor] = useState<string | null>(null);
-  const [cursorHistory, setCursorHistory] = useState<string[]>([]);
+  const [paginationDirection, setPaginationDirection] = useState<
+    "forward" | "backward"
+  >("forward");
+  const [currentPageInfo, setCurrentPageInfo] = useState<PageInfo>({
+    hasNextPage: false,
+    endCursor: null,
+    hasPreviousPage: false,
+    startCursor: null,
+  });
 
   // ---------------------------------------------------------------------------
   // Filter operations
@@ -132,7 +162,7 @@ export function useCollection(
       });
       // Reset pagination when filters change
       setCursor(null);
-      setCursorHistory([]);
+      setPaginationDirection("forward");
     },
     [],
   );
@@ -141,20 +171,20 @@ export function useCollection(
     setFiltersState(newFilters);
     // Reset pagination when filters change
     setCursor(null);
-    setCursorHistory([]);
+    setPaginationDirection("forward");
   }, []);
 
   const removeFilter = useCallback((field: string) => {
     setFiltersState((prev) => prev.filter((f) => f.field !== field));
     // Reset pagination when filters change
     setCursor(null);
-    setCursorHistory([]);
+    setPaginationDirection("forward");
   }, []);
 
   const clearFilters = useCallback(() => {
     setFiltersState([]);
     setCursor(null);
-    setCursorHistory([]);
+    setPaginationDirection("forward");
   }, []);
 
   // ---------------------------------------------------------------------------
@@ -173,7 +203,7 @@ export function useCollection(
       });
       // Reset pagination when sort changes
       setCursor(null);
-      setCursorHistory([]);
+      setPaginationDirection("forward");
     },
     [],
   );
@@ -181,45 +211,52 @@ export function useCollection(
   const clearSort = useCallback(() => {
     setSortStates([]);
     setCursor(null);
-    setCursorHistory([]);
+    setPaginationDirection("forward");
   }, []);
 
   // ---------------------------------------------------------------------------
   // Pagination operations
   // ---------------------------------------------------------------------------
-  const nextPage = useCallback(
-    (endCursor: string) => {
-      setCursorHistory((prev) => [...prev, cursor ?? ""]);
-      setCursor(endCursor);
-    },
-    [cursor],
-  );
+  const nextPage = useCallback((endCursor: string) => {
+    setCursor(endCursor);
+    setPaginationDirection("forward");
+  }, []);
 
-  const prevPage = useCallback(() => {
-    setCursorHistory((prev) => {
-      const newHistory = [...prev];
-      const previousCursor = newHistory.pop();
-      setCursor(
-        previousCursor && previousCursor !== "" ? previousCursor : null,
-      );
-      return newHistory;
-    });
+  const prevPage = useCallback((startCursor: string) => {
+    setCursor(startCursor);
+    setPaginationDirection("backward");
   }, []);
 
   const resetPage = useCallback(() => {
     setCursor(null);
-    setCursorHistory([]);
+    setPaginationDirection("forward");
+  }, []);
+
+  const setPageInfo = useCallback((pageInfo: PageInfo) => {
+    setCurrentPageInfo(pageInfo);
   }, []);
 
-  const hasPrevPage = cursorHistory.length > 0;
+  const hasPrevPage = currentPageInfo.hasPreviousPage;
+  const hasNextPage = currentPageInfo.hasNextPage;
 
   // ---------------------------------------------------------------------------
   // Build query variables (Tailor Platform format)
   // ---------------------------------------------------------------------------
   const variables = useMemo<QueryVariables>(() => {
-    const vars: QueryVariables = {
-      first: pageSize,
-    };
+    const vars: QueryVariables = {};
+
+    // Pagination direction determines first/after vs last/before
+    if (paginationDirection === "forward") {
+      vars.first = pageSize;
+      if (cursor) {
+        vars.after = cursor;
+      }
+    } else {
+      vars.last = pageSize;
+      if (cursor) {
+        vars.before = cursor;
+      }
+    }
 
     // Build query (filters)
     if (filters.length > 0) {
@@ -238,13 +275,8 @@ export function useCollection(
       }));
     }
 
-    // Cursor
-    if (cursor) {
-      vars.after = cursor;
-    }
-
     return vars;
-  }, [filters, sortStates, pageSize, cursor]);
+  }, [filters, sortStates, pageSize, cursor, paginationDirection]);
 
   // ---------------------------------------------------------------------------
   // toQueryArgs
@@ -270,9 +302,12 @@ export function useCollection(
     clearSort,
     pageSize,
     cursor,
+    paginationDirection,
     nextPage,
     prevPage,
     resetPage,
     hasPrevPage,
+    hasNextPage,
+    setPageInfo,
   };
 }

package/src/component/collection/use-collection.typetest.ts

@@ -34,6 +34,8 @@ type FakeDoc<Variables> = {
 type DocOk = FakeDoc<{
   first?: number | null;
   after?: string | null;
+  last?: number | null;
+  before?: string | null;
   query?: { name?: unknown } | null;
   order?: readonly { field?: "name" | null }[] | null;
 }>;
@@ -44,12 +46,80 @@ export const assert1: Assert1 = true;
 // ❌ Query missing $first should fail
 type DocNoFirst = FakeDoc<{
   after?: string | null;
+  last?: number | null;
+  before?: string | null;
   query?: { name?: unknown } | null;
+  order?: readonly { field?: "name" | null }[] | null;
 }>;
 type Fail1 = ValidateCollectionQuery<DocNoFirst, "name">;
 type AssertFail1 = HasCollectionQueryError<Fail1> extends true ? true : never;
 export const assertFail1: AssertFail1 = true;
 
+// ❌ Query missing $after should fail
+type DocNoAfter = FakeDoc<{
+  first?: number | null;
+  last?: number | null;
+  before?: string | null;
+  query?: { name?: unknown } | null;
+  order?: readonly { field?: "name" | null }[] | null;
+}>;
+type FailNoAfter = ValidateCollectionQuery<DocNoAfter, "name">;
+type AssertFailNoAfter =
+  HasCollectionQueryError<FailNoAfter> extends true ? true : never;
+export const assertFailNoAfter: AssertFailNoAfter = true;
+
+// ❌ Query missing $last should fail
+type DocNoLast = FakeDoc<{
+  first?: number | null;
+  after?: string | null;
+  before?: string | null;
+  query?: { name?: unknown } | null;
+  order?: readonly { field?: "name" | null }[] | null;
+}>;
+type FailNoLast = ValidateCollectionQuery<DocNoLast, "name">;
+type AssertFailNoLast =
+  HasCollectionQueryError<FailNoLast> extends true ? true : never;
+export const assertFailNoLast: AssertFailNoLast = true;
+
+// ❌ Query missing $before should fail
+type DocNoBefore = FakeDoc<{
+  first?: number | null;
+  after?: string | null;
+  last?: number | null;
+  query?: { name?: unknown } | null;
+  order?: readonly { field?: "name" | null }[] | null;
+}>;
+type FailNoBefore = ValidateCollectionQuery<DocNoBefore, "name">;
+type AssertFailNoBefore =
+  HasCollectionQueryError<FailNoBefore> extends true ? true : never;
+export const assertFailNoBefore: AssertFailNoBefore = true;
+
+// ❌ Query missing $query should fail
+type DocNoQuery = FakeDoc<{
+  first?: number | null;
+  after?: string | null;
+  last?: number | null;
+  before?: string | null;
+  order?: readonly { field?: "name" | null }[] | null;
+}>;
+type FailNoQuery = ValidateCollectionQuery<DocNoQuery, "name">;
+type AssertFailNoQuery =
+  HasCollectionQueryError<FailNoQuery> extends true ? true : never;
+export const assertFailNoQuery: AssertFailNoQuery = true;
+
+// ❌ Query missing $order should fail
+type DocNoOrder = FakeDoc<{
+  first?: number | null;
+  after?: string | null;
+  last?: number | null;
+  before?: string | null;
+  query?: { name?: unknown } | null;
+}>;
+type FailNoOrder = ValidateCollectionQuery<DocNoOrder, "name">;
+type AssertFailNoOrder =
+  HasCollectionQueryError<FailNoOrder> extends true ? true : never;
+export const assertFailNoOrder: AssertFailNoOrder = true;
+
 // =============================================================================
 // 2. OrderInput field compatibility
 // =============================================================================
@@ -57,6 +127,10 @@ export const assertFail1: AssertFail1 = true;
 // ❌ Metadata has "name" | "email" but OrderInput only allows "name"
 type DocNarrowOrder = FakeDoc<{
   first?: number | null;
+  after?: string | null;
+  last?: number | null;
+  before?: string | null;
+  query?: { name?: unknown; email?: unknown } | null;
   order?: readonly { field?: "name" | null }[] | null;
 }>;
 type Fail2 = ValidateCollectionQuery<DocNarrowOrder, "name" | "email">;
@@ -66,6 +140,10 @@ export const assertFail2: AssertFail2 = true;
 // ✅ OrderInput allows all metadata fields
 type DocWideOrder = FakeDoc<{
   first?: number | null;
+  after?: string | null;
+  last?: number | null;
+  before?: string | null;
+  query?: { name?: unknown; email?: unknown } | null;
   order?: readonly { field?: "name" | "email" | "phone" | null }[] | null;
 }>;
 type Pass2 = ValidateCollectionQuery<DocWideOrder, "name" | "email">;
@@ -79,6 +157,9 @@ export const assertPass2: AssertPass2 = true;
 // ❌ Metadata has "name" | "phone" but QueryInput only has "name"
 type DocNarrowQuery = FakeDoc<{
   first?: number | null;
+  after?: string | null;
+  last?: number | null;
+  before?: string | null;
   query?: { name?: unknown } | null;
   order?: readonly { field?: "name" | "phone" | null }[] | null;
 }>;
@@ -89,6 +170,9 @@ export const assertFail3: AssertFail3 = true;
 // ✅ QueryInput has all metadata fields
 type DocWideQuery = FakeDoc<{
   first?: number | null;
+  after?: string | null;
+  last?: number | null;
+  before?: string | null;
   query?: { name?: unknown; phone?: unknown; email?: unknown } | null;
   order?: readonly { field?: "name" | "phone" | "email" | null }[] | null;
 }>;
@@ -100,20 +184,33 @@ export const assertPass3: AssertPass3 = true;
 // 4. Variable name typo detection
 // =============================================================================
 
-// Query uses $filter instead of $query (typo) — no $query key in variables.
-// With metadata, there is no "query" key so QueryInput check is skipped.
-// But if the order is also correct, this particular typo would not be caught
-// at the useCollection level. It WILL be caught when spreading into useQuery()
-// because urql checks that variables match the document.
+// ❌ Query uses $filter instead of $query (typo) — now caught because $query
+// is required.
 type DocFilterTypo = FakeDoc<{
   first?: number | null;
+  after?: string | null;
+  last?: number | null;
+  before?: string | null;
   filter?: { name?: unknown } | null;
   order?: readonly { field?: "name" | null }[] | null;
 }>;
 type Typo1 = ValidateCollectionQuery<DocFilterTypo, "name">;
-type AssertTypo1 = HasCollectionQueryError<Typo1> extends true ? never : true;
+type AssertTypo1 = HasCollectionQueryError<Typo1> extends true ? true : never;
 export const assertTypo1: AssertTypo1 = true;
 
+// ❌ Query uses $queryy instead of $query (typo) — now caught
+type DocQueryTypo = FakeDoc<{
+  first?: number | null;
+  after?: string | null;
+  last?: number | null;
+  before?: string | null;
+  queryy?: { name?: unknown } | null;
+  order?: readonly { field?: "name" | null }[] | null;
+}>;
+type Typo2 = ValidateCollectionQuery<DocQueryTypo, "name">;
+type AssertTypo2 = HasCollectionQueryError<Typo2> extends true ? true : never;
+export const assertTypo2: AssertTypo2 = true;
+
 // =============================================================================
 // 5. No gql-tada (plain DocumentNode) — all checks skipped
 // =============================================================================
@@ -124,13 +221,26 @@ type AssertPass5 = HasCollectionQueryError<Pass5> extends true ? never : true;
 export const assertPass5: AssertPass5 = true;
 
 // =============================================================================
-// 6. No metadata (string field names) — field-level checks skipped
+// 6. No metadata (string field names) — field-level checks skipped but
+//    variable existence is still required
 // =============================================================================
 
 type Pass6 = ValidateCollectionQuery<DocOk>;
 type AssertPass6 = HasCollectionQueryError<Pass6> extends true ? never : true;
 export const assertPass6: AssertPass6 = true;
 
+// ❌ No metadata but missing $query — still fails
+type DocNoMetaNoQuery = FakeDoc<{
+  first?: number | null;
+  after?: string | null;
+  last?: number | null;
+  before?: string | null;
+  order?: readonly { field?: "name" | null }[] | null;
+}>;
+type Fail6 = ValidateCollectionQuery<DocNoMetaNoQuery>;
+type AssertFail6 = HasCollectionQueryError<Fail6> extends true ? true : never;
+export const assertFail6: AssertFail6 = true;
+
 // =============================================================================
 // 7. Helper type tests
 // =============================================================================
@@ -150,36 +260,45 @@ export const qk1: QIKeys1 = "name";
 export const qk2: QIKeys1 = "email";
 
 // =============================================================================
-// 8. Mixed: $order present but no $query — only OrderInput checked
+// 8. Missing $query — now fails (previously was "Mixed: $order only")
 // =============================================================================
 
-// ✅ No $query, order fields match
+// ❌ Missing $query variable
 type DocOrderOnly = FakeDoc<{
   first?: number | null;
+  after?: string | null;
+  last?: number | null;
+  before?: string | null;
   order?: readonly { field?: "name" | "email" | null }[] | null;
 }>;
-type Pass8 = ValidateCollectionQuery<DocOrderOnly, "name" | "email">;
-type AssertPass8 = HasCollectionQueryError<Pass8> extends true ? never : true;
-export const assertPass8: AssertPass8 = true;
+type Fail8 = ValidateCollectionQuery<DocOrderOnly, "name" | "email">;
+type AssertFail8 = HasCollectionQueryError<Fail8> extends true ? true : never;
+export const assertFail8: AssertFail8 = true;
 
 // =============================================================================
-// 9. Mixed: $query present but no $order — only QueryInput checked
+// 9. Missing $order — now fails (previously was "Mixed: $query only")
 // =============================================================================
 
-// ✅ No $order, query keys match
+// ❌ Missing $order variable
 type DocQueryOnly = FakeDoc<{
   first?: number | null;
+  after?: string | null;
+  last?: number | null;
+  before?: string | null;
   query?: { name?: unknown; email?: unknown } | null;
 }>;
-type Pass9 = ValidateCollectionQuery<DocQueryOnly, "name" | "email">;
-type AssertPass9 = HasCollectionQueryError<Pass9> extends true ? never : true;
-export const assertPass9: AssertPass9 = true;
+type Fail9 = ValidateCollectionQuery<DocQueryOnly, "name" | "email">;
+type AssertFail9 = HasCollectionQueryError<Fail9> extends true ? true : never;
+export const assertFail9: AssertFail9 = true;
 
-// ❌ No $order, but query keys don't cover metadata fields
+// ❌ Missing $order, and query keys don't cover metadata fields
 type DocQueryOnlyMissing = FakeDoc<{
   first?: number | null;
+  after?: string | null;
+  last?: number | null;
+  before?: string | null;
   query?: { name?: unknown } | null;
 }>;
-type Fail9 = ValidateCollectionQuery<DocQueryOnlyMissing, "name" | "email">;
-type AssertFail9 = HasCollectionQueryError<Fail9> extends true ? true : never;
-export const assertFail9: AssertFail9 = true;
+type Fail9b = ValidateCollectionQuery<DocQueryOnlyMissing, "name" | "email">;
+type AssertFail9b = HasCollectionQueryError<Fail9b> extends true ? true : never;
+export const assertFail9b: AssertFail9b = true;

package/src/component/data-table/use-data-table.test.ts

@@ -51,7 +51,12 @@ const testData: CollectionResult<TestRow> = {
     { node: { id: "2", name: "Bob", status: "INACTIVE", amount: 200 } },
     { node: { id: "3", name: "Charlie", status: "ACTIVE", amount: 300 } },
   ],
-  pageInfo: { hasNextPage: true, endCursor: "cursor-3" },
+  pageInfo: {
+    hasNextPage: true,
+    endCursor: "cursor-3",
+    hasPreviousPage: false,
+    startCursor: "cursor-1",
+  },
 };
 
 describe("useDataTable", () => {
@@ -95,6 +100,8 @@ describe("useDataTable", () => {
       expect(result.current.pageInfo).toEqual({
         hasNextPage: true,
         endCursor: "cursor-3",
+        hasPreviousPage: false,
+        startCursor: "cursor-1",
       });
     });
   });

package/src/component/data-table/use-data-table.ts

@@ -59,9 +59,23 @@ export function useDataTable<TRow extends Record<string, unknown>>(
   }, [sourceRows]);
 
   const pageInfo = useMemo<PageInfo>(() => {
-    return data?.pageInfo ?? { hasNextPage: false, endCursor: null };
+    return (
+      data?.pageInfo ?? {
+        hasNextPage: false,
+        endCursor: null,
+        hasPreviousPage: false,
+        startCursor: null,
+      }
+    );
   }, [data]);
 
+  // Sync pageInfo to collection so hasPrevPage/hasNextPage are up-to-date
+  useMemo(() => {
+    if (data?.pageInfo) {
+      collection?.setPageInfo(data.pageInfo);
+    }
+  }, [data?.pageInfo, collection]);
+
   // ---------------------------------------------------------------------------
   // Column visibility management
   // ---------------------------------------------------------------------------
@@ -111,11 +125,15 @@ export function useDataTable<TRow extends Record<string, unknown>>(
     [collection],
   );
 
-  const prevPage = useCallback(() => {
-    collection?.prevPage();
-  }, [collection]);
+  const prevPage = useCallback(
+    (startCursor: string) => {
+      collection?.prevPage(startCursor);
+    },
+    [collection],
+  );
 
   const hasPrevPage = collection?.hasPrevPage ?? false;
+  const hasNextPage = collection?.hasNextPage ?? false;
 
   // ---------------------------------------------------------------------------
   // Row Operations (Optimistic Updates)
@@ -240,6 +258,7 @@ export function useDataTable<TRow extends Record<string, unknown>>(
     nextPage,
     prevPage,
     hasPrevPage,
+    hasNextPage,
 
     // Column management
     columns: allColumns,

package/src/component/pagination.tsx

@@ -15,13 +15,18 @@ export function Pagination({
   nextPage,
   prevPage,
   hasPrevPage,
+  hasNextPage,
 }: PaginationProps) {
   return (
     <div className="flex items-center justify-end gap-2 py-2">
       <button
         type="button"
         className="inline-flex items-center justify-center rounded-md border px-3 py-1.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50"
-        onClick={prevPage}
+        onClick={() => {
+          if (pageInfo.startCursor) {
+            prevPage(pageInfo.startCursor);
+          }
+        }}
         disabled={!hasPrevPage}
       >
         Previous
@@ -34,7 +39,7 @@ export function Pagination({
             nextPage(pageInfo.endCursor);
           }
         }}
-        disabled={!pageInfo.hasNextPage}
+        disabled={!hasNextPage}
       >
         Next
       </button>

package/src/component/types.ts

@@ -177,6 +177,8 @@ export interface SortState {
 export interface PageInfo {
   hasNextPage: boolean;
   endCursor: string | null;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
 }
 
 // =============================================================================
@@ -211,8 +213,14 @@ export interface QueryVariables {
    * performed by `ValidateCollectionQuery` (specifically `CheckOrderField`).
    */
   order?: { field: string; direction: "Asc" | "Desc" }[];
-  first: number;
+  /** Forward pagination: number of items to fetch */
+  first?: number | null;
+  /** Forward pagination: cursor to start after */
   after?: string | null;
+  /** Backward pagination: number of items to fetch from the end */
+  last?: number | null;
+  /** Backward pagination: cursor to fetch before */
+  before?: string | null;
 }
 
 // =============================================================================
@@ -438,14 +446,20 @@ export interface UseCollectionReturn<
   pageSize: number;
   /** Current cursor position */
   cursor: string | null;
-  /** Navigate to next page */
+  /** Current pagination direction */
+  paginationDirection: "forward" | "backward";
+  /** Navigate to next page using endCursor from pageInfo */
   nextPage(endCursor: string): void;
-  /** Navigate to previous page */
-  prevPage(): void;
+  /** Navigate to previous page using startCursor from pageInfo */
+  prevPage(startCursor: string): void;
   /** Reset to first page */
   resetPage(): void;
-  /** Whether there is a previous page */
+  /** Whether there is a previous page (from GraphQL pageInfo) */
   hasPrevPage: boolean;
+  /** Whether there is a next page (from GraphQL pageInfo) */
+  hasNextPage: boolean;
+  /** Set pageInfo from graphql result to track hasPrevPage/hasNextPage */
+  setPageInfo(pageInfo: PageInfo): void;
 }
 
 // =============================================================================
@@ -551,9 +565,11 @@ export interface UseDataTableReturn<TRow extends Record<string, unknown>> {
   /** Navigate to next page */
   nextPage: (endCursor: string) => void;
   /** Navigate to previous page */
-  prevPage: () => void;
+  prevPage: (startCursor: string) => void;
   /** Whether a previous page exists */
   hasPrevPage: boolean;
+  /** Whether a next page exists */
+  hasNextPage: boolean;
 
   // Column management
   /** All column definitions */
@@ -718,9 +734,58 @@ type CheckFirstVariable<TQuery> =
       };
 
 /**
- * Rule 2 — When both metadata and `$order` variable exist, metadata field
- * names must be assignable to the `field` enum inside the `OrderInput` type.
- * Skipped when `TFieldName` is the generic `string` (no metadata).
+ * Rule 2 — The query must declare `$after` as a variable.
+ */
+type CheckAfterVariable<TQuery> =
+  "after" extends keyof ExtractQueryVariables<TQuery>
+    ? Pass
+    : {
+        __afterVariableError: `Query must declare an $after variable (e.g. $after: String).`;
+      };
+
+/**
+ * Rule 3 — The query must declare `$last` as a variable.
+ */
+type CheckLastVariable<TQuery> =
+  "last" extends keyof ExtractQueryVariables<TQuery>
+    ? Pass
+    : {
+        __lastVariableError: `Query must declare a $last variable (e.g. $last: Int).`;
+      };
+
+/**
+ * Rule 4 — The query must declare `$before` as a variable.
+ */
+type CheckBeforeVariable<TQuery> =
+  "before" extends keyof ExtractQueryVariables<TQuery>
+    ? Pass
+    : {
+        __beforeVariableError: `Query must declare a $before variable (e.g. $before: String).`;
+      };
+
+/**
+ * Rule 5 — The query must declare `$query` as a variable.
+ */
+type CheckQueryVariable<TQuery> =
+  "query" extends keyof ExtractQueryVariables<TQuery>
+    ? Pass
+    : {
+        __queryVariableError: `Query must declare a $query variable (e.g. $query: XxxQueryInput!).`;
+      };
+
+/**
+ * Rule 6 — The query must declare `$order` as a variable.
+ */
+type CheckOrderVariable<TQuery> =
+  "order" extends keyof ExtractQueryVariables<TQuery>
+    ? Pass
+    : {
+        __orderVariableError: `Query must declare an $order variable (e.g. $order: [XxxOrderInput]).`;
+      };
+
+/**
+ * Rule 7 — When metadata is provided, metadata field names must be
+ * assignable to the `field` enum inside the `OrderInput` type.
  */
 type CheckOrderField<
   TQuery,
@@ -734,9 +799,8 @@ type CheckOrderField<
   : Pass;
 
 /**
- * Rule 3 — When both metadata and `$query` variable exist, metadata field
- * names must be a subset of the `QueryInput` type's keys.
- * Skipped when `TFieldName` is the generic `string` (no metadata).
+ * Rule 8 — When metadata is provided, metadata field names must be a
+ * subset of the `QueryInput` type's keys.
  */
 type CheckQueryInput<
   TQuery,
@@ -757,8 +821,13 @@ type CheckQueryInput<
  * intersecting independent rule types:
  *
  * 1. **`CheckFirstVariable`** — `$first` must exist.
- * 2. **`CheckOrderField`** — OrderInput field compatibility (metadata-aware).
- * 3. **`CheckQueryInput`** — QueryInput key compatibility (metadata-aware).
+ * 2. **`CheckAfterVariable`** — `$after` must exist.
+ * 3. **`CheckLastVariable`** — `$last` must exist.
+ * 4. **`CheckBeforeVariable`** — `$before` must exist.
+ * 5. **`CheckQueryVariable`** — `$query` must exist.
+ * 6. **`CheckOrderVariable`** — `$order` must exist.
+ * 7. **`CheckOrderField`** — OrderInput field compatibility (metadata-aware).
+ * 8. **`CheckQueryInput`** — QueryInput key compatibility (metadata-aware).
  *
  * Each rule resolves to `{}` on pass or `{ __xxxError: "…" }` on fail.
  * A failing rule adds a phantom error property that makes `TQuery`
@@ -778,9 +847,20 @@ export type ValidateCollectionQuery<
   ExtractQueryVariables<TQuery> extends never
     ? TQuery // No gql-tada type info → skip validation
     : string extends TFieldName
-      ? TQuery & CheckFirstVariable<TQuery> // No metadata → only check $first
+      ? TQuery &
+          CheckFirstVariable<TQuery> &
+          CheckAfterVariable<TQuery> &
+          CheckLastVariable<TQuery> &
+          CheckBeforeVariable<TQuery> &
+          CheckQueryVariable<TQuery> &
+          CheckOrderVariable<TQuery>
       : TQuery &
           CheckFirstVariable<TQuery> &
+          CheckAfterVariable<TQuery> &
+          CheckLastVariable<TQuery> &
+          CheckBeforeVariable<TQuery> &
+          CheckQueryVariable<TQuery> &
+          CheckOrderVariable<TQuery> &
           CheckOrderField<TQuery, TOrderableFieldName> &
           CheckQueryInput<TQuery, TFieldName>;
 
@@ -791,6 +871,11 @@ export type ValidateCollectionQuery<
  */
 export type HasCollectionQueryError<T> = T extends
   | { __firstVariableError: string }
+  | { __afterVariableError: string }
+  | { __lastVariableError: string }
+  | { __beforeVariableError: string }
+  | { __queryVariableError: string }
+  | { __orderVariableError: string }
   | { __orderFieldError: string }
   | { __queryInputError: string }
   ? true
@@ -982,9 +1067,11 @@ export interface PaginationProps {
   /** Navigate to next page */
   nextPage: (endCursor: string) => void;
   /** Navigate to previous page */
-  prevPage: () => void;
+  prevPage: (startCursor: string) => void;
   /** Whether a previous page exists */
   hasPrevPage: boolean;
+  /** Whether a next page exists */
+  hasNextPage: boolean;
 }
 
 // =============================================================================