@izumisy-tailor/tailor-data-viewer 0.1.25 → 0.1.27

package/package.json

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

package/src/component/contexts/data-viewer-context.tsx

@@ -13,6 +13,7 @@ import type {
 } from "../../generator/metadata-generator";
 import { useColumnState } from "../hooks/use-column-state";
 import type { SearchFilters } from "../types";
+import type { SortState } from "../hooks/use-table-data";
 
 /**
  * Helper type to extract field names from a table in metadata
@@ -94,6 +95,9 @@ export interface DataViewerContextValue {
   filters: SearchFilters;
   setFilters: (filters: SearchFilters) => void;
 
+  // Sort (initial value, managed by TableDataProvider)
+  initialSort: SortState[];
+
   // Actions (set by TableDataProvider)
   refetch: () => Promise<void>;
 
@@ -119,6 +123,16 @@ export interface DataViewerInitialData<
   selectedRelations?: ExtractRelationNames<TMetadata, TTableName>[];
   /** Initial expanded relation fields (type-safe when metadata is `as const`) */
   expandedRelationFields?: ExtractExpandedRelationFields<TMetadata, TTableName>;
+  /** Initial sort state (supports multiple sort fields) */
+  sort?:
+    | {
+        field: ExtractFieldNames<TMetadata, TTableName>;
+        direction: "Asc" | "Desc";
+      }
+    | {
+        field: ExtractFieldNames<TMetadata, TTableName>;
+        direction: "Asc" | "Desc";
+      }[];
 }
 
 /**
@@ -162,6 +176,21 @@ export function DataViewerProvider<
     initialData?.filters ?? [],
   );
 
+  // Initial sort state (passed to TableDataProvider)
+  const initialSort: SortState[] = initialData?.sort
+    ? Array.isArray(initialData.sort)
+      ? initialData.sort.map((s) => ({
+          field: s.field as string,
+          direction: s.direction,
+        }))
+      : [
+          {
+            field: initialData.sort.field as string,
+            direction: initialData.sort.direction,
+          },
+        ]
+    : [];
+
   // Column state
   const columnState = useColumnState(
     tableMetadata?.fields ?? [],
@@ -198,6 +227,7 @@ export function DataViewerProvider<
       setColumns: columnState.setColumns,
       filters,
       setFilters,
+      initialSort,
       refetch,
       _setRefetch,
     }),
@@ -216,6 +246,7 @@ export function DataViewerProvider<
       columnState.isExpandedRelationFieldSelected,
       columnState.setColumns,
       filters,
+      initialSort,
       refetch,
       _setRefetch,
     ],

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

@@ -20,7 +20,10 @@ export interface TableDataContextValue {
   data: Record<string, unknown>[];
   loading: boolean;
   error: Error | null;
+  /** Current sort state (first sort field for UI display) */
   sortState: SortState | null;
+  /** All sort states (for multi-field sorting) */
+  sortStates: SortState[];
   setSort: (field: string) => void;
   pagination: PaginationState;
   hasPreviousPage: boolean;
@@ -47,6 +50,7 @@ export function TableDataProvider({ children }: TableDataProviderProps) {
     selectedRelations,
     expandedRelationFields,
     filters,
+    initialSort,
     _setRefetch,
   } = useDataViewer();
 
@@ -59,6 +63,7 @@ export function TableDataProvider({ children }: TableDataProviderProps) {
     filters,
     metadata,
     expandedRelationFields,
+    initialSort,
   );
 
   // Register refetch action in DataViewerContext
@@ -72,6 +77,7 @@ export function TableDataProvider({ children }: TableDataProviderProps) {
       loading: tableData.loading,
       error: tableData.error,
       sortState: tableData.sortState,
+      sortStates: tableData.sortStates,
       setSort: tableData.setSort,
       pagination: tableData.pagination,
       hasPreviousPage: tableData.hasPreviousPage,
@@ -83,6 +89,7 @@ export function TableDataProvider({ children }: TableDataProviderProps) {
       tableData.loading,
       tableData.error,
       tableData.sortState,
+      tableData.sortStates,
       tableData.setSort,
       tableData.pagination,
       tableData.hasPreviousPage,

package/src/component/hooks/use-table-data.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { buildQueryInput } from "./use-table-data";
+import { buildQueryInput, buildOrderInput } from "./use-table-data";
 import type { SearchFilters } from "../types";
 
 describe("buildQueryInput", () => {
@@ -397,3 +397,41 @@ describe("buildQueryInput", () => {
     });
   });
 });
+
+describe("buildOrderInput", () => {
+  it("空のソート配列では undefined を返す", () => {
+    const result = buildOrderInput([]);
+    expect(result).toBeUndefined();
+  });
+
+  it("単一のソート条件でorder配列を生成する", () => {
+    const sortStates = [{ field: "status", direction: "Desc" as const }];
+    const result = buildOrderInput(sortStates);
+    expect(result).toEqual([{ field: "status", direction: "Desc" }]);
+  });
+
+  it("複数のソート条件でorder配列を生成する", () => {
+    const sortStates = [
+      { field: "status", direction: "Desc" as const },
+      { field: "createdAt", direction: "Asc" as const },
+    ];
+    const result = buildOrderInput(sortStates);
+    expect(result).toEqual([
+      { field: "status", direction: "Desc" },
+      { field: "createdAt", direction: "Asc" },
+    ]);
+  });
+
+  it("ソート条件の順序が保持される", () => {
+    const sortStates = [
+      { field: "priority", direction: "Asc" as const },
+      { field: "name", direction: "Desc" as const },
+      { field: "updatedAt", direction: "Asc" as const },
+    ];
+    const result = buildOrderInput(sortStates);
+    expect(result).toHaveLength(3);
+    expect(result![0].field).toBe("priority");
+    expect(result![1].field).toBe("name");
+    expect(result![2].field).toBe("updatedAt");
+  });
+});

package/src/component/hooks/use-table-data.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useMemo } from "react";
+import { useState, useCallback, useEffect, useMemo, useRef } from "react";
 import type {
   TableMetadata,
   TableMetadataMap,
@@ -31,7 +31,10 @@ export interface TableDataState {
   data: Record<string, unknown>[];
   loading: boolean;
   error: Error | null;
+  /** Current sort state (first sort field for UI display) */
   sortState: SortState | null;
+  /** All sort states (for multi-field sorting) */
+  sortStates: SortState[];
   pagination: PaginationState;
   hasPreviousPage: boolean;
   refetch: () => Promise<void>;
@@ -101,6 +104,17 @@ export function buildQueryInput(
   return Object.keys(queryInput).length > 0 ? queryInput : undefined;
 }
 
+/**
+ * Build order input from sort states for GraphQL query
+ * @internal Exported for testing purposes
+ */
+export function buildOrderInput(
+  sortStates: SortState[],
+): { field: string; direction: "Asc" | "Desc" }[] | undefined {
+  if (sortStates.length === 0) return undefined;
+  return sortStates.map((s) => ({ field: s.field, direction: s.direction }));
+}
+
 /**
  * Fetch and manage table data with sorting and pagination
  */
@@ -112,11 +126,12 @@ export function useTableData(
   searchFilters?: SearchFilters,
   tableMetadataMap?: TableMetadataMap,
   expandedRelationFields?: ExpandedRelationFields,
+  initialSort?: SortState[],
 ): TableDataState {
   const [data, setData] = useState<Record<string, unknown>[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
-  const [sortState, setSortState] = useState<SortState | null>(null);
+  const [sortStates, setSortStates] = useState<SortState[]>(initialSort ?? []);
   const [pagination, setPagination] = useState<PaginationState>({
     first: DEFAULT_PAGE_SIZE,
     after: null,
@@ -125,13 +140,22 @@ export function useTableData(
   });
   const [cursorHistory, setCursorHistory] = useState<(string | null)[]>([]);
 
+  // Track previous table name to detect actual table changes (not initial mount)
+  const prevTableNameRef = useRef<string | undefined>(table?.name);
+
   const client = useMemo(() => createGraphQLClient(appUri), [appUri]);
 
-  // Clear data immediately when table changes to avoid stale data display
+  // Clear data when table actually changes (not on initial mount)
   useEffect(() => {
+    // Skip on initial mount - only reset when table changes from one to another
+    if (prevTableNameRef.current === table?.name) {
+      return;
+    }
+    prevTableNameRef.current = table?.name;
+
     setData([]);
     setError(null);
-    setSortState(null);
+    setSortStates(initialSort ?? []);
     setPagination({
       first: DEFAULT_PAGE_SIZE,
       after: null,
@@ -139,6 +163,10 @@ export function useTableData(
       endCursor: null,
     });
     setCursorHistory([]);
+    // Note: initialSort is intentionally excluded from deps to prevent infinite loops.
+    // This effect should only run when table changes, using the initialSort value
+    // that was current at mount time.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [table?.name]);
 
   const fetchData = useCallback(async () => {
@@ -213,7 +241,7 @@ export function useTableData(
         tableName: table.name,
         pluralForm: table.pluralForm,
         selectedFields: allFieldsToFetch,
-        orderBy: sortState ?? undefined,
+        orderBy: sortStates.length > 0 ? sortStates[0] : undefined,
         first: pagination.first,
         after: pagination.after ?? undefined,
         oneToManyRelationTotals:
@@ -233,11 +261,10 @@ export function useTableData(
         queryVariables.query = queryInput;
       }
 
-      // Add sort order variable
-      if (sortState) {
-        queryVariables.order = [
-          { field: sortState.field, direction: sortState.direction },
-        ];
+      // Add sort order variable (supports multiple sort fields)
+      const orderInput = buildOrderInput(sortStates);
+      if (orderInput) {
+        queryVariables.order = orderInput;
       }
 
       // Add pagination variables
@@ -271,7 +298,7 @@ export function useTableData(
     table,
     selectedFields,
     selectedRelations,
-    sortState,
+    sortStates,
     pagination.first,
     pagination.after,
     client,
@@ -286,15 +313,18 @@ export function useTableData(
   }, [fetchData]);
 
   const setSort = useCallback((field: string, direction?: "Asc" | "Desc") => {
-    setSortState((prev) => {
+    setSortStates((prev) => {
+      const currentSort = prev[0];
       // If clicking the same field, toggle direction
-      if (prev?.field === field && !direction) {
-        return {
-          field,
-          direction: prev.direction === "Asc" ? "Desc" : "Asc",
-        };
+      if (currentSort?.field === field && !direction) {
+        return [
+          {
+            field,
+            direction: currentSort.direction === "Asc" ? "Desc" : "Asc",
+          },
+        ];
       }
-      return { field, direction: direction ?? "Asc" };
+      return [{ field, direction: direction ?? "Asc" }];
     });
     // Reset pagination when sorting changes
     setPagination((prev) => ({ ...prev, after: null }));
@@ -339,7 +369,8 @@ export function useTableData(
     data,
     loading,
     error,
-    sortState,
+    sortState: sortStates[0] ?? null,
+    sortStates,
     pagination,
     hasPreviousPage: cursorHistory.length > 0 || pagination.after !== null,
     refetch: fetchData,