@izumisy-tailor/tailor-data-viewer 0.2.23 → 0.2.24

package/package.json

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

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

@@ -193,7 +193,7 @@ describe("useCollection", () => {
       ]);
     });
 
-    it("replaces sort by default", () => {
+    it("appends sort for different fields", () => {
       const { result } = renderHook(() => useCollection({ query: FAKE_QUERY }));
 
       act(() => {
@@ -204,22 +204,44 @@ describe("useCollection", () => {
       });
 
       expect(result.current.sortStates).toEqual([
+        { field: "createdAt", direction: "Desc" },
         { field: "name", direction: "Asc" },
       ]);
     });
 
-    it("appends sort with append=true (multi-sort)", () => {
+    it("replaces direction for existing field", () => {
       const { result } = renderHook(() => useCollection({ query: FAKE_QUERY }));
 
       act(() => {
         result.current.setSort("createdAt", "Desc");
       });
       act(() => {
-        result.current.setSort("name", "Asc", true);
+        result.current.setSort("name", "Asc");
+      });
+      act(() => {
+        result.current.setSort("createdAt", "Asc");
+      });
+
+      expect(result.current.sortStates).toEqual([
+        { field: "name", direction: "Asc" },
+        { field: "createdAt", direction: "Asc" },
+      ]);
+    });
+
+    it("removes sort when direction is undefined", () => {
+      const { result } = renderHook(() => useCollection({ query: FAKE_QUERY }));
+
+      act(() => {
+        result.current.setSort("createdAt", "Desc");
+      });
+      act(() => {
+        result.current.setSort("name", "Asc");
+      });
+      act(() => {
+        result.current.setSort("createdAt");
       });
 
       expect(result.current.sortStates).toEqual([
-        { field: "createdAt", direction: "Desc" },
         { field: "name", direction: "Asc" },
       ]);
     });

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

@@ -182,23 +182,21 @@ export function useCollection(
   // ---------------------------------------------------------------------------
   // Sort operations
   // ---------------------------------------------------------------------------
-  const setSort = useCallback(
-    (field: string, direction: "Asc" | "Desc" = "Asc", append = false) => {
-      setSortStates((prev) => {
-        const newState: SortState = { field, direction };
-        if (append) {
-          // Replace if same field exists, otherwise append
-          const filtered = prev.filter((s) => s.field !== field);
-          return [...filtered, newState];
-        }
-        return [newState];
-      });
-      // Reset pagination when sort changes
-      setCursor(null);
-      setPaginationDirection("forward");
-    },
-    [],
-  );
+  const setSort = useCallback((field: string, direction?: "Asc" | "Desc") => {
+    setSortStates((prev) => {
+      if (direction === undefined) {
+        // Remove sort for the field
+        return prev.filter((s) => s.field !== field);
+      }
+      const newState: SortState = { field, direction };
+      // Replace if same field exists, otherwise append
+      const filtered = prev.filter((s) => s.field !== field);
+      return [...filtered, newState];
+    });
+    // Reset pagination when sort changes
+    setCursor(null);
+    setPaginationDirection("forward");
+  }, []);
 
   const clearSort = useCallback(() => {
     setSortStates([]);

package/src/component/components.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/react";
-import { describe, it, expect } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
 import { Table } from "./table";
 import { DataTable } from "./data-table/data-table";
 import { DataTableContext } from "./data-table/data-table-context";
@@ -208,4 +209,141 @@ describe("DataTable", () => {
 
     expect(screen.getByText("Custom Cell")).toBeInTheDocument();
   });
+
+  describe("header sort click", () => {
+    const sortableColumns: Column<TestRow>[] = [
+      {
+        kind: "field",
+        dataKey: "name",
+        label: "Name",
+        sort: { type: "string" },
+      },
+      {
+        kind: "field",
+        dataKey: "status",
+        label: "Status",
+        sort: { type: "string" },
+      },
+    ];
+
+    it("calls onSort with Asc when clicking unsorted column", async () => {
+      const onSort = vi.fn();
+      render(
+        <DataTableContext.Provider
+          value={createCtx({
+            columns: sortableColumns,
+            visibleColumns: sortableColumns,
+            sortStates: [],
+            onSort,
+          })}
+        >
+          <DataTable.Root>
+            <DataTable.Headers />
+            <DataTable.Body />
+          </DataTable.Root>
+        </DataTableContext.Provider>,
+      );
+
+      await userEvent.click(screen.getByText("Name"));
+      expect(onSort).toHaveBeenCalledWith("name", "Asc");
+    });
+
+    it("cycles Asc → Desc on second click", async () => {
+      const onSort = vi.fn();
+      render(
+        <DataTableContext.Provider
+          value={createCtx({
+            columns: sortableColumns,
+            visibleColumns: sortableColumns,
+            sortStates: [{ field: "name", direction: "Asc" }],
+            onSort,
+          })}
+        >
+          <DataTable.Root>
+            <DataTable.Headers />
+            <DataTable.Body />
+          </DataTable.Root>
+        </DataTableContext.Provider>,
+      );
+
+      await userEvent.click(screen.getByText("Name"));
+      expect(onSort).toHaveBeenCalledWith("name", "Desc");
+    });
+
+    it("cycles Desc → remove (undefined) on third click", async () => {
+      const onSort = vi.fn();
+      render(
+        <DataTableContext.Provider
+          value={createCtx({
+            columns: sortableColumns,
+            visibleColumns: sortableColumns,
+            sortStates: [{ field: "name", direction: "Desc" }],
+            onSort,
+          })}
+        >
+          <DataTable.Root>
+            <DataTable.Headers />
+            <DataTable.Body />
+          </DataTable.Root>
+        </DataTableContext.Provider>,
+      );
+
+      await userEvent.click(screen.getByText("Name"));
+      expect(onSort).toHaveBeenCalledWith("name", undefined);
+    });
+
+    it("does not call onSort for non-sortable column", async () => {
+      const onSort = vi.fn();
+      const mixedColumns: Column<TestRow>[] = [
+        {
+          kind: "field",
+          dataKey: "name",
+          label: "Name",
+          sort: { type: "string" },
+        },
+        { kind: "field", dataKey: "status", label: "Status" },
+      ];
+      render(
+        <DataTableContext.Provider
+          value={createCtx({
+            columns: mixedColumns,
+            visibleColumns: mixedColumns,
+            sortStates: [],
+            onSort,
+          })}
+        >
+          <DataTable.Root>
+            <DataTable.Headers />
+            <DataTable.Body />
+          </DataTable.Root>
+        </DataTableContext.Provider>,
+      );
+
+      await userEvent.click(screen.getByText("Status"));
+      expect(onSort).not.toHaveBeenCalled();
+    });
+
+    it("shows sort indicators for multiple sorted columns", () => {
+      render(
+        <DataTableContext.Provider
+          value={createCtx({
+            columns: sortableColumns,
+            visibleColumns: sortableColumns,
+            sortStates: [
+              { field: "name", direction: "Asc" },
+              { field: "status", direction: "Desc" },
+            ],
+          })}
+        >
+          <DataTable.Root>
+            <DataTable.Headers />
+            <DataTable.Body />
+          </DataTable.Root>
+        </DataTableContext.Provider>,
+      );
+
+      expect(screen.getByText("▲")).toBeInTheDocument();
+      expect(screen.getByText("▼")).toBeInTheDocument();
+    });
+  });
 });

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

@@ -0,0 +1,318 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+import { DataTable } from "./data-table";
+import { DataTableContext } from "./data-table-context";
+import type { DataTableContextValue } from "./data-table-context";
+import type { Column } from "../types";
+
+type TestRow = {
+  id: string;
+  name: string;
+  status: string;
+};
+
+const testColumns: Column<TestRow>[] = [
+  {
+    kind: "field",
+    dataKey: "name",
+    label: "Name",
+    sort: { type: "string" },
+  },
+  {
+    kind: "field",
+    dataKey: "status",
+    label: "Status",
+  },
+  {
+    kind: "display",
+    id: "actions",
+    label: "Actions",
+    render: (row) => <button>Edit {row.name}</button>,
+  },
+];
+
+const testRows: TestRow[] = [
+  { id: "1", name: "Alice", status: "Active" },
+  { id: "2", name: "Bob", status: "Inactive" },
+];
+
+const noopRowOps = {
+  updateRow: () => ({ rollback: () => {} }),
+  deleteRow: () => ({
+    rollback: () => {},
+    deletedRow: {} as TestRow,
+  }),
+  insertRow: () => ({ rollback: () => {} }),
+};
+
+const defaultPageInfo = {
+  hasNextPage: false,
+  endCursor: null,
+  hasPreviousPage: false,
+  startCursor: null,
+};
+
+function createCtx(
+  overrides: Partial<DataTableContextValue<TestRow>> = {},
+): DataTableContextValue<TestRow> {
+  return {
+    columns: testColumns,
+    rows: testRows,
+    loading: false,
+    error: null,
+    sortStates: [],
+    visibleColumns: testColumns,
+    isColumnVisible: () => true,
+    toggleColumn: () => {},
+    showAllColumns: () => {},
+    hideAllColumns: () => {},
+    pageInfo: defaultPageInfo,
+    ...noopRowOps,
+    ...overrides,
+  };
+}
+
+describe("DataTable", () => {
+  it("renders data-bound table with auto-generated rows", () => {
+    render(
+      <DataTableContext.Provider value={createCtx()}>
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body />
+        </DataTable.Root>
+      </DataTableContext.Provider>,
+    );
+
+    expect(screen.getByText("Name")).toBeInTheDocument();
+    expect(screen.getByText("Status")).toBeInTheDocument();
+    expect(screen.getByText("Alice")).toBeInTheDocument();
+    expect(screen.getByText("Bob")).toBeInTheDocument();
+    expect(screen.getByText("Active")).toBeInTheDocument();
+  });
+
+  it("renders display columns via render function", () => {
+    render(
+      <DataTableContext.Provider value={createCtx()}>
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body />
+        </DataTable.Root>
+      </DataTableContext.Provider>,
+    );
+
+    expect(screen.getByText("Edit Alice")).toBeInTheDocument();
+    expect(screen.getByText("Edit Bob")).toBeInTheDocument();
+  });
+
+  it("shows loading state", () => {
+    render(
+      <DataTableContext.Provider value={createCtx({ rows: [], loading: true })}>
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body />
+        </DataTable.Root>
+      </DataTableContext.Provider>,
+    );
+
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+  });
+
+  it("shows error state", () => {
+    const err = new Error("Something went wrong");
+    render(
+      <DataTableContext.Provider value={createCtx({ rows: [], error: err })}>
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body />
+        </DataTable.Root>
+      </DataTableContext.Provider>,
+    );
+
+    expect(screen.getByText("Error: Something went wrong")).toBeInTheDocument();
+  });
+
+  it("shows empty state", () => {
+    render(
+      <DataTableContext.Provider value={createCtx({ rows: [] })}>
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body />
+        </DataTable.Root>
+      </DataTableContext.Provider>,
+    );
+
+    expect(screen.getByText("No data")).toBeInTheDocument();
+  });
+
+  it("renders sort indicator on sorted column", () => {
+    render(
+      <DataTableContext.Provider
+        value={createCtx({
+          sortStates: [{ field: "name", direction: "Asc" }],
+        })}
+      >
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body />
+        </DataTable.Root>
+      </DataTableContext.Provider>,
+    );
+
+    expect(screen.getByText("▲")).toBeInTheDocument();
+  });
+
+  it("supports custom rendering with children", () => {
+    render(
+      <DataTableContext.Provider value={createCtx()}>
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body>
+            <DataTable.Row>
+              <DataTable.Cell>Custom Cell</DataTable.Cell>
+            </DataTable.Row>
+          </DataTable.Body>
+        </DataTable.Root>
+      </DataTableContext.Provider>,
+    );
+
+    expect(screen.getByText("Custom Cell")).toBeInTheDocument();
+  });
+
+  describe("header sort click", () => {
+    const sortableColumns: Column<TestRow>[] = [
+      {
+        kind: "field",
+        dataKey: "name",
+        label: "Name",
+        sort: { type: "string" },
+      },
+      {
+        kind: "field",
+        dataKey: "status",
+        label: "Status",
+        sort: { type: "string" },
+      },
+    ];
+
+    it("calls onSort with Asc when clicking unsorted column", async () => {
+      const onSort = vi.fn();
+      render(
+        <DataTableContext.Provider
+          value={createCtx({
+            columns: sortableColumns,
+            visibleColumns: sortableColumns,
+            sortStates: [],
+            onSort,
+          })}
+        >
+          <DataTable.Root>
+            <DataTable.Headers />
+            <DataTable.Body />
+          </DataTable.Root>
+        </DataTableContext.Provider>,
+      );
+
+      await userEvent.click(screen.getByText("Name"));
+      expect(onSort).toHaveBeenCalledWith("name", "Asc");
+    });
+
+    it("cycles Asc → Desc on second click", async () => {
+      const onSort = vi.fn();
+      render(
+        <DataTableContext.Provider
+          value={createCtx({
+            columns: sortableColumns,
+            visibleColumns: sortableColumns,
+            sortStates: [{ field: "name", direction: "Asc" }],
+            onSort,
+          })}
+        >
+          <DataTable.Root>
+            <DataTable.Headers />
+            <DataTable.Body />
+          </DataTable.Root>
+        </DataTableContext.Provider>,
+      );
+
+      await userEvent.click(screen.getByText("Name"));
+      expect(onSort).toHaveBeenCalledWith("name", "Desc");
+    });
+
+    it("cycles Desc → remove (undefined) on third click", async () => {
+      const onSort = vi.fn();
+      render(
+        <DataTableContext.Provider
+          value={createCtx({
+            columns: sortableColumns,
+            visibleColumns: sortableColumns,
+            sortStates: [{ field: "name", direction: "Desc" }],
+            onSort,
+          })}
+        >
+          <DataTable.Root>
+            <DataTable.Headers />
+            <DataTable.Body />
+          </DataTable.Root>
+        </DataTableContext.Provider>,
+      );
+
+      await userEvent.click(screen.getByText("Name"));
+      expect(onSort).toHaveBeenCalledWith("name", undefined);
+    });
+
+    it("does not call onSort for non-sortable column", async () => {
+      const onSort = vi.fn();
+      const mixedColumns: Column<TestRow>[] = [
+        {
+          kind: "field",
+          dataKey: "name",
+          label: "Name",
+          sort: { type: "string" },
+        },
+        { kind: "field", dataKey: "status", label: "Status" },
+      ];
+      render(
+        <DataTableContext.Provider
+          value={createCtx({
+            columns: mixedColumns,
+            visibleColumns: mixedColumns,
+            sortStates: [],
+            onSort,
+          })}
+        >
+          <DataTable.Root>
+            <DataTable.Headers />
+            <DataTable.Body />
+          </DataTable.Root>
+        </DataTableContext.Provider>,
+      );
+
+      await userEvent.click(screen.getByText("Status"));
+      expect(onSort).not.toHaveBeenCalled();
+    });
+
+    it("shows sort indicators for multiple sorted columns", () => {
+      render(
+        <DataTableContext.Provider
+          value={createCtx({
+            columns: sortableColumns,
+            visibleColumns: sortableColumns,
+            sortStates: [
+              { field: "name", direction: "Asc" },
+              { field: "status", direction: "Desc" },
+            ],
+          })}
+        >
+          <DataTable.Root>
+            <DataTable.Headers />
+            <DataTable.Body />
+          </DataTable.Root>
+        </DataTableContext.Provider>,
+      );
+
+      expect(screen.getByText("▲")).toBeInTheDocument();
+      expect(screen.getByText("▼")).toBeInTheDocument();
+    });
+  });
+});

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

@@ -148,8 +148,13 @@ function DataTableHeaders({ className }: { className?: string }) {
 
           const handleClick = () => {
             if (!isSortable || !onSort || col.kind !== "field") return;
+            // Cycle: none → Asc → Desc → none
             const nextDirection =
-              currentSort?.direction === "Asc" ? "Desc" : "Asc";
+              currentSort?.direction === "Asc"
+                ? "Desc"
+                : currentSort?.direction === "Desc"
+                  ? undefined
+                  : "Asc";
             onSort(col.dataKey, nextDirection);
           };
 

package/src/component/table.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { Table } from "./table";
+
+describe("Table (static)", () => {
+  it("renders a basic static table", () => {
+    render(
+      <Table.Root>
+        <Table.Headers>
+          <Table.HeaderRow>
+            <Table.HeaderCell>Name</Table.HeaderCell>
+            <Table.HeaderCell>Status</Table.HeaderCell>
+          </Table.HeaderRow>
+        </Table.Headers>
+        <Table.Body>
+          <Table.Row>
+            <Table.Cell>Alice</Table.Cell>
+            <Table.Cell>Active</Table.Cell>
+          </Table.Row>
+          <Table.Row>
+            <Table.Cell>Bob</Table.Cell>
+            <Table.Cell>Inactive</Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table.Root>,
+    );
+
+    expect(screen.getByText("Name")).toBeInTheDocument();
+    expect(screen.getByText("Status")).toBeInTheDocument();
+    expect(screen.getByText("Alice")).toBeInTheDocument();
+    expect(screen.getByText("Bob")).toBeInTheDocument();
+  });
+});

package/src/component/types.ts

@@ -451,12 +451,8 @@ export interface UseCollectionReturn<
   // Sort operations
   /** Current sort states (supports multi-sort) */
   sortStates: SortState[];
-  /** Set sort for a field. If `append` is true, adds to existing sorts. */
-  setSort(
-    field: TFieldName,
-    direction?: "Asc" | "Desc",
-    append?: boolean,
-  ): void;
+  /** Set sort for a field. If direction is undefined, removes the sort for that field. */
+  setSort(field: TFieldName, direction?: "Asc" | "Desc"): void;
   /** Clear all sort states */
   clearSort: () => void;