@izumisy-tailor/tailor-data-viewer 0.1.17 → 0.1.19

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.1.17",
+  "version": "0.1.19",
   "type": "module",
   "description": "Flexible data viewer component for Tailor Platform",
   "files": [
@@ -66,8 +66,13 @@
   "devDependencies": {
     "@tailor-platform/app-shell": "^0.24.0",
     "@tailor-platform/sdk": "^1.6.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
+    "happy-dom": "^20.4.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tsdown": "^0.20.1",

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

@@ -0,0 +1,327 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, within, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ColumnSelector } from "./column-selector";
+import type {
+  FieldMetadata,
+  RelationMetadata,
+  TableMetadataMap,
+} from "../generator/metadata-generator";
+
+const mockFields: FieldMetadata[] = [
+  { name: "id", type: "uuid", required: true, description: "ID" },
+  { name: "name", type: "string", required: true, description: "名前" },
+  { name: "email", type: "string", required: false, description: "メール" },
+  { name: "createdAt", type: "datetime", required: false },
+];
+
+describe("ColumnSelector", () => {
+  describe("基本的な表示", () => {
+    it("カラム選択ボタンが表示される", () => {
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id", "name"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+        />,
+      );
+
+      expect(screen.getByRole("button")).toHaveTextContent("カラム選択");
+    });
+
+    it("選択数/総数が正しく表示される", () => {
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id", "name"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+        />,
+      );
+
+      expect(screen.getByRole("button")).toHaveTextContent("(2/4)");
+    });
+  });
+
+  describe("ドロップダウンメニュー", () => {
+    it("ボタンクリックでドロップダウンが開く", async () => {
+      const user = userEvent.setup();
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id", "name"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("全選択")).toBeInTheDocument();
+        expect(body.getByText("全解除")).toBeInTheDocument();
+      });
+    });
+
+    it("フィールド一覧が表示される", async () => {
+      const user = userEvent.setup();
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id", "name"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("id")).toBeInTheDocument();
+        expect(body.getByText("name")).toBeInTheDocument();
+        expect(body.getByText("email")).toBeInTheDocument();
+        expect(body.getByText("createdAt")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("フィールド選択", () => {
+    it("onToggle が呼ばれる", async () => {
+      const user = userEvent.setup();
+      const onToggle = vi.fn();
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id"]}
+          onToggle={onToggle}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("name")).toBeInTheDocument();
+      });
+
+      const body = within(document.body);
+      const nameLabel = body.getByText("name").closest("label")!;
+      await user.click(nameLabel);
+
+      expect(onToggle).toHaveBeenCalledWith("name");
+    });
+
+    it("全選択ボタンで onSelectAll が呼ばれる", async () => {
+      const user = userEvent.setup();
+      const onSelectAll = vi.fn();
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={[]}
+          onToggle={vi.fn()}
+          onSelectAll={onSelectAll}
+          onDeselectAll={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("全選択")).toBeInTheDocument();
+      });
+
+      const body = within(document.body);
+      await user.click(body.getByText("全選択"));
+
+      expect(onSelectAll).toHaveBeenCalled();
+    });
+
+    it("全解除ボタンで onDeselectAll が呼ばれる", async () => {
+      const user = userEvent.setup();
+      const onDeselectAll = vi.fn();
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id", "name"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={onDeselectAll}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("全解除")).toBeInTheDocument();
+      });
+
+      const body = within(document.body);
+      await user.click(body.getByText("全解除"));
+
+      expect(onDeselectAll).toHaveBeenCalled();
+    });
+  });
+
+  describe("リレーション", () => {
+    const mockRelations: RelationMetadata[] = [
+      {
+        fieldName: "author",
+        targetTable: "User",
+        relationType: "manyToOne",
+        foreignKeyField: "authorId",
+      },
+      {
+        fieldName: "comments",
+        targetTable: "Comment",
+        relationType: "oneToMany",
+        foreignKeyField: "postId",
+      },
+    ];
+
+    const mockTableMetadataMap: TableMetadataMap = {
+      User: {
+        name: "User",
+        pluralForm: "Users",
+        readAllowedRoles: [],
+        fields: [
+          { name: "id", type: "uuid", required: true },
+          { name: "name", type: "string", required: true },
+          { name: "email", type: "string", required: false },
+        ],
+        relations: [],
+      },
+      Comment: {
+        name: "Comment",
+        pluralForm: "Comments",
+        readAllowedRoles: [],
+        fields: [
+          { name: "id", type: "uuid", required: true },
+          { name: "content", type: "string", required: true },
+        ],
+        relations: [],
+      },
+    };
+
+    it("リレーションセクションが表示される", async () => {
+      const user = userEvent.setup();
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+          relations={mockRelations}
+          selectedRelations={[]}
+          onToggleRelation={vi.fn()}
+          tableMetadataMap={mockTableMetadataMap}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("リレーション (1対1)")).toBeInTheDocument();
+        expect(body.getByText("リレーション (1対多)")).toBeInTheDocument();
+      });
+    });
+
+    it("リレーションフィールドが表示される", async () => {
+      const user = userEvent.setup();
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+          relations={mockRelations}
+          selectedRelations={[]}
+          onToggleRelation={vi.fn()}
+          tableMetadataMap={mockTableMetadataMap}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("author")).toBeInTheDocument();
+        expect(body.getByText("comments")).toBeInTheDocument();
+      });
+    });
+
+    it("リレーションの切り替えで onToggleRelation が呼ばれる", async () => {
+      const user = userEvent.setup();
+      const onToggleRelation = vi.fn();
+      render(
+        <ColumnSelector
+          fields={mockFields}
+          selectedFields={["id"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+          relations={mockRelations}
+          selectedRelations={[]}
+          onToggleRelation={onToggleRelation}
+          tableMetadataMap={mockTableMetadataMap}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("author")).toBeInTheDocument();
+      });
+
+      const body = within(document.body);
+      const authorLabel = body.getByText("author").closest("label")!;
+      await user.click(authorLabel);
+
+      expect(onToggleRelation).toHaveBeenCalledWith("author");
+    });
+  });
+
+  describe("ネストフィールドのフィルタリング", () => {
+    it("nested タイプのフィールドは表示されない", async () => {
+      const user = userEvent.setup();
+      const fieldsWithNested: FieldMetadata[] = [
+        ...mockFields,
+        { name: "metadata", type: "nested", required: false },
+      ];
+
+      render(
+        <ColumnSelector
+          fields={fieldsWithNested}
+          selectedFields={["id"]}
+          onToggle={vi.fn()}
+          onSelectAll={vi.fn()}
+          onDeselectAll={vi.fn()}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("id")).toBeInTheDocument();
+      });
+
+      const body = within(document.body);
+      expect(body.queryByText("metadata")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/component/column-selector.tsx

@@ -44,6 +44,10 @@ interface ColumnSelectorProps {
     relationFieldName: string,
     fieldName: string,
   ) => boolean;
+  /** Controlled open state */
+  open?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
 }
 
 /**
@@ -62,6 +66,8 @@ export function ColumnSelector({
   expandedRelationFields = {},
   onToggleExpandedRelationField,
   isExpandedRelationFieldSelected,
+  open,
+  onOpenChange,
 }: ColumnSelectorProps) {
   // Filter out nested fields as they're not directly selectable
   const selectableFields = fields.filter((field) => field.type !== "nested");
@@ -86,7 +92,7 @@ export function ColumnSelector({
     selectedFields.length + selectedRelations.length + expandedFieldCount;
 
   return (
-    <DropdownMenu>
+    <DropdownMenu open={open} onOpenChange={onOpenChange}>
       <DropdownMenuTrigger asChild>
         <Button variant="outline" size="sm" className="gap-1">
           <Columns3 className="size-4" />

package/src/component/data-table-toolbar.test.tsx

@@ -0,0 +1,216 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, within, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { DataTableToolbar } from "./data-table-toolbar";
+import type { FieldMetadata } from "../generator/metadata-generator";
+
+const mockFields: FieldMetadata[] = [
+  { name: "id", type: "uuid", required: true, description: "ID" },
+  { name: "name", type: "string", required: true, description: "名前" },
+  { name: "email", type: "string", required: false, description: "メール" },
+  { name: "age", type: "number", required: false, description: "年齢" },
+];
+
+const createDefaultProps = () => ({
+  columnSelector: {
+    fields: mockFields,
+    selectedFields: ["id", "name"],
+    onToggle: vi.fn(),
+    onSelectAll: vi.fn(),
+    onDeselectAll: vi.fn(),
+  },
+  searchFilter: {
+    fields: mockFields,
+    filters: [],
+    onFiltersChange: vi.fn(),
+  },
+});
+
+describe("DataTableToolbar", () => {
+  describe("基本的な表示", () => {
+    it("カラム選択ボタンが表示される", () => {
+      render(<DataTableToolbar {...createDefaultProps()} />);
+      expect(
+        screen.getByRole("button", { name: /カラム選択/ }),
+      ).toBeInTheDocument();
+    });
+
+    it("検索ボタンが表示される", () => {
+      render(<DataTableToolbar {...createDefaultProps()} />);
+      expect(screen.getByRole("button", { name: /検索/ })).toBeInTheDocument();
+    });
+
+    it("CSV ボタンが表示される (onDownloadCsv が渡された場合)", () => {
+      render(
+        <DataTableToolbar {...createDefaultProps()} onDownloadCsv={vi.fn()} />,
+      );
+      expect(screen.getByRole("button", { name: /CSV/ })).toBeInTheDocument();
+    });
+
+    it("更新ボタンが表示される (onRefresh が渡された場合)", () => {
+      render(
+        <DataTableToolbar {...createDefaultProps()} onRefresh={vi.fn()} />,
+      );
+      expect(screen.getByRole("button", { name: /更新/ })).toBeInTheDocument();
+    });
+  });
+
+  describe("パネルの排他制御", () => {
+    it("カラム選択パネルを開くと検索パネルは開かない", async () => {
+      const user = userEvent.setup();
+      render(<DataTableToolbar {...createDefaultProps()} />);
+
+      // カラム選択パネルを開く
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      // カラム選択のコンテンツが表示されることを確認
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("全選択")).toBeInTheDocument();
+      });
+
+      // 検索パネルのコンテンツが表示されていないことを確認
+      const body = within(document.body);
+      expect(body.queryByText("検索フィルター")).not.toBeInTheDocument();
+    });
+
+    it("検索パネルを開くとカラム選択パネルは開かない", async () => {
+      const user = userEvent.setup();
+      render(<DataTableToolbar {...createDefaultProps()} />);
+
+      // 検索パネルを開く
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      // 検索パネルのコンテンツが表示されることを確認
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("検索フィルター")).toBeInTheDocument();
+      });
+
+      // カラム選択のコンテンツが表示されていないことを確認
+      const body = within(document.body);
+      expect(body.queryByText("全選択")).not.toBeInTheDocument();
+    });
+
+    it("カラム選択パネルが開いている状態で検索パネルを開くとカラム選択パネルが閉じる", async () => {
+      const user = userEvent.setup({ pointerEventsCheck: 0 });
+      render(<DataTableToolbar {...createDefaultProps()} />);
+
+      // カラム選択パネルを開く
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("全選択")).toBeInTheDocument();
+      });
+
+      // 検索パネルを開く (ドロップダウンが開いているとaria-hiddenとpointer-events:noneになるため特別な設定を使用)
+      const searchButton = screen.getByRole("button", {
+        name: /検索/,
+        hidden: true,
+      });
+      await user.click(searchButton);
+
+      // カラム選択パネルが閉じることを確認
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.queryByText("全選択")).not.toBeInTheDocument();
+      });
+
+      // 検索パネルを開く（もう一度クリックが必要な場合）
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+
+      // 検索パネルが開くことを確認
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("検索フィルター")).toBeInTheDocument();
+      });
+    });
+
+    it("検索パネルが開いている状態でカラム選択パネルを開くと検索パネルが閉じる", async () => {
+      const user = userEvent.setup({ pointerEventsCheck: 0 });
+      render(<DataTableToolbar {...createDefaultProps()} />);
+
+      // 検索パネルを開く
+      await user.click(screen.getByRole("button", { name: /検索/ }));
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("検索フィルター")).toBeInTheDocument();
+      });
+
+      // カラム選択パネルを開く
+      const columnButton = screen.getByRole("button", {
+        name: /カラム選択/,
+        hidden: true,
+      });
+      await user.click(columnButton);
+
+      // 検索パネルが閉じることを確認
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.queryByText("検索フィルター")).not.toBeInTheDocument();
+      });
+
+      // カラム選択パネルを開く（もう一度クリックが必要な場合）
+      await user.click(screen.getByRole("button", { name: /カラム選択/ }));
+
+      // カラム選択パネルが開くことを確認
+      await waitFor(() => {
+        const body = within(document.body);
+        expect(body.getByText("全選択")).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("アクションボタン", () => {
+    it("CSV ボタンクリックで onDownloadCsv が呼ばれる", async () => {
+      const user = userEvent.setup();
+      const onDownloadCsv = vi.fn();
+      render(
+        <DataTableToolbar
+          {...createDefaultProps()}
+          onDownloadCsv={onDownloadCsv}
+        />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /CSV/ }));
+      expect(onDownloadCsv).toHaveBeenCalled();
+    });
+
+    it("更新ボタンクリックで onRefresh が呼ばれる", async () => {
+      const user = userEvent.setup();
+      const onRefresh = vi.fn();
+      render(
+        <DataTableToolbar {...createDefaultProps()} onRefresh={onRefresh} />,
+      );
+
+      await user.click(screen.getByRole("button", { name: /更新/ }));
+      expect(onRefresh).toHaveBeenCalled();
+    });
+
+    it("loading 中は CSV と更新ボタンが無効になる", () => {
+      render(
+        <DataTableToolbar
+          {...createDefaultProps()}
+          onDownloadCsv={vi.fn()}
+          onRefresh={vi.fn()}
+          loading={true}
+        />,
+      );
+
+      expect(screen.getByRole("button", { name: /CSV/ })).toBeDisabled();
+      expect(screen.getByRole("button", { name: /更新/ })).toBeDisabled();
+    });
+
+    it("csvDisabled が true の場合、CSV ボタンが無効になる", () => {
+      render(
+        <DataTableToolbar
+          {...createDefaultProps()}
+          onDownloadCsv={vi.fn()}
+          csvDisabled={true}
+        />,
+      );
+
+      expect(screen.getByRole("button", { name: /CSV/ })).toBeDisabled();
+    });
+  });
+});

package/src/component/data-table-toolbar.tsx

@@ -0,0 +1,165 @@
+import { useState, useCallback } from "react";
+import { RefreshCw, Download } from "lucide-react";
+import { Button } from "./ui/button";
+import type {
+  FieldMetadata,
+  RelationMetadata,
+  TableMetadataMap,
+  ExpandedRelationFields,
+} from "../generator/metadata-generator";
+import { ColumnSelector } from "./column-selector";
+import { SearchFilterForm } from "./search-filter";
+import { ViewSave } from "./view-save-load";
+import type { SearchFilters } from "./types";
+
+/**
+ * Active panel type - only one panel can be open at a time
+ */
+export type ActivePanel = "column" | "search" | null;
+
+interface ColumnSelectorConfig {
+  fields: FieldMetadata[];
+  selectedFields: string[];
+  onToggle: (fieldName: string) => void;
+  onSelectAll: () => void;
+  onDeselectAll: () => void;
+  relations?: RelationMetadata[];
+  selectedRelations?: string[];
+  onToggleRelation?: (fieldName: string) => void;
+  tableMetadataMap?: TableMetadataMap;
+  expandedRelationFields?: ExpandedRelationFields;
+  onToggleExpandedRelationField?: (
+    relationFieldName: string,
+    fieldName: string,
+  ) => void;
+  isExpandedRelationFieldSelected?: (
+    relationFieldName: string,
+    fieldName: string,
+  ) => boolean;
+}
+
+interface SearchFilterConfig {
+  fields: FieldMetadata[];
+  filters: SearchFilters;
+  onFiltersChange: (filters: SearchFilters) => void;
+}
+
+interface ViewSaveConfig {
+  tableName: string;
+  filters: SearchFilters;
+  selectedFields: string[];
+  selectedRelations: string[];
+  expandedRelationFields: ExpandedRelationFields;
+}
+
+interface DataTableToolbarProps {
+  /** Column selector configuration */
+  columnSelector: ColumnSelectorConfig;
+  /** Search filter configuration */
+  searchFilter: SearchFilterConfig;
+  /** View save configuration (optional - hidden if not provided) */
+  viewSave?: ViewSaveConfig;
+  /** CSV download handler */
+  onDownloadCsv?: () => void;
+  /** Refresh handler */
+  onRefresh?: () => void;
+  /** Whether the table is loading */
+  loading?: boolean;
+  /** Whether CSV download is disabled */
+  csvDisabled?: boolean;
+}
+
+/**
+ * Data table toolbar component
+ * Combines column selector, search filter, view save, and action buttons
+ * Ensures only one panel can be open at a time
+ */
+export function DataTableToolbar({
+  columnSelector,
+  searchFilter,
+  viewSave,
+  onDownloadCsv,
+  onRefresh,
+  loading = false,
+  csvDisabled = false,
+}: DataTableToolbarProps) {
+  // Active panel state - only one panel can be open at a time
+  const [activePanel, setActivePanel] = useState<ActivePanel>(null);
+
+  const handleColumnPanelChange = useCallback((open: boolean) => {
+    setActivePanel(open ? "column" : null);
+  }, []);
+
+  const handleSearchPanelChange = useCallback((open: boolean) => {
+    setActivePanel(open ? "search" : null);
+  }, []);
+
+  return (
+    <div className="flex items-center gap-4">
+      <ColumnSelector
+        fields={columnSelector.fields}
+        selectedFields={columnSelector.selectedFields}
+        onToggle={columnSelector.onToggle}
+        onSelectAll={columnSelector.onSelectAll}
+        onDeselectAll={columnSelector.onDeselectAll}
+        relations={columnSelector.relations}
+        selectedRelations={columnSelector.selectedRelations}
+        onToggleRelation={columnSelector.onToggleRelation}
+        tableMetadataMap={columnSelector.tableMetadataMap}
+        expandedRelationFields={columnSelector.expandedRelationFields}
+        onToggleExpandedRelationField={
+          columnSelector.onToggleExpandedRelationField
+        }
+        isExpandedRelationFieldSelected={
+          columnSelector.isExpandedRelationFieldSelected
+        }
+        open={activePanel === "column"}
+        onOpenChange={handleColumnPanelChange}
+      />
+
+      <SearchFilterForm
+        fields={searchFilter.fields}
+        filters={searchFilter.filters}
+        onFiltersChange={searchFilter.onFiltersChange}
+        open={activePanel === "search"}
+        onOpenChange={handleSearchPanelChange}
+      />
+
+      {viewSave && (
+        <ViewSave
+          tableName={viewSave.tableName}
+          filters={viewSave.filters}
+          selectedFields={viewSave.selectedFields}
+          selectedRelations={viewSave.selectedRelations}
+          expandedRelationFields={viewSave.expandedRelationFields}
+        />
+      )}
+
+      <div className="flex-1" />
+
+      {onDownloadCsv && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onDownloadCsv}
+          disabled={loading || csvDisabled}
+        >
+          <Download className="size-4" />
+          CSV
+        </Button>
+      )}
+
+      {onRefresh && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={onRefresh}
+          disabled={loading}
+        >
+          <RefreshCw className={`size-4 ${loading ? "animate-spin" : ""}`} />
+          更新
+        </Button>
+      )}
+    </div>
+  );
+}

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

@@ -1,7 +1,5 @@
 import { useState, useCallback, useMemo } from "react";
-import { RefreshCw, Download } from "lucide-react";
 import { Alert, AlertDescription } from "./ui/alert";
-import { Button } from "./ui/button";
 import type {
   TableMetadata,
   TableMetadataMap,
@@ -9,11 +7,9 @@ import type {
 } from "../generator/metadata-generator";
 import { formatFieldValue } from "../graphql/query-builder";
 import { TableSelector } from "./table-selector";
-import { ColumnSelector } from "./column-selector";
 import { DataTable } from "./data-table";
+import { DataTableToolbar } from "./data-table-toolbar";
 import { Pagination } from "./pagination";
-import { SearchFilterForm } from "./search-filter";
-import { ViewSave } from "./view-save-load";
 import { useColumnState } from "./hooks/use-column-state";
 import { useTableData } from "./hooks/use-table-data";
 import type { InitialQuery } from "./data-viewer";
@@ -221,64 +217,40 @@ export function DataViewTabContent({
       </div>
 
       {/* Operations row: column selector, search filter, etc. */}
-      <div className="flex items-center gap-4">
-        <ColumnSelector
-          fields={selectedTable.fields}
-          selectedFields={columnState.selectedFields}
-          onToggle={columnState.toggleField}
-          onSelectAll={columnState.selectAll}
-          onDeselectAll={columnState.deselectAll}
-          relations={selectedTable.relations}
-          selectedRelations={columnState.selectedRelations}
-          onToggleRelation={columnState.toggleRelation}
-          tableMetadataMap={tableMetadataMap}
-          expandedRelationFields={columnState.expandedRelationFields}
-          onToggleExpandedRelationField={
-            columnState.toggleExpandedRelationField
-          }
-          isExpandedRelationFieldSelected={
-            columnState.isExpandedRelationFieldSelected
-          }
-        />
-
-        {/* Search filter */}
-        <SearchFilterForm
-          fields={selectedTable.fields}
-          filters={searchFilters}
-          onFiltersChange={handleFiltersChange}
-        />
-
-        {/* View save */}
-        <ViewSave
-          tableName={selectedTable.name}
-          filters={searchFilters}
-          selectedFields={columnState.selectedFields}
-          selectedRelations={columnState.selectedRelations}
-          expandedRelationFields={columnState.expandedRelationFields}
-        />
-
-        <div className="flex-1" />
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={handleDownloadCsv}
-          disabled={tableData.loading || tableData.data.length === 0}
-        >
-          <Download className="size-4" />
-          CSV
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => tableData.refetch()}
-          disabled={tableData.loading}
-        >
-          <RefreshCw
-            className={`size-4 ${tableData.loading ? "animate-spin" : ""}`}
-          />
-          更新
-        </Button>
-      </div>
+      <DataTableToolbar
+        columnSelector={{
+          fields: selectedTable.fields,
+          selectedFields: columnState.selectedFields,
+          onToggle: columnState.toggleField,
+          onSelectAll: columnState.selectAll,
+          onDeselectAll: columnState.deselectAll,
+          relations: selectedTable.relations,
+          selectedRelations: columnState.selectedRelations,
+          onToggleRelation: columnState.toggleRelation,
+          tableMetadataMap: tableMetadataMap,
+          expandedRelationFields: columnState.expandedRelationFields,
+          onToggleExpandedRelationField:
+            columnState.toggleExpandedRelationField,
+          isExpandedRelationFieldSelected:
+            columnState.isExpandedRelationFieldSelected,
+        }}
+        searchFilter={{
+          fields: selectedTable.fields,
+          filters: searchFilters,
+          onFiltersChange: handleFiltersChange,
+        }}
+        viewSave={{
+          tableName: selectedTable.name,
+          filters: searchFilters,
+          selectedFields: columnState.selectedFields,
+          selectedRelations: columnState.selectedRelations,
+          expandedRelationFields: columnState.expandedRelationFields,
+        }}
+        onDownloadCsv={handleDownloadCsv}
+        onRefresh={() => tableData.refetch()}
+        loading={tableData.loading}
+        csvDisabled={tableData.data.length === 0}
+      />
 
       {/* Error Display */}
       {tableData.error && (

package/src/component/index.ts

@@ -1,4 +1,6 @@
 export { DataViewer } from "./data-viewer";
 export type { InitialQuery } from "./data-viewer";
+export { DataTableToolbar } from "./data-table-toolbar";
+export type { ActivePanel } from "./data-table-toolbar";
 export { useSavedViews, SavedViewProvider } from "./saved-view-context";
 export type { SavedView, SaveViewInput } from "./saved-view-context";

package/src/component/search-filter.tsx

@@ -1,12 +1,5 @@
 import { useState, useCallback } from "react";
-import {
-  Search,
-  Plus,
-  X,
-  Filter,
-  ChevronDown,
-  ChevronRight,
-} from "lucide-react";
+import { Search, Plus, X, Filter } from "lucide-react";
 import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { Checkbox } from "./ui/checkbox";
@@ -18,10 +11,10 @@ import {
   SelectValue,
 } from "./ui/select";
 import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "./ui/collapsible";
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+} from "./ui/dropdown-menu";
 import { Badge } from "./ui/badge";
 import { Label } from "./ui/label";
 import type { FieldMetadata } from "../generator/metadata-generator";
@@ -31,6 +24,10 @@ interface SearchFilterProps {
   fields: FieldMetadata[];
   filters: SearchFilters;
   onFiltersChange: (filters: SearchFilters) => void;
+  /** Controlled open state */
+  open?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
 }
 
 // Filterable field types
@@ -57,8 +54,9 @@ export function SearchFilterForm({
   fields,
   filters,
   onFiltersChange,
+  open,
+  onOpenChange,
 }: SearchFilterProps) {
-  const [isOpen, setIsOpen] = useState(false);
   const [selectedField, setSelectedField] = useState<string>("");
   const [inputValue, setInputValue] = useState<string>("");
   const [booleanValue, setBooleanValue] = useState<boolean>(false);
@@ -184,14 +182,9 @@ export function SearchFilterForm({
   const activeFilterCount = filters.length;
 
   return (
-    <Collapsible open={isOpen} onOpenChange={setIsOpen} className="relative">
-      <CollapsibleTrigger asChild>
+    <DropdownMenu open={open} onOpenChange={onOpenChange}>
+      <DropdownMenuTrigger asChild>
         <Button variant="outline" size="sm" className="gap-1">
-          {isOpen ? (
-            <ChevronDown className="size-4" />
-          ) : (
-            <ChevronRight className="size-4" />
-          )}
           <Search className="size-4" />
           検索
           {activeFilterCount > 0 && (
@@ -200,120 +193,118 @@ export function SearchFilterForm({
             </Badge>
           )}
         </Button>
-      </CollapsibleTrigger>
+      </DropdownMenuTrigger>
 
-      <CollapsibleContent className="absolute top-full left-0 z-50 mt-2">
-        <div className="bg-background w-96 rounded-md border p-4 shadow-md">
-          <div className="space-y-4">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2 text-sm font-medium">
-                <Filter className="size-4" />
-                検索フィルター
-              </div>
-              {activeFilterCount > 0 && (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-auto p-1 text-xs"
-                  onClick={handleClearAll}
-                >
-                  すべてクリア
-                </Button>
-              )}
+      <DropdownMenuContent align="start" className="w-96 p-4">
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2 text-sm font-medium">
+              <Filter className="size-4" />
+              検索フィルター
             </div>
+            {activeFilterCount > 0 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-auto p-1 text-xs"
+                onClick={handleClearAll}
+              >
+                すべてクリア
+              </Button>
+            )}
+          </div>
 
-            {/* Active filters */}
-            {filters.length > 0 && (
-              <div className="space-y-2">
-                <div className="text-muted-foreground text-xs">
-                  適用中のフィルター (AND)
-                </div>
-                <div className="flex flex-wrap gap-1">
-                  {filters.map((filter) => (
-                    <Badge
-                      key={filter.field}
-                      variant="secondary"
-                      className="flex items-center gap-1 pr-1"
+          {/* Active filters */}
+          {filters.length > 0 && (
+            <div className="space-y-2">
+              <div className="text-muted-foreground text-xs">
+                適用中のフィルター (AND)
+              </div>
+              <div className="flex flex-wrap gap-1">
+                {filters.map((filter) => (
+                  <Badge
+                    key={filter.field}
+                    variant="secondary"
+                    className="flex items-center gap-1 pr-1"
+                  >
+                    <span>
+                      {filter.field}=
+                      {typeof filter.value === "boolean"
+                        ? filter.value
+                          ? "true"
+                          : "false"
+                        : filter.value}
+                    </span>
+                    <button
+                      className="text-muted-foreground hover:text-foreground ml-1"
+                      onClick={() => handleRemoveFilter(filter.field)}
                     >
-                      <span>
-                        {filter.field}=
-                        {typeof filter.value === "boolean"
-                          ? filter.value
-                            ? "true"
-                            : "false"
-                          : filter.value}
-                      </span>
-                      <button
-                        className="text-muted-foreground hover:text-foreground ml-1"
-                        onClick={() => handleRemoveFilter(filter.field)}
-                      >
-                        <X className="size-3" />
-                      </button>
-                    </Badge>
-                  ))}
-                </div>
+                      <X className="size-3" />
+                    </button>
+                  </Badge>
+                ))}
               </div>
-            )}
+            </div>
+          )}
 
-            {/* Add new filter */}
-            {filterableFields.length > 0 && (
-              <div className="space-y-3">
-                <div className="text-muted-foreground text-xs">
-                  フィルターを追加
-                </div>
+          {/* Add new filter */}
+          {filterableFields.length > 0 && (
+            <div className="space-y-3">
+              <div className="text-muted-foreground text-xs">
+                フィルターを追加
+              </div>
 
-                {/* Field selector */}
-                <Select value={selectedField} onValueChange={setSelectedField}>
-                  <SelectTrigger className="w-full">
-                    <SelectValue placeholder="フィールドを選択" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {filterableFields.map((field) => (
-                      <SelectItem key={field.name} value={field.name}>
-                        {field.name}{" "}
-                        <span className="text-muted-foreground">
-                          ({field.type})
-                        </span>
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+              {/* Field selector */}
+              <Select value={selectedField} onValueChange={setSelectedField}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="フィールドを選択" />
+                </SelectTrigger>
+                <SelectContent>
+                  {filterableFields.map((field) => (
+                    <SelectItem key={field.name} value={field.name}>
+                      {field.name}{" "}
+                      <span className="text-muted-foreground">
+                        ({field.type})
+                      </span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
 
-                {/* Value input - changes based on field type */}
-                {selectedField && (
-                  <div className="space-y-2">
-                    {renderFilterInput()}
-                    <Button
-                      size="sm"
-                      onClick={handleAddFilter}
-                      disabled={
-                        selectedFieldMetadata?.type !== "boolean" &&
-                        !inputValue.trim()
-                      }
-                      className="w-full"
-                    >
-                      <Plus className="mr-1 size-3" />
-                      追加
-                    </Button>
-                  </div>
-                )}
-              </div>
-            )}
+              {/* Value input - changes based on field type */}
+              {selectedField && (
+                <div className="space-y-2">
+                  {renderFilterInput()}
+                  <Button
+                    size="sm"
+                    onClick={handleAddFilter}
+                    disabled={
+                      selectedFieldMetadata?.type !== "boolean" &&
+                      !inputValue.trim()
+                    }
+                    className="w-full"
+                  >
+                    <Plus className="mr-1 size-3" />
+                    追加
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
 
-            {filterableFields.length === 0 && filters.length === 0 && (
-              <div className="text-muted-foreground py-2 text-center text-sm">
-                フィルター可能なフィールドがありません
-              </div>
-            )}
+          {filterableFields.length === 0 && filters.length === 0 && (
+            <div className="text-muted-foreground py-2 text-center text-sm">
+              フィルター可能なフィールドがありません
+            </div>
+          )}
 
-            {filterableFields.length === 0 && filters.length > 0 && (
-              <div className="text-muted-foreground py-2 text-center text-sm">
-                すべてのフィールドにフィルターが適用されています
-              </div>
-            )}
-          </div>
+          {filterableFields.length === 0 && filters.length > 0 && (
+            <div className="text-muted-foreground py-2 text-center text-sm">
+              すべてのフィールドにフィルターが適用されています
+            </div>
+          )}
         </div>
-      </CollapsibleContent>
-    </Collapsible>
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 }

package/src/test-setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";