@izumisy-tailor/tailor-data-viewer 0.1.53 → 0.1.54

package/package.json

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

package/src/component/data-table.tsx

@@ -5,10 +5,10 @@ import {
   ArrowUpDown,
   ChevronRight,
   ChevronDown,
-  ChevronLeft,
   X,
   MoreHorizontal,
 } from "lucide-react";
+import { Pagination } from "./pagination";
 import {
   Table,
   TableBody,
@@ -80,16 +80,8 @@ export function DataTable(props: DataTableProps = {}) {
     return new Map(columnDefinitions.map((col) => [col.field, col]));
   }, [columnDefinitions]);
 
-  const {
-    data,
-    loading,
-    sortState,
-    setSort,
-    pagination,
-    hasPreviousPage,
-    nextPage,
-    previousPage,
-  } = useTableDataContext();
+  const { data, loading, sortState, setSort, pagination, hasPreviousPage } =
+    useTableDataContext();
 
   const fields = tableMetadata?.fields ?? [];
 
@@ -563,38 +555,8 @@ export function DataTable(props: DataTableProps = {}) {
         </Table>
       </div>
 
-      {/* Integrated Pagination */}
-      <div className="flex items-center justify-between py-2">
-        <div className="text-muted-foreground text-sm">
-          {data.length > 0 ? (
-            <>
-              <span className="font-medium">{data.length}</span> 件を表示
-            </>
-          ) : (
-            "データなし"
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={previousPage}
-            disabled={!hasPreviousPage}
-          >
-            <ChevronLeft className="size-4" />
-            前へ
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={nextPage}
-            disabled={!pagination.hasNextPage}
-          >
-            次へ
-            <ChevronRight className="size-4" />
-          </Button>
-        </div>
-      </div>
+      {/* Integrated Pagination - Hidden when data fits in a single page */}
+      {(hasPreviousPage || pagination.hasNextPage) && <Pagination />}
     </>
   );
 }

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

@@ -229,13 +229,7 @@ function DataViewTabContentInner({
       />
 
       {/* Pagination */}
-      <Pagination
-        pagination={tableData.pagination}
-        currentCount={tableData.data.length}
-        onNext={tableData.nextPage}
-        onPrevious={tableData.previousPage}
-        hasPreviousPage={tableData.hasPreviousPage}
-      />
+      <Pagination />
     </div>
   );
 }

package/src/component/pagination.tsx

@@ -1,31 +1,21 @@
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Button } from "./ui/button";
-import type { PaginationState } from "./hooks/use-table-data";
-
-interface PaginationProps {
-  pagination: PaginationState;
-  currentCount: number;
-  onNext: () => void;
-  onPrevious: () => void;
-  hasPreviousPage: boolean;
-}
+import { useTableDataContext } from "./contexts";
 
 /**
  * Pagination controls for the data table
+ * Uses TableDataContext internally - no props required
  */
-export function Pagination({
-  pagination,
-  currentCount,
-  onNext,
-  onPrevious,
-  hasPreviousPage,
-}: PaginationProps) {
+export function Pagination() {
+  const { data, pagination, hasPreviousPage, nextPage, previousPage } =
+    useTableDataContext();
+
   return (
     <div className="flex items-center justify-between py-2">
       <div className="text-muted-foreground text-sm">
-        {currentCount > 0 ? (
+        {data.length > 0 ? (
           <>
-            <span className="font-medium">{currentCount}</span> 件を表示
+            <span className="font-medium">{data.length}</span> 件を表示
           </>
         ) : (
           "データなし"
@@ -35,7 +25,7 @@ export function Pagination({
         <Button
           variant="outline"
           size="sm"
-          onClick={onPrevious}
+          onClick={previousPage}
           disabled={!hasPreviousPage}
         >
           <ChevronLeft className="size-4" />
@@ -44,7 +34,7 @@ export function Pagination({
         <Button
           variant="outline"
           size="sm"
-          onClick={onNext}
+          onClick={nextPage}
           disabled={!pagination.hasNextPage}
         >
           次へ