@izumisy-tailor/tailor-data-viewer 0.1.13 → 0.1.15

package/package.json

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

package/src/component/data-view-tab-content.tsx

@@ -129,9 +129,6 @@ export function DataViewTabContent({
     [tableData],
   );
 
-  // Track cursor history for previous page navigation
-  const [cursorHistory] = useState<string[]>([]);
-
   // CSV Download handler
   const handleDownloadCsv = useCallback(() => {
     if (!selectedTable || tableData.data.length === 0) return;
@@ -189,8 +186,6 @@ export function DataViewTabContent({
     [onTableConfirm],
   );
 
-  const hasPreviousPage = cursorHistory.length > 0;
-
   // Show table selector centered if table is not locked yet
   if (!isTableLocked) {
     return (
@@ -317,7 +312,7 @@ export function DataViewTabContent({
         currentCount={tableData.data.length}
         onNext={tableData.nextPage}
         onPrevious={tableData.previousPage}
-        hasPreviousPage={hasPreviousPage}
+        hasPreviousPage={tableData.hasPreviousPage}
       />
     </div>
   );

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

@@ -24,6 +24,7 @@ export interface PaginationState {
   first: number;
   after: string | null;
   hasNextPage: boolean;
+  endCursor: string | null;
 }
 
 export interface TableDataState {
@@ -32,6 +33,7 @@ export interface TableDataState {
   error: Error | null;
   sortState: SortState | null;
   pagination: PaginationState;
+  hasPreviousPage: boolean;
   refetch: () => Promise<void>;
   setSort: (field: string, direction?: "Asc" | "Desc") => void;
   nextPage: () => void;
@@ -102,6 +104,7 @@ export function useTableData(
     first: DEFAULT_PAGE_SIZE,
     after: null,
     hasNextPage: false,
+    endCursor: null,
   });
   const [cursorHistory, setCursorHistory] = useState<string[]>([]);
 
@@ -116,6 +119,7 @@ export function useTableData(
       first: DEFAULT_PAGE_SIZE,
       after: null,
       hasNextPage: false,
+      endCursor: null,
     });
     setCursorHistory([]);
   }, [table?.name]);
@@ -237,6 +241,7 @@ export function useTableData(
         setPagination((prev) => ({
           ...prev,
           hasNextPage: responseData.pageInfo.hasNextPage,
+          endCursor: responseData.pageInfo.endCursor,
         }));
       }
     } catch (err) {
@@ -280,19 +285,18 @@ export function useTableData(
   }, []);
 
   const nextPage = useCallback(() => {
-    const responseData = data;
-    if (pagination.hasNextPage && responseData.length > 0) {
+    if (pagination.hasNextPage && pagination.endCursor) {
       // Store current cursor for back navigation
       if (pagination.after) {
         setCursorHistory((prev) => [...prev, pagination.after!]);
       }
-      // Get the cursor from the last item (using the GraphQL response's endCursor)
+      // Use endCursor from pageInfo for pagination
       setPagination((prev) => ({
         ...prev,
-        after: (responseData[responseData.length - 1]?.id as string) ?? null,
+        after: prev.endCursor,
       }));
     }
-  }, [data, pagination.hasNextPage, pagination.after]);
+  }, [pagination.hasNextPage, pagination.endCursor, pagination.after]);
 
   const previousPage = useCallback(() => {
     if (cursorHistory.length > 0) {
@@ -311,6 +315,7 @@ export function useTableData(
       first: DEFAULT_PAGE_SIZE,
       after: null,
       hasNextPage: false,
+      endCursor: null,
     });
     setCursorHistory([]);
   }, []);
@@ -321,6 +326,7 @@ export function useTableData(
     error,
     sortState,
     pagination,
+    hasPreviousPage: cursorHistory.length > 0 || pagination.after !== null,
     refetch: fetchData,
     setSort,
     nextPage,