@izumisy-tailor/tailor-data-viewer 0.2.25 → 0.2.27

package/package.json

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

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

@@ -325,22 +325,30 @@ describe("useCollection", () => {
       expect(result.current.paginationDirection).toBe("forward");
     });
 
-    it("tracks hasPrevPage and hasNextPage from setPageInfo", () => {
+    it("tracks hasPrevPage from currentPage and hasNextPage from setPageInfo", () => {
       const { result } = renderHook(() => useCollection({ query: FAKE_QUERY }));
 
+      // Initially on page 1: no prev, no next
       expect(result.current.hasPrevPage).toBe(false);
       expect(result.current.hasNextPage).toBe(false);
 
+      // After navigating to next page, hasPrevPage becomes true
+      act(() => {
+        result.current.nextPage("cursor-end");
+      });
+
+      expect(result.current.hasPrevPage).toBe(true);
+
+      // hasNextPage comes from setPageInfo when totalPages is null
       act(() => {
         result.current.setPageInfo({
           hasNextPage: true,
           endCursor: "end",
-          hasPreviousPage: true,
+          hasPreviousPage: false,
           startCursor: "start",
         });
       });
 
-      expect(result.current.hasPrevPage).toBe(true);
       expect(result.current.hasNextPage).toBe(true);
     });
   });

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

@@ -132,6 +132,8 @@ export function useCollection(
     hasPreviousPage: false,
     startCursor: null,
   });
+  const [currentPage, setCurrentPage] = useState(1);
+  const [total, setTotalState] = useState<number | null>(null);
 
   // ---------------------------------------------------------------------------
   // Filter operations
@@ -155,6 +157,7 @@ export function useCollection(
       // Reset pagination when filters change
       setCursor(null);
       setPaginationDirection("forward");
+      setCurrentPage(1);
     },
     [],
   );
@@ -164,6 +167,7 @@ export function useCollection(
     // Reset pagination when filters change
     setCursor(null);
     setPaginationDirection("forward");
+    setCurrentPage(1);
   }, []);
 
   const removeFilter = useCallback((field: string) => {
@@ -171,12 +175,14 @@ export function useCollection(
     // Reset pagination when filters change
     setCursor(null);
     setPaginationDirection("forward");
+    setCurrentPage(1);
   }, []);
 
   const clearFilters = useCallback(() => {
     setFiltersState([]);
     setCursor(null);
     setPaginationDirection("forward");
+    setCurrentPage(1);
   }, []);
 
   // ---------------------------------------------------------------------------
@@ -196,12 +202,14 @@ export function useCollection(
     // Reset pagination when sort changes
     setCursor(null);
     setPaginationDirection("forward");
+    setCurrentPage(1);
   }, []);
 
   const clearSort = useCallback(() => {
     setSortStates([]);
     setCursor(null);
     setPaginationDirection("forward");
+    setCurrentPage(1);
   }, []);
 
   // ---------------------------------------------------------------------------
@@ -210,24 +218,49 @@ export function useCollection(
   const nextPage = useCallback((endCursor: string) => {
     setCursor(endCursor);
     setPaginationDirection("forward");
+    setCurrentPage((p) => p + 1);
   }, []);
 
   const prevPage = useCallback((startCursor: string) => {
     setCursor(startCursor);
     setPaginationDirection("backward");
+    setCurrentPage((p) => Math.max(1, p - 1));
   }, []);
 
   const resetPage = useCallback(() => {
     setCursor(null);
     setPaginationDirection("forward");
+    setCurrentPage(1);
   }, []);
 
   const setPageInfo = useCallback((pageInfo: PageInfo) => {
     setCurrentPageInfo(pageInfo);
   }, []);
 
-  const hasPrevPage = currentPageInfo.hasPreviousPage;
-  const hasNextPage = currentPageInfo.hasNextPage;
+  const setTotal = useCallback((value: number) => {
+    setTotalState(value);
+  }, []);
+
+  const totalPages =
+    total !== null ? Math.max(1, Math.ceil(total / pageSize)) : null;
+
+  const goToFirstPage = useCallback(() => {
+    setCursor(null);
+    setPaginationDirection("forward");
+    setCurrentPage(1);
+  }, []);
+
+  const goToLastPage = useCallback(() => {
+    setCursor(null);
+    setPaginationDirection("backward");
+    setCurrentPage(totalPages ?? 1);
+  }, [totalPages]);
+
+  const hasPrevPage = currentPage > 1;
+  const hasNextPage =
+    totalPages !== null
+      ? currentPage < totalPages
+      : currentPageInfo.hasNextPage;
 
   // ---------------------------------------------------------------------------
   // Build query variables (Tailor Platform format)
@@ -299,5 +332,10 @@ export function useCollection(
     hasPrevPage,
     hasNextPage,
     setPageInfo,
+    currentPage,
+    totalPages,
+    goToFirstPage,
+    goToLastPage,
+    setTotal,
   };
 }

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

@@ -76,7 +76,15 @@ export function useDataTable<TRow extends Record<string, unknown>>(
     if (data?.pageInfo) {
       collection?.setPageInfo(data.pageInfo);
     }
-  }, [data?.pageInfo, collection?.setPageInfo]);
+    if (data?.total != null) {
+      collection?.setTotal(data.total);
+    }
+  }, [
+    data?.pageInfo,
+    data?.total,
+    collection?.setPageInfo,
+    collection?.setTotal,
+  ]);
 
   // ---------------------------------------------------------------------------
   // Column visibility management

package/src/component/index.ts

@@ -69,6 +69,7 @@ export { createColumnHelper } from "./field-helpers";
 
 // Utility components
 export { Pagination } from "./pagination";
+export type { PaginationProps, PaginationLabels } from "./pagination";
 export { ColumnSelector } from "./column-selector";
 export { CsvButton } from "./csv-button";
 export { SearchFilterForm } from "./search-filter-form";

package/src/component/pagination.test.tsx

@@ -34,6 +34,8 @@ const TestProviders = createTestProviders({
   collectionDefaults: {
     hasPrevPage: true,
     hasNextPage: true,
+    currentPage: 2,
+    totalPages: 5,
   },
 });
 
@@ -42,37 +44,75 @@ const TestProviders = createTestProviders({
 // =============================================================================
 
 describe("Pagination", () => {
-  it("renders Previous and Next buttons", () => {
+  it("renders four navigation buttons", () => {
     render(
       <TestProviders>
         <Pagination />
       </TestProviders>,
     );
 
-    expect(screen.getByText("Previous")).toBeInTheDocument();
-    expect(screen.getByText("Next")).toBeInTheDocument();
+    expect(screen.getByLabelText("First page")).toBeInTheDocument();
+    expect(screen.getByLabelText("Previous page")).toBeInTheDocument();
+    expect(screen.getByLabelText("Next page")).toBeInTheDocument();
+    expect(screen.getByLabelText("Last page")).toBeInTheDocument();
   });
 
-  it("disables Previous when hasPrevPage is false", () => {
+  it("displays current page and total pages as N / M", () => {
     render(
-      <TestProviders collection={{ hasPrevPage: false }}>
+      <TestProviders>
+        <Pagination />
+      </TestProviders>,
+    );
+
+    expect(screen.getByText("2 / 5")).toBeInTheDocument();
+  });
+
+  it("hides page indicator when totalPages is null", () => {
+    render(
+      <TestProviders collection={{ totalPages: null, currentPage: 3 }}>
+        <Pagination />
+      </TestProviders>,
+    );
+
+    expect(screen.queryByText("3")).not.toBeInTheDocument();
+    expect(screen.queryByText("/")).not.toBeInTheDocument();
+  });
+
+  it("disables First and Previous when hasPrevPage is false", () => {
+    render(
+      <TestProviders collection={{ hasPrevPage: false, currentPage: 1 }}>
         <Pagination />
       </TestProviders>,
     );
 
-    expect(screen.getByText("Previous")).toBeDisabled();
-    expect(screen.getByText("Next")).toBeEnabled();
+    expect(screen.getByLabelText("First page")).toBeDisabled();
+    expect(screen.getByLabelText("Previous page")).toBeDisabled();
+    expect(screen.getByLabelText("Next page")).toBeEnabled();
+    expect(screen.getByLabelText("Last page")).toBeEnabled();
   });
 
-  it("disables Next when hasNextPage is false", () => {
+  it("disables Next and Last when hasNextPage is false", () => {
     render(
       <TestProviders collection={{ hasNextPage: false }}>
         <Pagination />
       </TestProviders>,
     );
 
-    expect(screen.getByText("Previous")).toBeEnabled();
-    expect(screen.getByText("Next")).toBeDisabled();
+    expect(screen.getByLabelText("First page")).toBeEnabled();
+    expect(screen.getByLabelText("Previous page")).toBeEnabled();
+    expect(screen.getByLabelText("Next page")).toBeDisabled();
+    expect(screen.getByLabelText("Last page")).toBeDisabled();
+  });
+
+  it("disables Last when totalPages is null even if hasNextPage", () => {
+    render(
+      <TestProviders collection={{ hasNextPage: true, totalPages: null }}>
+        <Pagination />
+      </TestProviders>,
+    );
+
+    expect(screen.getByLabelText("Next page")).toBeEnabled();
+    expect(screen.getByLabelText("Last page")).toBeDisabled();
   });
 
   it("calls nextPage with endCursor when Next is clicked", () => {
@@ -83,7 +123,7 @@ describe("Pagination", () => {
       </TestProviders>,
     );
 
-    fireEvent.click(screen.getByText("Next"));
+    fireEvent.click(screen.getByLabelText("Next page"));
     expect(nextPage).toHaveBeenCalledWith("cursor-end");
   });
 
@@ -95,10 +135,34 @@ describe("Pagination", () => {
       </TestProviders>,
     );
 
-    fireEvent.click(screen.getByText("Previous"));
+    fireEvent.click(screen.getByLabelText("Previous page"));
     expect(prevPage).toHaveBeenCalledWith("cursor-start");
   });
 
+  it("calls goToFirstPage when First is clicked", () => {
+    const goToFirstPage = vi.fn();
+    render(
+      <TestProviders collection={{ goToFirstPage }}>
+        <Pagination />
+      </TestProviders>,
+    );
+
+    fireEvent.click(screen.getByLabelText("First page"));
+    expect(goToFirstPage).toHaveBeenCalledOnce();
+  });
+
+  it("calls goToLastPage when Last is clicked", () => {
+    const goToLastPage = vi.fn();
+    render(
+      <TestProviders collection={{ goToLastPage }}>
+        <Pagination />
+      </TestProviders>,
+    );
+
+    fireEvent.click(screen.getByLabelText("Last page"));
+    expect(goToLastPage).toHaveBeenCalledOnce();
+  });
+
   it("does not call nextPage when endCursor is null", () => {
     const nextPage = vi.fn();
     render(
@@ -117,10 +181,30 @@ describe("Pagination", () => {
       </TestProviders>,
     );
 
-    fireEvent.click(screen.getByText("Next"));
+    fireEvent.click(screen.getByLabelText("Next page"));
     expect(nextPage).not.toHaveBeenCalled();
   });
 
+  it("supports custom aria-labels via labels prop", () => {
+    render(
+      <TestProviders>
+        <Pagination
+          labels={{
+            first: "最初のページ",
+            previous: "前のページ",
+            next: "次のページ",
+            last: "最後のページ",
+          }}
+        />
+      </TestProviders>,
+    );
+
+    expect(screen.getByLabelText("最初のページ")).toBeInTheDocument();
+    expect(screen.getByLabelText("前のページ")).toBeInTheDocument();
+    expect(screen.getByLabelText("次のページ")).toBeInTheDocument();
+    expect(screen.getByLabelText("最後のページ")).toBeInTheDocument();
+  });
+
   it("throws when rendered outside provider", () => {
     console.error = vi.fn();
     expect(() => render(<Pagination />)).toThrow();

package/src/component/pagination.tsx

@@ -1,49 +1,186 @@
 import { useDataTableContext } from "./data-table/data-table-context";
 import { useCollectionContext } from "./collection/collection-provider";
 
+// =============================================================================
+// Inline SVG Icons (lucide-style, no external dependency)
+// =============================================================================
+
+const iconClass = "size-4";
+
+function ChevronsLeftIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={iconClass}
+    >
+      <path d="m11 17-5-5 5-5" />
+      <path d="m18 17-5-5 5-5" />
+    </svg>
+  );
+}
+
+function ChevronLeftIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={iconClass}
+    >
+      <path d="m15 18-6-6 6-6" />
+    </svg>
+  );
+}
+
+function ChevronRightIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={iconClass}
+    >
+      <path d="m9 18 6-6-6-6" />
+    </svg>
+  );
+}
+
+function ChevronsRightIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={iconClass}
+    >
+      <path d="m13 17 5-5-5-5" />
+      <path d="m6 17 5-5-5-5" />
+    </svg>
+  );
+}
+
+// =============================================================================
+// Pagination Component
+// =============================================================================
+
+export interface PaginationLabels {
+  first?: string;
+  previous?: string;
+  next?: string;
+  last?: string;
+}
+
+export interface PaginationProps {
+  /** Aria-labels for pagination buttons (defaults to English). */
+  labels?: PaginationLabels;
+}
+
+const btnClass =
+  "inline-flex items-center justify-center rounded-md border p-1.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50";
+
 /**
- * Pagination controls for cursor-based navigation.
+ * Pagination controls with first/prev/next/last navigation and page indicator.
  *
- * Reads `pageInfo` from `DataTableContext` and pagination actions
- * from `CollectionContext`. Must be rendered inside `DataTable.Provider`.
+ * Reads pagination state from `DataTableContext` and `CollectionContext`.
+ * Must be rendered inside `DataTable.Provider` but **outside** `DataTable.Root`.
  *
  * @example
  * ```tsx
  * <DataTable.Provider value={table}>
- *   <Pagination />
+ *   <DataTable.Root>
+ *     <DataTable.Headers />
+ *     <DataTable.Body />
+ *   </DataTable.Root>
+ *   <Pagination labels={{ first: "最初のページ", previous: "前のページ", next: "次のページ", last: "最後のページ" }} />
  * </DataTable.Provider>
  * ```
  */
-export function Pagination() {
+export function Pagination({ labels }: PaginationProps = {}) {
   const { pageInfo } = useDataTableContext();
-  const { nextPage, prevPage, hasPrevPage, hasNextPage } =
-    useCollectionContext();
+  const {
+    nextPage,
+    prevPage,
+    hasPrevPage,
+    hasNextPage,
+    currentPage,
+    totalPages,
+    goToFirstPage,
+    goToLastPage,
+  } = useCollectionContext();
+
+  const firstLabel = labels?.first ?? "First page";
+  const previousLabel = labels?.previous ?? "Previous page";
+  const nextLabel = labels?.next ?? "Next page";
+  const lastLabel = labels?.last ?? "Last page";
 
   return (
     <div className="flex items-center justify-end gap-2 py-2">
+      {totalPages !== null && (
+        <span className="text-sm text-muted-foreground tabular-nums">
+          {currentPage} / {totalPages}
+        </span>
+      )}
       <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"
+        className={btnClass}
+        onClick={goToFirstPage}
+        disabled={!hasPrevPage}
+        aria-label={firstLabel}
+      >
+        <ChevronsLeftIcon />
+      </button>
+      <button
+        type="button"
+        className={btnClass}
         onClick={() => {
           if (pageInfo.startCursor) {
             prevPage(pageInfo.startCursor);
           }
         }}
         disabled={!hasPrevPage}
+        aria-label={previousLabel}
       >
-        Previous
+        <ChevronLeftIcon />
       </button>
       <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"
+        className={btnClass}
         onClick={() => {
           if (pageInfo.endCursor) {
             nextPage(pageInfo.endCursor);
           }
         }}
         disabled={!hasNextPage}
+        aria-label={nextLabel}
+      >
+        <ChevronRightIcon />
+      </button>
+      <button
+        type="button"
+        className={btnClass}
+        onClick={goToLastPage}
+        disabled={!hasNextPage || totalPages === null}
+        aria-label={lastLabel}
       >
-        Next
+        <ChevronsRightIcon />
       </button>
     </div>
   );

package/src/component/table.tsx

@@ -12,7 +12,7 @@ interface TableRootProps extends ComponentProps<"table"> {
 
 function Root({ className, tableLayout = "fixed", ...props }: TableRootProps) {
   return (
-    <div className="relative w-full overflow-x-auto">
+    <div className="relative w-full overflow-x-auto rounded-md border bg-background">
       <table
         className={cn(
           "w-full caption-bottom text-sm",

package/src/component/types.ts

@@ -250,6 +250,7 @@ export interface QueryVariables {
 export interface CollectionResult<T> {
   edges: { node: T }[];
   pageInfo: PageInfo;
+  total?: number | null;
 }
 
 /**
@@ -472,12 +473,22 @@ export interface UseCollectionReturn<
   prevPage: (startCursor: string) => void;
   /** Reset to first page */
   resetPage: () => void;
-  /** Whether there is a previous page (from GraphQL pageInfo) */
+  /** Whether there is a previous page */
   hasPrevPage: boolean;
-  /** Whether there is a next page (from GraphQL pageInfo) */
+  /** Whether there is a next page */
   hasNextPage: boolean;
   /** Set pageInfo from graphql result to track hasPrevPage/hasNextPage */
   setPageInfo: (pageInfo: PageInfo) => void;
+  /** Current page number (1-based) */
+  currentPage: number;
+  /** Total number of pages, or null if total count is unknown */
+  totalPages: number | null;
+  /** Navigate to the first page */
+  goToFirstPage: () => void;
+  /** Navigate to the last page (requires totalPages) */
+  goToLastPage: () => void;
+  /** Set total item count from GraphQL result */
+  setTotal: (total: number) => void;
 }
 
 // =============================================================================

package/src/tests/helpers.tsx

@@ -67,6 +67,11 @@ export function createMockCollectionContext(
     hasPrevPage: false,
     hasNextPage: false,
     setPageInfo: vi.fn(),
+    currentPage: 1,
+    totalPages: null,
+    goToFirstPage: vi.fn(),
+    goToLastPage: vi.fn(),
+    setTotal: vi.fn(),
     ...overrides,
   };
 }