@izumisy-tailor/tailor-data-viewer 0.1.20 → 0.1.22

package/src/component/data-table.tsx

@@ -5,6 +5,7 @@ import {
   ArrowUpDown,
   ChevronRight,
   ChevronDown,
+  ChevronLeft,
   X,
   ExternalLink,
 } from "lucide-react";
@@ -16,33 +17,19 @@ import {
   TableHeader,
   TableRow,
 } from "./ui/table";
+import { Button } from "./ui/button";
 import type {
   FieldMetadata,
   TableMetadata,
   RelationMetadata,
-  TableMetadataMap,
-  ExpandedRelationFields,
 } from "../generator/metadata-generator";
 import { formatFieldValue } from "../graphql/query-builder";
-import type { SortState } from "./hooks/use-table-data";
 import { useRelationData } from "./hooks/use-relation-data";
 import { RelationContent } from "./relation-content";
+import { useDataViewer } from "./contexts";
+import { useTableDataContext } from "./contexts";
 
-interface DataTableProps {
-  data: Record<string, unknown>[];
-  fields: FieldMetadata[];
-  selectedFields: string[];
-  sortState: SortState | null;
-  onSort: (field: string) => void;
-  loading?: boolean;
-  /** Current table metadata (for relations) */
-  tableMetadata?: TableMetadata;
-  /** All table metadata (for relation target lookup) */
-  tableMetadataMap?: TableMetadataMap;
-  /** App URI for GraphQL requests */
-  appUri?: string;
-  /** Selected relation field names (if not provided, all relations are shown) */
-  selectedRelations?: string[];
+export interface DataTableProps {
   /** Callback to open a relation as a new sheet */
   onOpenAsSheet?: (
     targetTableName: string,
@@ -54,8 +41,6 @@ interface DataTableProps {
     targetTableName: string,
     recordId: string,
   ) => void;
-  /** Expanded relation fields (manyToOne fields shown as inline columns) */
-  expandedRelationFields?: ExpandedRelationFields;
 }
 
 /**
@@ -65,22 +50,30 @@ type ExpandedCellKey = string;
 
 /**
  * Data display table with sortable headers and expandable relation cells
+ * Must be used within DataViewer.Root context
  */
-export function DataTable({
-  data,
-  fields,
-  selectedFields,
-  sortState,
-  onSort,
-  loading,
-  tableMetadata,
-  tableMetadataMap,
-  appUri,
-  selectedRelations,
-  onOpenAsSheet,
-  onOpenSingleRecordAsSheet,
-  expandedRelationFields = {},
-}: DataTableProps) {
+export function DataTable(props: DataTableProps = {}) {
+  const {
+    tableMetadata,
+    metadata,
+    appUri,
+    selectedFields,
+    selectedRelations,
+    expandedRelationFields,
+  } = useDataViewer();
+  const {
+    data,
+    loading,
+    sortState,
+    setSort,
+    pagination,
+    hasPreviousPage,
+    nextPage,
+    previousPage,
+  } = useTableDataContext();
+
+  const fields = tableMetadata?.fields ?? [];
+
   // Track expanded cells: Set of "rowId:relationFieldName" keys
   const [expandedCells, setExpandedCells] = useState<Set<ExpandedCellKey>>(
     () => new Set(),
@@ -89,7 +82,7 @@ export function DataTable({
   // Relation data hook
   const { getRelationData, triggerFetch } = useRelationData(
     appUri ?? "",
-    tableMetadataMap ?? {},
+    metadata ?? {},
   );
 
   // Check if table has relations - filter by selectedRelations if provided
@@ -101,7 +94,7 @@ export function DataTable({
     selectedRelations !== undefined
       ? allRelations.filter((r) => selectedRelations.includes(r.fieldName))
       : allRelations;
-  const hasRelations = relations.length > 0 && appUri && tableMetadataMap;
+  const hasRelations = relations.length > 0 && appUri && metadata;
 
   // Toggle cell expansion and trigger fetch if expanding
   const toggleCell = useCallback(
@@ -158,7 +151,7 @@ export function DataTable({
 
   const expandedColumns = useMemo((): ExpandedColumn[] => {
     const columns: ExpandedColumn[] = [];
-    if (!tableMetadataMap) return columns;
+    if (!metadata) return columns;
 
     for (const [relationFieldName, targetFieldNames] of Object.entries(
       expandedRelationFields,
@@ -169,7 +162,7 @@ export function DataTable({
       );
       if (!relation) continue;
 
-      const targetTable = tableMetadataMap[relation.targetTable];
+      const targetTable = metadata[relation.targetTable];
       if (!targetTable) continue;
 
       for (const targetFieldName of targetFieldNames) {
@@ -187,7 +180,7 @@ export function DataTable({
       }
     }
     return columns;
-  }, [expandedRelationFields, allRelations, tableMetadataMap]);
+  }, [expandedRelationFields, allRelations, metadata]);
 
   // Calculate total column count (for colspan in expanded rows)
   // +1 for the action column (open as sheet button)
@@ -222,207 +215,244 @@ export function DataTable({
   }
 
   return (
-    <div className="rounded-md border">
-      <Table>
-        <TableHeader>
-          <TableRow>
-            {/* Action column (open as sheet) */}
-            {onOpenSingleRecordAsSheet && tableMetadata && (
-              <TableHead className="w-10" />
-            )}
-            {/* Regular field columns */}
-            {visibleFields.map((field) => (
-              <TableHead
-                key={field.name}
-                className="hover:bg-muted/50 cursor-pointer select-none"
-                onClick={() => onSort(field.name)}
-              >
-                <div className="flex items-center gap-1">
-                  <span>{field.name}</span>
-                  {getSortIcon(field.name)}
-                </div>
-              </TableHead>
-            ))}
-            {/* Expanded relation field columns (manyToOne inline) */}
-            {expandedColumns.map((col) => (
-              <TableHead
-                key={`${col.relationFieldName}.${col.targetFieldName}`}
-                className="bg-muted/20 select-none"
-                title={`${col.relationFieldName}.${col.targetFieldName}`}
-              >
-                <div className="flex items-center gap-1">
-                  <span className="text-muted-foreground text-xs">
-                    {col.relationFieldName}.
-                  </span>
-                  <span>{col.targetFieldName}</span>
-                </div>
-              </TableHead>
-            ))}
-            {/* Relation columns */}
-            {hasRelations &&
-              relations.map((relation) => (
+    <>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {/* Action column (open as sheet) */}
+              {props.onOpenSingleRecordAsSheet && tableMetadata && (
+                <TableHead className="w-10" />
+              )}
+              {/* Regular field columns */}
+              {visibleFields.map((field) => (
                 <TableHead
-                  key={relation.fieldName}
-                  className="text-muted-foreground select-none"
+                  key={field.name}
+                  className="hover:bg-muted/50 cursor-pointer select-none"
+                  onClick={() => setSort(field.name)}
                 >
                   <div className="flex items-center gap-1">
-                    <span>{relation.fieldName}</span>
-                    <span className="text-xs opacity-50">
-                      ({relation.relationType === "manyToOne" ? "1" : "N"})
+                    <span>{field.name}</span>
+                    {getSortIcon(field.name)}
+                  </div>
+                </TableHead>
+              ))}
+              {/* Expanded relation field columns (manyToOne inline) */}
+              {expandedColumns.map((col) => (
+                <TableHead
+                  key={`${col.relationFieldName}.${col.targetFieldName}`}
+                  className="bg-muted/20 select-none"
+                  title={`${col.relationFieldName}.${col.targetFieldName}`}
+                >
+                  <div className="flex items-center gap-1">
+                    <span className="text-muted-foreground text-xs">
+                      {col.relationFieldName}.
                     </span>
+                    <span>{col.targetFieldName}</span>
                   </div>
                 </TableHead>
               ))}
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {data.map((row, rowIndex) => {
-            const rowId = (row.id as string) ?? `row-${rowIndex}`;
+              {/* Relation columns */}
+              {hasRelations &&
+                relations.map((relation) => (
+                  <TableHead
+                    key={relation.fieldName}
+                    className="text-muted-foreground select-none"
+                  >
+                    <div className="flex items-center gap-1">
+                      <span>{relation.fieldName}</span>
+                      <span className="text-xs opacity-50">
+                        ({relation.relationType === "manyToOne" ? "1" : "N"})
+                      </span>
+                    </div>
+                  </TableHead>
+                ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data.map((row, rowIndex) => {
+              const rowId = (row.id as string) ?? `row-${rowIndex}`;
 
-            // Check if any cell in this row is expanded
-            const expandedRelationsInRow = hasRelations
-              ? relations.filter((r) => isCellExpanded(rowId, r.fieldName))
-              : [];
-            const hasExpandedCell = expandedRelationsInRow.length > 0;
+              // Check if any cell in this row is expanded
+              const expandedRelationsInRow = hasRelations
+                ? relations.filter((r) => isCellExpanded(rowId, r.fieldName))
+                : [];
+              const hasExpandedCell = expandedRelationsInRow.length > 0;
 
-            return (
-              <Fragment key={rowId}>
-                {/* Main data row */}
-                <TableRow
-                  className={hasExpandedCell ? "border-b-0" : undefined}
-                >
-                  {/* Action cell (open as sheet) */}
-                  {onOpenSingleRecordAsSheet && tableMetadata && (
-                    <TableCell className="p-1">
-                      <button
-                        type="button"
-                        onClick={() => {
-                          if (
-                            typeof rowId === "string" &&
-                            !rowId.startsWith("row-")
-                          ) {
-                            onOpenSingleRecordAsSheet(
-                              tableMetadata.name,
-                              rowId,
-                            );
-                          }
-                        }}
-                        className="hover:bg-muted flex items-center justify-center rounded-md p-1.5 transition-colors"
-                        aria-label="シートで開く"
-                        title="シートで開く"
-                      >
-                        <ExternalLink className="text-muted-foreground size-4" />
-                      </button>
-                    </TableCell>
-                  )}
-                  {/* Regular field cells */}
-                  {visibleFields.map((field) => (
-                    <TableCell key={field.name}>
-                      {formatFieldValue(row[field.name], field)}
-                    </TableCell>
-                  ))}
-                  {/* Expanded relation field cells (manyToOne inline) */}
-                  {expandedColumns.map((col) => {
-                    const relationData = row[col.relationFieldName] as
-                      | Record<string, unknown>
-                      | null
-                      | undefined;
-                    const value = relationData?.[col.targetFieldName];
-                    return (
-                      <TableCell
-                        key={`${col.relationFieldName}.${col.targetFieldName}`}
-                        className="bg-muted/10"
-                      >
-                        {relationData ? (
-                          formatFieldValue(value, col.targetField)
-                        ) : (
-                          <span className="text-muted-foreground">-</span>
-                        )}
+              return (
+                <Fragment key={rowId}>
+                  {/* Main data row */}
+                  <TableRow
+                    className={hasExpandedCell ? "border-b-0" : undefined}
+                  >
+                    {/* Action cell (open as sheet) */}
+                    {props.onOpenSingleRecordAsSheet && tableMetadata && (
+                      <TableCell className="p-1">
+                        <button
+                          type="button"
+                          onClick={() => {
+                            if (
+                              typeof rowId === "string" &&
+                              !rowId.startsWith("row-")
+                            ) {
+                              props.onOpenSingleRecordAsSheet?.(
+                                tableMetadata.name,
+                                rowId,
+                              );
+                            }
+                          }}
+                          className="hover:bg-muted flex items-center justify-center rounded-md p-1.5 transition-colors"
+                          aria-label="シートで開く"
+                          title="シートで開く"
+                        >
+                          <ExternalLink className="text-muted-foreground size-4" />
+                        </button>
                       </TableCell>
-                    );
-                  })}
-                  {/* Relation cells with expand toggle */}
-                  {hasRelations &&
-                    relations.map((relation) => {
-                      const isExpanded = isCellExpanded(
-                        rowId,
-                        relation.fieldName,
-                      );
-                      // Get total count for oneToMany relations from the row data
-                      const relationData = row[relation.fieldName] as
-                        | { total?: number }
+                    )}
+                    {/* Regular field cells */}
+                    {visibleFields.map((field) => (
+                      <TableCell key={field.name}>
+                        {formatFieldValue(row[field.name], field)}
+                      </TableCell>
+                    ))}
+                    {/* Expanded relation field cells (manyToOne inline) */}
+                    {expandedColumns.map((col) => {
+                      const relationData = row[col.relationFieldName] as
+                        | Record<string, unknown>
+                        | null
                         | undefined;
-                      const total =
-                        relation.relationType === "oneToMany"
-                          ? relationData?.total
-                          : undefined;
+                      const value = relationData?.[col.targetFieldName];
                       return (
-                        <TableCell key={relation.fieldName} className="p-1">
-                          <button
-                            type="button"
-                            onClick={() => toggleCell(rowId, relation, row)}
-                            className="hover:bg-muted flex w-full items-center justify-center gap-1 rounded-md px-2 py-1 text-sm transition-colors"
-                            aria-label={isExpanded ? "折りたたむ" : "展開する"}
-                          >
-                            {isExpanded ? (
-                              <ChevronDown className="size-4" />
-                            ) : (
-                              <ChevronRight className="size-4" />
-                            )}
-                            <span className="text-muted-foreground text-xs">
-                              {relation.relationType === "manyToOne"
-                                ? "詳細"
-                                : total !== undefined
-                                  ? `${total}件`
-                                  : "一覧"}
-                            </span>
-                          </button>
+                        <TableCell
+                          key={`${col.relationFieldName}.${col.targetFieldName}`}
+                          className="bg-muted/10"
+                        >
+                          {relationData ? (
+                            formatFieldValue(value, col.targetField)
+                          ) : (
+                            <span className="text-muted-foreground">-</span>
+                          )}
                         </TableCell>
                       );
                     })}
-                </TableRow>
+                    {/* Relation cells with expand toggle */}
+                    {hasRelations &&
+                      relations.map((relation) => {
+                        const isExpanded = isCellExpanded(
+                          rowId,
+                          relation.fieldName,
+                        );
+                        // Get total count for oneToMany relations from the row data
+                        const relationData = row[relation.fieldName] as
+                          | { total?: number }
+                          | undefined;
+                        const total =
+                          relation.relationType === "oneToMany"
+                            ? relationData?.total
+                            : undefined;
+                        return (
+                          <TableCell key={relation.fieldName} className="p-1">
+                            <button
+                              type="button"
+                              onClick={() => toggleCell(rowId, relation, row)}
+                              className="hover:bg-muted flex w-full items-center justify-center gap-1 rounded-md px-2 py-1 text-sm transition-colors"
+                              aria-label={
+                                isExpanded ? "折りたたむ" : "展開する"
+                              }
+                            >
+                              {isExpanded ? (
+                                <ChevronDown className="size-4" />
+                              ) : (
+                                <ChevronRight className="size-4" />
+                              )}
+                              <span className="text-muted-foreground text-xs">
+                                {relation.relationType === "manyToOne"
+                                  ? "詳細"
+                                  : total !== undefined
+                                    ? `${total}件`
+                                    : "一覧"}
+                              </span>
+                            </button>
+                          </TableCell>
+                        );
+                      })}
+                  </TableRow>
 
-                {/* Expanded relation content rows - one per expanded relation */}
-                {hasExpandedCell &&
-                  expandedRelationsInRow.map((relation) => (
-                    <TableRow
-                      key={`${rowId}-${relation.fieldName}-expanded`}
-                      className="hover:bg-transparent"
-                    >
-                      <TableCell
-                        colSpan={totalColumns}
-                        className="bg-muted/20 p-4"
+                  {/* Expanded relation content rows - one per expanded relation */}
+                  {hasExpandedCell &&
+                    expandedRelationsInRow.map((relation) => (
+                      <TableRow
+                        key={`${rowId}-${relation.fieldName}-expanded`}
+                        className="hover:bg-transparent"
                       >
-                        <div className="relative">
-                          <button
-                            type="button"
-                            onClick={() => toggleCell(rowId, relation, row)}
-                            className="hover:bg-muted absolute top-0 right-0 rounded-md p-1 transition-colors"
-                            aria-label="閉じる"
-                          >
-                            <X className="text-muted-foreground size-4" />
-                          </button>
-                          <RelationContent
-                            relation={relation}
-                            result={getRelationData(relation, rowId, row)}
-                            targetTableMetadata={
-                              tableMetadataMap?.[relation.targetTable]
-                            }
-                            parentRowId={rowId}
-                            onOpenAsSheet={onOpenAsSheet}
-                            onOpenSingleRecordAsSheet={
-                              onOpenSingleRecordAsSheet
-                            }
-                          />
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-              </Fragment>
-            );
-          })}
-        </TableBody>
-      </Table>
-    </div>
+                        <TableCell
+                          colSpan={totalColumns}
+                          className="bg-muted/20 p-4"
+                        >
+                          <div className="relative">
+                            <button
+                              type="button"
+                              onClick={() => toggleCell(rowId, relation, row)}
+                              className="hover:bg-muted absolute top-0 right-0 rounded-md p-1 transition-colors"
+                              aria-label="閉じる"
+                            >
+                              <X className="text-muted-foreground size-4" />
+                            </button>
+                            <RelationContent
+                              relation={relation}
+                              result={getRelationData(relation, rowId, row)}
+                              targetTableMetadata={
+                                metadata?.[relation.targetTable]
+                              }
+                              parentRowId={rowId}
+                              onOpenAsSheet={props.onOpenAsSheet}
+                              onOpenSingleRecordAsSheet={
+                                props.onOpenSingleRecordAsSheet
+                              }
+                            />
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                </Fragment>
+              );
+            })}
+          </TableBody>
+        </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>
+    </>
   );
 }