@izumisy-tailor/tailor-data-viewer 0.1.12 → 0.1.14

package/package.json

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

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 {
@@ -102,6 +103,7 @@ export function useTableData(
     first: DEFAULT_PAGE_SIZE,
     after: null,
     hasNextPage: false,
+    endCursor: null,
   });
   const [cursorHistory, setCursorHistory] = useState<string[]>([]);
 
@@ -116,6 +118,7 @@ export function useTableData(
       first: DEFAULT_PAGE_SIZE,
       after: null,
       hasNextPage: false,
+      endCursor: null,
     });
     setCursorHistory([]);
   }, [table?.name]);
@@ -237,6 +240,7 @@ export function useTableData(
         setPagination((prev) => ({
           ...prev,
           hasNextPage: responseData.pageInfo.hasNextPage,
+          endCursor: responseData.pageInfo.endCursor,
         }));
       }
     } catch (err) {
@@ -280,19 +284,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 +314,7 @@ export function useTableData(
       first: DEFAULT_PAGE_SIZE,
       after: null,
       hasNextPage: false,
+      endCursor: null,
     });
     setCursorHistory([]);
   }, []);

package/src/component/search-filter.tsx

@@ -202,7 +202,7 @@ export function SearchFilterForm({
         </Button>
       </CollapsibleTrigger>
 
-      <CollapsibleContent className="absolute top-full left-0 z-10 mt-2">
+      <CollapsibleContent className="absolute top-full left-0 z-50 mt-2">
         <div className="bg-background w-96 rounded-md border p-4 shadow-md">
           <div className="space-y-4">
             <div className="flex items-center justify-between">