@izumisy-tailor/tailor-data-viewer 0.1.42 → 0.1.44

package/package.json

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

package/src/component/column-selector.test.tsx

@@ -71,13 +71,25 @@ describe("ColumnSelector", () => {
       expect(screen.getByRole("button")).toHaveTextContent("カラム選択");
     });
 
-    it("選択数/総数が正しく表示される", () => {
+    it("選択数/総数が正しく表示される（columns定義がある場合はその数で表示）", () => {
       render(
         <TestWrapper columns={["id", "name"]}>
           <ColumnSelector />
         </TestWrapper>,
       );
 
+      // columns が ["id", "name"] なので、2/2 となる
+      expect(screen.getByRole("button")).toHaveTextContent("(2/2)");
+    });
+
+    it("ignoreColumns=true の場合、全フィールド数が表示される", () => {
+      render(
+        <TestWrapper columns={["id", "name"]}>
+          <ColumnSelector ignoreColumns />
+        </TestWrapper>,
+      );
+
+      // ignoreColumns=true なので、テーブルの全フィールド 4 つが対象
       expect(screen.getByRole("button")).toHaveTextContent("(2/4)");
     });
   });
@@ -100,7 +112,7 @@ describe("ColumnSelector", () => {
       });
     });
 
-    it("フィールド一覧が表示される", async () => {
+    it("フィールド一覧がcolumns定義に基づいて表示される", async () => {
       const user = userEvent.setup();
       render(
         <TestWrapper columns={["id", "name"]}>
@@ -110,6 +122,27 @@ describe("ColumnSelector", () => {
 
       await user.click(screen.getByRole("button", { name: /カラム選択/ }));
 
+      await waitFor(() => {
+        const body = within(document.body);
+        // columns定義に含まれるフィールドのみ表示される
+        expect(body.getByText("id")).toBeInTheDocument();
+        expect(body.getByText("name")).toBeInTheDocument();
+        // columns定義に含まれないフィールドは表示されない
+        expect(body.queryByText("email")).not.toBeInTheDocument();
+        expect(body.queryByText("createdAt")).not.toBeInTheDocument();
+      });
+    });
+
+    it("ignoreColumns=true の場合、全フィールドが表示される", async () => {
+      const user = userEvent.setup();
+      render(
+        <TestWrapper columns={["id", "name"]}>
+          <ColumnSelector ignoreColumns />
+        </TestWrapper>,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
       await waitFor(() => {
         const body = within(document.body);
         expect(body.getByText("id")).toBeInTheDocument();
@@ -123,9 +156,10 @@ describe("ColumnSelector", () => {
   describe("フィールド選択", () => {
     it("フィールドクリックで選択が切り替わる", async () => {
       const user = userEvent.setup();
+      // ignoreColumns=true で全フィールドを表示してテスト
       render(
         <TestWrapper columns={["id"]}>
-          <ColumnSelector />
+          <ColumnSelector ignoreColumns />
         </TestWrapper>,
       );
 
@@ -149,9 +183,10 @@ describe("ColumnSelector", () => {
 
     it("全選択ボタンで全フィールドが選択される", async () => {
       const user = userEvent.setup();
+      // ignoreColumns=true で全フィールドを表示してテスト
       render(
         <TestWrapper columns={[]}>
-          <ColumnSelector />
+          <ColumnSelector ignoreColumns />
         </TestWrapper>,
       );
 
@@ -173,9 +208,10 @@ describe("ColumnSelector", () => {
 
     it("全解除ボタンで全フィールドが解除される", async () => {
       const user = userEvent.setup();
+      // ignoreColumns=true で全フィールドを表示してテスト
       render(
         <TestWrapper columns={["id", "name"]}>
-          <ColumnSelector />
+          <ColumnSelector ignoreColumns />
         </TestWrapper>,
       );
 
@@ -251,7 +287,7 @@ describe("ColumnSelector", () => {
       relations: mockRelations,
     };
 
-    it("リレーションセクションが表示される", async () => {
+    it("リレーションセクションが表示される（ignoreColumns=trueの場合）", async () => {
       const user = userEvent.setup();
       render(
         <TestWrapper
@@ -259,7 +295,7 @@ describe("ColumnSelector", () => {
           metadata={mockRelationTableMetadataMap}
           columns={["id"]}
         >
-          <ColumnSelector />
+          <ColumnSelector ignoreColumns />
         </TestWrapper>,
       );
 
@@ -272,13 +308,13 @@ describe("ColumnSelector", () => {
       });
     });
 
-    it("リレーションフィールドが表示される", async () => {
+    it("columnsにリレーションが含まれている場合、そのリレーションセクションが表示される", async () => {
       const user = userEvent.setup();
       render(
         <TestWrapper
           tableMetadata={mockTableMetadataWithRelations}
           metadata={mockRelationTableMetadataMap}
-          columns={["id"]}
+          columns={["id", "author"]}
         >
           <ColumnSelector />
         </TestWrapper>,
@@ -286,6 +322,30 @@ describe("ColumnSelector", () => {
 
       await user.click(screen.getByRole("button", { name: /カラム選択/ }));
 
+      await waitFor(() => {
+        const body = within(document.body);
+        // author はリレーションなのでリレーションセクションが表示される
+        expect(body.getByText("リレーション (1対1)")).toBeInTheDocument();
+        expect(body.getByText("author")).toBeInTheDocument();
+        // comments は columns に含まれていないので表示されない
+        expect(body.queryByText("comments")).not.toBeInTheDocument();
+      });
+    });
+
+    it("リレーションフィールドが表示される（ignoreColumns=trueの場合）", async () => {
+      const user = userEvent.setup();
+      render(
+        <TestWrapper
+          tableMetadata={mockTableMetadataWithRelations}
+          metadata={mockRelationTableMetadataMap}
+          columns={["id"]}
+        >
+          <ColumnSelector ignoreColumns />
+        </TestWrapper>,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
       await waitFor(() => {
         const body = within(document.body);
         expect(body.getByText("author")).toBeInTheDocument();
@@ -301,7 +361,7 @@ describe("ColumnSelector", () => {
           metadata={mockRelationTableMetadataMap}
           columns={["id"]}
         >
-          <ColumnSelector />
+          <ColumnSelector ignoreColumns />
         </TestWrapper>,
       );
 

package/src/component/column-selector.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { Columns3 } from "lucide-react";
 import { Checkbox } from "./ui/checkbox";
 import { Button } from "./ui/button";
@@ -15,14 +16,26 @@ import { useDataViewer } from "./contexts";
 import { useToolbar } from "./contexts";
 import { useLabels } from "./hooks/use-labels";
 
+/**
+ * Props for ColumnSelector component
+ */
+export interface ColumnSelectorProps {
+  /**
+   * If true, ignore the columns prop definition and show all fields in the table.
+   * If false (default), only show fields that are defined in the columns prop.
+   */
+  ignoreColumns?: boolean;
+}
+
 /**
  * Column visibility selector with checkboxes
  * Must be used within DataViewer.Root and DataViewer.Toolbar context
  */
-export function ColumnSelector() {
+export function ColumnSelector({ ignoreColumns = false }: ColumnSelectorProps) {
   const {
     tableMetadata,
     metadata,
+    columnDefinitions,
     selectedFields,
     toggleField,
     selectAllFields,
@@ -43,27 +56,76 @@ export function ColumnSelector() {
   const onOpenChange = (isOpen: boolean) =>
     setActivePanel(isOpen ? "column" : null);
 
+  // Get allowed field names from column definitions
+  const allowedFieldNames = useMemo(() => {
+    if (ignoreColumns || !columnDefinitions) {
+      return null; // null means all fields are allowed
+    }
+    return new Set(columnDefinitions.map((col) => col.baseField));
+  }, [ignoreColumns, columnDefinitions]);
+
   // Filter out nested fields as they're not directly selectable
-  const selectableFields = fields.filter((field) => field.type !== "nested");
+  // Also filter by allowedFieldNames if columns are defined
+  const selectableFields = fields.filter(
+    (field) =>
+      field.type !== "nested" &&
+      (allowedFieldNames === null || allowedFieldNames.has(field.name)),
+  );
 
-  // Separate manyToOne and oneToMany relations
+  // Separate manyToOne and oneToMany relations, filtered by allowedFieldNames
   const manyToOneRelations = relations.filter(
-    (r) => r.relationType === "manyToOne",
+    (r) =>
+      r.relationType === "manyToOne" &&
+      (allowedFieldNames === null || allowedFieldNames.has(r.fieldName)),
   );
   const oneToManyRelations = relations.filter(
-    (r) => r.relationType === "oneToMany",
+    (r) =>
+      r.relationType === "oneToMany" &&
+      (allowedFieldNames === null || allowedFieldNames.has(r.fieldName)),
   );
 
-  // Count expanded relation fields
-  const expandedFieldCount = Object.values(expandedRelationFields).reduce(
-    (sum, fields) => sum + fields.length,
-    0,
-  );
+  // Count expanded relation fields (only for allowed relations)
+  const filteredExpandedRelationFields = useMemo(() => {
+    if (allowedFieldNames === null) {
+      return expandedRelationFields;
+    }
+    const filtered: typeof expandedRelationFields = {};
+    for (const [key, value] of Object.entries(expandedRelationFields)) {
+      if (allowedFieldNames.has(key)) {
+        filtered[key] = value;
+      }
+    }
+    return filtered;
+  }, [expandedRelationFields, allowedFieldNames]);
+
+  const expandedFieldCount = Object.values(
+    filteredExpandedRelationFields,
+  ).reduce((sum, fields) => sum + fields.length, 0);
+
+  const filteredRelationsCount =
+    manyToOneRelations.length + oneToManyRelations.length;
+
+  // Filter selected fields and relations to only count those in the allowed list
+  const filteredSelectedFields = useMemo(() => {
+    if (allowedFieldNames === null) {
+      return selectedFields;
+    }
+    return selectedFields.filter((f) => allowedFieldNames.has(f));
+  }, [selectedFields, allowedFieldNames]);
+
+  const filteredSelectedRelations = useMemo(() => {
+    if (allowedFieldNames === null) {
+      return selectedRelations;
+    }
+    return selectedRelations.filter((r) => allowedFieldNames.has(r));
+  }, [selectedRelations, allowedFieldNames]);
 
   const totalSelectable =
-    selectableFields.length + relations.length + expandedFieldCount;
+    selectableFields.length + filteredRelationsCount + expandedFieldCount;
   const totalSelected =
-    selectedFields.length + selectedRelations.length + expandedFieldCount;
+    filteredSelectedFields.length +
+    filteredSelectedRelations.length +
+    expandedFieldCount;
 
   return (
     <DropdownMenu open={open} onOpenChange={onOpenChange}>

package/src/component/create-data-viewer.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import type { TableMetadataMap } from "../generator/metadata-generator";
 import type { GraphQLFetcher } from "../graphql/fetcher";
 import type { SavedViewStore, SavedViewStoreFactory } from "../store/types";
-import type { Renderers, Labels, UntypedColumnDef } from "./types";
+import type { Renderers, Labels, ColumnDef } from "./types";
 import {
   DataViewerProvider,
   type DataViewerInitialData,
@@ -47,7 +47,7 @@ export interface DataViewerTableDataProviderProps<
    * If not specified, all fields will be selected by default.
    * The order of columns determines the display order.
    */
-  columns?: UntypedColumnDef[];
+  columns?: ColumnDef<TMetadata, TTableName>[];
   /** Initial data for filters and sort (type-safe when metadata is `as const`) */
   initialData?: DataViewerInitialData<TMetadata, TTableName>;
 }

package/src/component/index.ts

@@ -38,6 +38,7 @@ export type { ToolbarContextValue, ToolbarActivePanel } from "./contexts";
 
 // Individual UI components (must be used within DataViewer.TableDataProvider)
 export { ColumnSelector } from "./column-selector";
+export type { ColumnSelectorProps } from "./column-selector";
 export { SearchFilterForm } from "./search-filter";
 export type { SearchFilterFormProps } from "./search-filter";
 export { VariationFilterForm } from "./variation-filter";

package/src/component/search-filter.test.tsx

@@ -641,10 +641,10 @@ describe("SearchFilterForm", () => {
     });
   });
 
-  describe("selectedFieldsによるフィルタリング", () => {
+  describe("columnsによるフィルタリング", () => {
     /**
      * AllFieldsWrapper: columnsをすべてのフィルター可能なフィールドに設定する
-     * これにより、ignoreSelectedFieldsの効果をテストできる
+     * これにより、ignoreColumnsの効果をテストできる
      */
     function AllFieldsWrapper({ children, initialFilters = [] }: WrapperProps) {
       return (
@@ -671,7 +671,7 @@ describe("SearchFilterForm", () => {
       );
     }
 
-    it("デフォルトではselectedFieldsに含まれるフィールドのみがフィルター対象", async () => {
+    it("デフォルトではcolumns定義に含まれるフィールドのみがフィルター対象", async () => {
       // TestWrapperはcolumns: ["id", "name"]を設定
       // この場合、emailやageは選択可能フィールドに表示されないはず
       const user = userEvent.setup();
@@ -689,17 +689,17 @@ describe("SearchFilterForm", () => {
         expect(body.getByText("フィルターを追加")).toBeInTheDocument();
       });
 
-      // フィールドセレクトが存在することを確認（デフォルトのselectedFieldsにはidとnameのみ）
+      // フィールドセレクトが存在することを確認（デフォルトのcolumnsにはidとnameのみ）
       const selectTrigger = screen.getByRole("combobox");
       expect(selectTrigger).toBeInTheDocument();
     });
 
-    it("ignoreSelectedFields=trueの場合、selectedFieldsに関係なく全フィルター可能フィールドが表示", async () => {
-      // 制限されたselectedFieldsでもignoreSelectedFields=trueなら全フィールド表示
+    it("ignoreColumns=trueの場合、columns定義に関係なく全フィルター可能フィールドが表示", async () => {
+      // 制限されたcolumnsでもignoreColumns=trueなら全フィールド表示
       const user = userEvent.setup();
       render(
         <TestWrapper>
-          <SearchFilterForm ignoreSelectedFields />
+          <SearchFilterForm ignoreColumns />
         </TestWrapper>,
       );
 
@@ -715,7 +715,7 @@ describe("SearchFilterForm", () => {
       expect(selectTrigger).toBeInTheDocument();
     });
 
-    it("selectedFieldsが全フィールドの場合、ignoreSelectedFieldsなしでも全フィールドが表示される", async () => {
+    it("columnsが全フィールドの場合、ignoreColumnsなしでも全フィールドが表示される", async () => {
       const user = userEvent.setup();
       render(
         <AllFieldsWrapper>

package/src/component/search-filter.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useMemo } from "react";
 import { Search, Plus, X, Filter } from "lucide-react";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
@@ -47,10 +47,10 @@ function isFilterableField(field: FieldMetadata): boolean {
  */
 export interface SearchFilterFormProps {
   /**
-   * If true, ignore selectedFields and show all filterable fields.
-   * If false (default), only show fields that are in selectedFields.
+   * If true, ignore the columns prop definition and show all filterable fields in the table.
+   * If false (default), only show fields that are defined in the columns prop.
    */
-  ignoreSelectedFields?: boolean;
+  ignoreColumns?: boolean;
 }
 
 /**
@@ -59,9 +59,9 @@ export interface SearchFilterFormProps {
  * Must be used within DataViewer.Root and DataViewer.Toolbar context
  */
 export function SearchFilterForm({
-  ignoreSelectedFields = false,
+  ignoreColumns = false,
 }: SearchFilterFormProps = {}) {
-  const { tableMetadata, filters, setFilters, selectedFields } =
+  const { tableMetadata, filters, setFilters, columnDefinitions } =
     useDataViewer();
   const { activePanel, setActivePanel } = useToolbar();
   const { getLabel } = useLabels();
@@ -80,13 +80,21 @@ export function SearchFilterForm({
   const [inputValue, setInputValue] = useState<string>("");
   const [booleanValue, setBooleanValue] = useState<boolean>(false);
 
+  // Get allowed field names from column definitions
+  const allowedFieldNames = useMemo(() => {
+    if (ignoreColumns || !columnDefinitions) {
+      return null; // null means all fields are allowed
+    }
+    return new Set(columnDefinitions.map((col) => col.baseField));
+  }, [ignoreColumns, columnDefinitions]);
+
   // Get filterable fields excluding already-filtered fields
-  // If ignoreSelectedFields is false, also filter to only include selected fields
+  // If ignoreColumns is false and columnDefinitions exist, only include fields from column definitions
   const filterableFields = fields.filter(
     (f) =>
       isFilterableField(f) &&
       !searchFilters.some((filter) => filter.field === f.name) &&
-      (ignoreSelectedFields || selectedFields.includes(f.name)),
+      (allowedFieldNames === null || allowedFieldNames.has(f.name)),
   );
 
   const selectedFieldMetadata = fields.find((f) => f.name === selectedField);