@izumisy-tailor/tailor-data-viewer 0.2.28 → 0.2.30

package/package.json

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

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

@@ -121,7 +121,7 @@ export function useCollection(
   // ---------------------------------------------------------------------------
   const [filters, setFiltersState] = useState<Filter[]>(initialFilters);
   const [sortStates, setSortStates] = useState<SortState[]>(initialSort);
-  const [pageSize] = useState(initialPageSize);
+  const [pageSize, setPageSizeState] = useState(initialPageSize);
   const [cursor, setCursor] = useState<string | null>(null);
   const [paginationDirection, setPaginationDirection] = useState<
     "forward" | "backward"
@@ -233,6 +233,13 @@ export function useCollection(
     setCurrentPage(1);
   }, []);
 
+  const setPageSize = useCallback((size: number) => {
+    setPageSizeState(size);
+    setCursor(null);
+    setPaginationDirection("forward");
+    setCurrentPage(1);
+  }, []);
+
   const setPageInfo = useCallback((pageInfo: PageInfo) => {
     setCurrentPageInfo(pageInfo);
   }, []);
@@ -324,6 +331,7 @@ export function useCollection(
     setSort,
     clearSort,
     pageSize,
+    setPageSize,
     cursor,
     paginationDirection,
     nextPage,

package/src/component/pagination.test.tsx

@@ -210,4 +210,73 @@ describe("Pagination", () => {
     expect(() => render(<Pagination />)).toThrow();
     console.error = globalThis.console.error;
   });
+
+  // ===========================================================================
+  // Page size switcher
+  // ===========================================================================
+
+  it("does not render page-size selector when pageSizeOptions is not provided", () => {
+    render(
+      <TestProviders>
+        <Pagination />
+      </TestProviders>,
+    );
+
+    expect(screen.queryByLabelText("Rows per page")).not.toBeInTheDocument();
+  });
+
+  it("renders page-size selector when pageSizeOptions is provided", () => {
+    render(
+      <TestProviders collection={{ pageSize: 20 }}>
+        <Pagination pageSizeOptions={[10, 20, 50]} />
+      </TestProviders>,
+    );
+
+    const select = screen.getByLabelText("Rows per page");
+    expect(select).toBeInTheDocument();
+    expect(select).toHaveValue("20");
+
+    const options = select.querySelectorAll("option");
+    expect(options).toHaveLength(3);
+    expect(options[0]).toHaveValue("10");
+    expect(options[1]).toHaveValue("20");
+    expect(options[2]).toHaveValue("50");
+  });
+
+  it("calls setPageSize when page-size option is changed", () => {
+    const setPageSize = vi.fn();
+    render(
+      <TestProviders collection={{ pageSize: 20, setPageSize }}>
+        <Pagination pageSizeOptions={[10, 20, 50]} />
+      </TestProviders>,
+    );
+
+    fireEvent.change(screen.getByLabelText("Rows per page"), {
+      target: { value: "50" },
+    });
+    expect(setPageSize).toHaveBeenCalledWith(50);
+  });
+
+  it("supports custom rowsPerPage label", () => {
+    render(
+      <TestProviders collection={{ pageSize: 20 }}>
+        <Pagination
+          pageSizeOptions={[10, 20, 50]}
+          labels={{ rowsPerPage: "表示件数" }}
+        />
+      </TestProviders>,
+    );
+
+    expect(screen.getByLabelText("表示件数")).toBeInTheDocument();
+  });
+
+  it("does not render page-size selector when pageSizeOptions is empty", () => {
+    render(
+      <TestProviders>
+        <Pagination pageSizeOptions={[]} />
+      </TestProviders>,
+    );
+
+    expect(screen.queryByLabelText("Rows per page")).not.toBeInTheDocument();
+  });
 });

package/src/component/pagination.tsx

@@ -86,11 +86,23 @@ export interface PaginationLabels {
   previous?: string;
   next?: string;
   last?: string;
+  /** Label displayed next to the page-size selector (default: "Rows per page"). */
+  rowsPerPage?: string;
 }
 
 export interface PaginationProps {
   /** Aria-labels for pagination buttons (defaults to English). */
   labels?: PaginationLabels;
+  /**
+   * Available page-size options shown in a dropdown selector.
+   * When provided, a page-size switcher is rendered.
+   *
+   * @example
+   * ```tsx
+   * <Pagination pageSizeOptions={[10, 20, 50, 100]} />
+   * ```
+   */
+  pageSizeOptions?: number[];
 }
 
 const btnClass =
@@ -113,7 +125,7 @@ const btnClass =
  * </DataTable.Provider>
  * ```
  */
-export function Pagination({ labels }: PaginationProps = {}) {
+export function Pagination({ labels, pageSizeOptions }: PaginationProps = {}) {
   const { pageInfo } = useDataTableContext();
   const {
     nextPage,
@@ -124,15 +136,40 @@ export function Pagination({ labels }: PaginationProps = {}) {
     totalPages,
     goToFirstPage,
     goToLastPage,
+    pageSize,
+    setPageSize,
   } = 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";
+  const rowsPerPageLabel = labels?.rowsPerPage ?? "Rows per page";
 
   return (
     <div className="flex items-center justify-end gap-2 py-2">
+      {pageSizeOptions && pageSizeOptions.length > 0 && (
+        <div className="flex items-center gap-1.5">
+          <label
+            htmlFor="pagination-page-size"
+            className="text-sm text-muted-foreground whitespace-nowrap"
+          >
+            {rowsPerPageLabel}
+          </label>
+          <select
+            id="pagination-page-size"
+            className="h-8 rounded-md border bg-transparent px-2 text-sm"
+            value={pageSize}
+            onChange={(e) => setPageSize(Number(e.target.value))}
+          >
+            {pageSizeOptions.map((size) => (
+              <option key={size} value={size}>
+                {size}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
       {totalPages !== null && (
         <span className="text-sm text-muted-foreground tabular-nums">
           {currentPage} / {totalPages}

package/src/component/table.tsx

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

package/src/component/types.ts

@@ -463,6 +463,8 @@ export interface UseCollectionReturn<
   // Pagination operations
   /** Number of items per page */
   pageSize: number;
+  /** Update the number of items per page (resets pagination to page 1) */
+  setPageSize: (size: number) => void;
   /** Current cursor position */
   cursor: string | null;
   /** Current pagination direction */

package/src/tests/helpers.tsx

@@ -59,6 +59,7 @@ export function createMockCollectionContext(
     setSort: vi.fn(),
     clearSort: vi.fn(),
     pageSize: 20,
+    setPageSize: vi.fn(),
     cursor: null,
     paginationDirection: "forward",
     nextPage: vi.fn(),