@izumisy-tailor/tailor-data-viewer 0.2.20 → 0.2.22

package/package.json

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

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

@@ -1,5 +1,11 @@
 import { createContext, useContext } from "react";
-import type { Column, PageInfo, RowOperations, SortState } from "../types";
+import type {
+  Column,
+  PageInfo,
+  RowAction,
+  RowOperations,
+  SortState,
+} from "../types";
 
 /**
  * Context value provided by `DataTable.Provider`.
@@ -31,6 +37,12 @@ export interface DataTableContextValue<TRow extends Record<string, unknown>> {
 
   // Page info from GraphQL response (populated by DataTable.Provider)
   pageInfo: PageInfo;
+
+  // Row interaction (populated by DataTable.Root)
+  /** Handler called when a row is clicked */
+  onClickRow?: (row: TRow) => void;
+  /** Row action definitions for the actions column */
+  rowActions?: RowAction<TRow>[];
 }
 
 // Using `any` for the context default since generic contexts need a base type.

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

@@ -1,13 +1,17 @@
 import {
   createElement,
   useContext,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
   type ComponentProps,
   type ReactNode,
 } from "react";
 import { cn } from "../lib/utils";
 import { CollectionProvider } from "../collection/collection-provider";
 import { Table } from "../table";
-import type { Column, UseDataTableReturn } from "../types";
+import type { Column, RowAction, UseDataTableReturn } from "../types";
 import {
   DataTableContext,
   type DataTableContextValue,
@@ -21,7 +25,16 @@ import {
  * Root container for the DataTable compound component.
  *
  * Must be used within `DataTable.Provider`.
- * Renders a `<Table.Root>` wrapper; all data is read from context.
+ * Renders a `<Table.Root>` wrapper; all data (including `onClickRow` and
+ * `rowActions`) is read from context via `useDataTable()` options.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.Root>
+ *   <DataTable.Headers />
+ *   <DataTable.Body />
+ * </DataTable.Root>
+ * ```
  */
 function DataTableRoot({
   children,
@@ -84,6 +97,8 @@ function DataTableProviderComponent<TRow extends Record<string, unknown>>({
     showAllColumns: value.showAllColumns,
     hideAllColumns: value.hideAllColumns,
     pageInfo: value.pageInfo,
+    onClickRow: value.onClickRow,
+    rowActions: value.rowActions,
   };
 
   const collectionValue = value.collection ?? null;
@@ -115,7 +130,7 @@ function DataTableHeaders({ className }: { className?: string }) {
       "<DataTable.Headers> must be used within <DataTable.Provider>",
     );
   }
-  const { columns, sortStates, onSort } = ctx;
+  const { columns, sortStates, onSort, rowActions } = ctx;
 
   return (
     <Table.Headers className={className}>
@@ -154,6 +169,11 @@ function DataTableHeaders({ className }: { className?: string }) {
             </Table.HeaderCell>
           );
         })}
+        {rowActions && rowActions.length > 0 && (
+          <Table.HeaderCell style={{ width: 50 }}>
+            <span className="sr-only">操作</span>
+          </Table.HeaderCell>
+        )}
       </Table.HeaderRow>
     </Table.Headers>
   );
@@ -184,7 +204,9 @@ function DataTableBody({
       "<DataTable.Body> must be used within <DataTable.Provider>",
     );
   }
-  const { columns, rows, loading, error } = ctx;
+  const { columns, rows, loading, error, onClickRow, rowActions } = ctx;
+  const hasRowActions = rowActions && rowActions.length > 0;
+  const totalColSpan = (columns?.length ?? 1) + (hasRowActions ? 1 : 0);
 
   // If children are provided, render them directly (custom rendering)
   if (children) {
@@ -196,36 +218,31 @@ function DataTableBody({
     <Table.Body className={className}>
       {loading && (!rows || rows.length === 0) && (
         <Table.Row>
-          <Table.Cell
-            colSpan={columns?.length ?? 1}
-            className="h-24 text-center"
-          >
+          <Table.Cell colSpan={totalColSpan} className="h-24 text-center">
             <span className="text-muted-foreground">Loading...</span>
           </Table.Cell>
         </Table.Row>
       )}
       {error && (
         <Table.Row>
-          <Table.Cell
-            colSpan={columns?.length ?? 1}
-            className="h-24 text-center"
-          >
+          <Table.Cell colSpan={totalColSpan} className="h-24 text-center">
             <span className="text-destructive">Error: {error.message}</span>
           </Table.Cell>
         </Table.Row>
       )}
       {!loading && !error && (!rows || rows.length === 0) && (
         <Table.Row>
-          <Table.Cell
-            colSpan={columns?.length ?? 1}
-            className="h-24 text-center"
-          >
+          <Table.Cell colSpan={totalColSpan} className="h-24 text-center">
             <span className="text-muted-foreground">No data</span>
           </Table.Cell>
         </Table.Row>
       )}
       {rows?.map((row, rowIndex) => (
-        <Table.Row key={rowIndex}>
+        <Table.Row
+          key={rowIndex}
+          className={cn(onClickRow && "cursor-pointer")}
+          onClick={onClickRow ? () => onClickRow(row) : undefined}
+        >
           {columns?.map((col) => {
             const key = col.kind === "field" ? col.dataKey : col.id;
             return (
@@ -237,6 +254,14 @@ function DataTableBody({
               </Table.Cell>
             );
           })}
+          {hasRowActions && (
+            <Table.Cell
+              style={{ width: 50 }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <RowActionsMenu actions={rowActions} row={row} />
+            </Table.Cell>
+          )}
         </Table.Row>
       ))}
     </Table.Body>
@@ -308,6 +333,96 @@ function formatValue(value: unknown): ReactNode {
   return String(value);
 }
 
+// =============================================================================
+// RowActionsMenu
+// =============================================================================
+
+/**
+ * Dropdown menu for row-level actions.
+ *
+ * Uses a simple toggle-based dropdown without external dependencies.
+ */
+function RowActionsMenu<TRow extends Record<string, unknown>>({
+  actions,
+  row,
+}: {
+  actions: RowAction<TRow>[];
+  row: TRow;
+}) {
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+
+  // Close on Escape
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === "Escape") setOpen(false);
+  }, []);
+
+  return (
+    <div
+      className="relative inline-block"
+      ref={menuRef}
+      onKeyDown={handleKeyDown}
+    >
+      <button
+        type="button"
+        className="inline-flex h-8 w-8 items-center justify-center rounded-md text-sm hover:bg-accent"
+        onClick={() => setOpen((prev) => !prev)}
+        aria-label="Row actions"
+        aria-haspopup="true"
+        aria-expanded={open}
+      >
+        <span aria-hidden>⋯</span>
+      </button>
+      {open && (
+        <div
+          className="absolute right-0 z-50 mt-1 min-w-[140px] rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
+          role="menu"
+        >
+          {actions.map((action) => {
+            const disabled = action.isDisabled?.(row) ?? false;
+            return (
+              <button
+                key={action.id}
+                type="button"
+                role="menuitem"
+                disabled={disabled}
+                className={cn(
+                  "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
+                  disabled
+                    ? "cursor-not-allowed opacity-50"
+                    : "cursor-pointer hover:bg-accent",
+                  action.variant === "destructive" && "text-destructive",
+                )}
+                onClick={() => {
+                  if (!disabled) {
+                    action.onClick(row);
+                    setOpen(false);
+                  }
+                }}
+              >
+                {action.icon}
+                {action.label}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
 // =============================================================================
 // DataTable namespace
 // =============================================================================

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

@@ -40,6 +40,8 @@ export function useDataTable<TRow extends Record<string, unknown>>(
     loading = false,
     error = null,
     collection,
+    onClickRow,
+    rowActions,
   } = options;
 
   // ---------------------------------------------------------------------------
@@ -241,5 +243,9 @@ export function useDataTable<TRow extends Record<string, unknown>>(
 
     // Collection (passthrough for DataTable.Provider)
     collection,
+
+    // Row interaction (passthrough for DataTable.Provider)
+    onClickRow,
+    rowActions,
   };
 }

package/src/component/field-helpers.test.ts

@@ -73,6 +73,43 @@ describe("createColumnHelper()", () => {
     expect(col.width).toBe(100);
     expect(typeof col.render).toBe("function");
   });
+
+  it("inferColumns returns column/columns helpers with TRow bound", () => {
+    type TaskRow = { id: string; title: string; status: string };
+    const metadata = {
+      name: "task",
+      pluralForm: "tasks",
+      readAllowedRoles: [],
+      fields: [
+        { name: "id", type: "uuid", required: true },
+        { name: "title", type: "string", required: true },
+        {
+          name: "status",
+          type: "enum",
+          required: true,
+          enumValues: ["todo", "done"],
+        },
+      ],
+    } as const;
+
+    const { inferColumns, display } = createColumnHelper<TaskRow>();
+    const { column, columns } = inferColumns(metadata);
+
+    // column() works with auto-detection
+    const titleCol = column("title");
+    expect(titleCol.dataKey).toBe("title");
+    expect(titleCol.sort).toEqual({ type: "string" });
+
+    // columns() works
+    const cols = columns(["title", "status"]);
+    expect(cols).toHaveLength(2);
+
+    // display still works alongside inferColumns
+    const actionsCol = display("actions", {
+      render: (row) => `${row.title}`,
+    });
+    expect(actionsCol.kind).toBe("display");
+  });
 });
 
 describe("fieldTypeToSortConfig", () => {

package/src/component/field-helpers.ts

@@ -87,21 +87,27 @@ export function display<TRow extends Record<string, unknown>>(
 // =============================================================================
 
 /**
- * Create `field` and `display` helpers with TRow bound once.
+ * Create `field`, `display`, and `inferColumns` helpers with TRow bound once.
  *
- * This avoids repeating the row type parameter on every `field()` / `display()` call.
+ * This avoids repeating the row type parameter on every helper call.
+ * Use `inferColumns(tableMetadata)` to create metadata-inferred columns
+ * without specifying TRow again.
  *
  * @example
  * ```tsx
  * type Order = { id: string; title: string; amount: number };
  *
- * const { field, display } = createColumnHelper<Order>();
+ * const { field, display, inferColumns } = createColumnHelper<Order>();
  *
- * const columns = [
+ * // Manual columns
+ * const manualColumns = [
  *   field("title", { label: "Title", sort: { type: "string" } }),
- *   field("amount", { label: "Amount", sort: { type: "number" } }),
  *   display("actions", { render: (row) => <ActionMenu row={row} /> }),
  * ];
+ *
+ * // Metadata-inferred columns (no need to pass TRow again)
+ * const { column } = inferColumns(tableMetadata.order);
+ * const inferredColumns = [column("title"), column("amount")];
  * ```
  */
 export function createColumnHelper<TRow extends Record<string, unknown>>(): {
@@ -113,10 +119,23 @@ export function createColumnHelper<TRow extends Record<string, unknown>>(): {
     id: string,
     options: DisplayColumnOptions<TRow>,
   ) => DisplayColumn<TRow>;
+  inferColumns: <const TTable extends TableMetadata>(
+    tableMetadata: TTable,
+  ) => {
+    column: (
+      dataKey: TableFieldName<TTable>,
+      options?: MetadataFieldOptions<TRow>,
+    ) => FieldColumn<TRow>;
+    columns: (
+      dataKeys: TableFieldName<TTable>[],
+      options?: MetadataFieldsOptions,
+    ) => FieldColumn<TRow>[];
+  };
 } {
   return {
     field: (dataKey, options) => field<TRow>(dataKey, options),
     display: (id, options) => display<TRow>(id, options),
+    inferColumns: (tableMetadata) => inferColumnHelper<TRow>(tableMetadata),
   };
 }
 

package/src/component/index.ts

@@ -22,6 +22,7 @@ export type {
   UseCollectionReturn,
   UseDataTableOptions,
   UseDataTableReturn,
+  RowAction,
   RowOperations,
   FieldName,
   TableFieldName,

package/src/component/types.ts

@@ -405,9 +405,11 @@ export interface UseCollectionOptions<
  * Methods that accept a field name are typed with `TFieldName` so that
  * auto-completion works when a concrete union is supplied.
  *
- * **Note:** Methods use *method syntax* (not property syntax) intentionally
+ * **Note:** Methods that accept `TFieldName` use *method syntax* intentionally
  * so that `UseCollectionReturn<"a" | "b">` remains assignable to
  * `UseCollectionReturn<string>` (bivariant method check).
+ * Methods that don't depend on `TFieldName` use property syntax so they
+ * can be safely destructured without triggering `unbound-method` lint rules.
  *
  * @typeParam TFieldName - Union of allowed field name strings (default: `string`).
  * @typeParam TQueryArgs - Type returned by `toQueryArgs()`. Contains both
@@ -428,7 +430,7 @@ export interface UseCollectionReturn<
    * const [result] = useQuery({ ...collection.toQueryArgs() });
    * ```
    */
-  toQueryArgs(): TQueryArgs;
+  toQueryArgs: () => TQueryArgs;
 
   // Filter operations
   /** Current active filters */
@@ -440,11 +442,11 @@ export interface UseCollectionReturn<
     value: unknown,
   ): void;
   /** Replace all filters at once */
-  setFilters(filters: Filter[]): void;
+  setFilters: (filters: Filter[]) => void;
   /** Remove filter for a specific field */
   removeFilter(field: TFieldName): void;
   /** Clear all filters */
-  clearFilters(): void;
+  clearFilters: () => void;
 
   // Sort operations
   /** Current sort states (supports multi-sort) */
@@ -456,7 +458,7 @@ export interface UseCollectionReturn<
     append?: boolean,
   ): void;
   /** Clear all sort states */
-  clearSort(): void;
+  clearSort: () => void;
 
   // Pagination operations
   /** Number of items per page */
@@ -466,17 +468,17 @@ export interface UseCollectionReturn<
   /** Current pagination direction */
   paginationDirection: "forward" | "backward";
   /** Navigate to next page using endCursor from pageInfo */
-  nextPage(endCursor: string): void;
+  nextPage: (endCursor: string) => void;
   /** Navigate to previous page using startCursor from pageInfo */
-  prevPage(startCursor: string): void;
+  prevPage: (startCursor: string) => void;
   /** Reset to first page */
-  resetPage(): void;
+  resetPage: () => void;
   /** Whether there is a previous page (from GraphQL pageInfo) */
   hasPrevPage: boolean;
   /** Whether there is a next page (from GraphQL pageInfo) */
   hasNextPage: boolean;
   /** Set pageInfo from graphql result to track hasPrevPage/hasNextPage */
-  setPageInfo(pageInfo: PageInfo): void;
+  setPageInfo: (pageInfo: PageInfo) => void;
 }
 
 // =============================================================================
@@ -497,6 +499,10 @@ export interface UseDataTableOptions<TRow extends Record<string, unknown>> {
   error?: Error | null;
   /** Collection state for sort/pagination integration */
   collection?: UseCollectionReturn<string, unknown>;
+  /** Handler called when a row is clicked */
+  onClickRow?: (row: TRow) => void;
+  /** Row action definitions for the actions column */
+  rowActions?: RowAction<TRow>[];
 }
 
 /**
@@ -511,6 +517,41 @@ export interface RowOperations<TRow extends Record<string, unknown>> {
   insertRow: (row: TRow) => { rollback: () => void };
 }
 
+// =============================================================================
+// Row Actions
+// =============================================================================
+
+/**
+ * A single row action definition for the actions column.
+ *
+ * @example
+ * ```tsx
+ * const actions: RowAction<Order>[] = [
+ *   {
+ *     id: "delete",
+ *     label: "削除",
+ *     icon: <Trash2 className="h-4 w-4" />,
+ *     variant: "destructive",
+ *     onClick: (row) => handleDelete(row.id),
+ *   },
+ * ];
+ * ```
+ */
+export interface RowAction<TRow extends Record<string, unknown>> {
+  /** Unique action identifier */
+  id: string;
+  /** Action label text */
+  label: string;
+  /** Optional icon element */
+  icon?: ReactNode;
+  /** Visual variant */
+  variant?: "default" | "destructive";
+  /** Whether the action is disabled for a given row */
+  isDisabled?: (row: TRow) => boolean;
+  /** Click handler receiving the row data */
+  onClick: (row: TRow) => void;
+}
+
 /**
  * Return type of `useDataTable` hook.
  */
@@ -564,6 +605,12 @@ export interface UseDataTableReturn<TRow extends Record<string, unknown>> {
   // Collection (passthrough for DataTable.Provider)
   /** Collection state passed through from options */
   collection: UseCollectionReturn<string, unknown> | undefined;
+
+  // Row interaction (passthrough for DataTable.Provider)
+  /** Handler called when a row is clicked */
+  onClickRow?: (row: TRow) => void;
+  /** Row action definitions for the actions column */
+  rowActions?: RowAction<TRow>[];
 }
 
 // =============================================================================