@izumisy-tailor/tailor-data-viewer 0.2.19 → 0.2.21

package/package.json

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

package/src/component/collection/collection-provider.tsx

@@ -15,7 +15,7 @@ const CollectionContext = createContext<UseCollectionReturn<
  *
  * <CollectionProvider value={collection}>
  *   <FilterPanel />
- *   <DataTable.Root {...table.rootProps}>...</DataTable.Root>
+ *   <DataTable.Root>...</DataTable.Root>
  *   <Pagination {...table} />
  * </CollectionProvider>
  * ```

package/src/component/components.test.tsx

@@ -1,7 +1,9 @@
 import { render, screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
 import { Table } from "./table";
-import { DataTable } from "./data-table/index";
+import { DataTable } from "./data-table/data-table";
+import { DataTableContext } from "./data-table/data-table-context";
+import type { DataTableContextValue } from "./data-table/data-table-context";
 import type { Column } from "./types";
 
 describe("Table (static)", () => {
@@ -65,13 +67,51 @@ const testRows: TestRow[] = [
   { 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(
-      <DataTable.Root columns={testColumns} rows={testRows}>
-        <DataTable.Headers />
-        <DataTable.Body />
-      </DataTable.Root>,
+      <DataTableContext.Provider value={createCtx()}>
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body />
+        </DataTable.Root>
+      </DataTableContext.Provider>,
     );
 
     expect(screen.getByText("Name")).toBeInTheDocument();
@@ -83,10 +123,12 @@ describe("DataTable", () => {
 
   it("renders display columns via render function", () => {
     render(
-      <DataTable.Root columns={testColumns} rows={testRows}>
-        <DataTable.Headers />
-        <DataTable.Body />
-      </DataTable.Root>,
+      <DataTableContext.Provider value={createCtx()}>
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body />
+        </DataTable.Root>
+      </DataTableContext.Provider>,
     );
 
     expect(screen.getByText("Edit Alice")).toBeInTheDocument();
@@ -95,10 +137,12 @@ describe("DataTable", () => {
 
   it("shows loading state", () => {
     render(
-      <DataTable.Root columns={testColumns} rows={[]} loading>
-        <DataTable.Headers />
-        <DataTable.Body />
-      </DataTable.Root>,
+      <DataTableContext.Provider value={createCtx({ rows: [], loading: true })}>
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body />
+        </DataTable.Root>
+      </DataTableContext.Provider>,
     );
 
     expect(screen.getByText("Loading...")).toBeInTheDocument();
@@ -107,10 +151,12 @@ describe("DataTable", () => {
   it("shows error state", () => {
     const err = new Error("Something went wrong");
     render(
-      <DataTable.Root columns={testColumns} rows={[]} error={err}>
-        <DataTable.Headers />
-        <DataTable.Body />
-      </DataTable.Root>,
+      <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();
@@ -118,10 +164,12 @@ describe("DataTable", () => {
 
   it("shows empty state", () => {
     render(
-      <DataTable.Root columns={testColumns} rows={[]}>
-        <DataTable.Headers />
-        <DataTable.Body />
-      </DataTable.Root>,
+      <DataTableContext.Provider value={createCtx({ rows: [] })}>
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body />
+        </DataTable.Root>
+      </DataTableContext.Provider>,
     );
 
     expect(screen.getByText("No data")).toBeInTheDocument();
@@ -129,14 +177,16 @@ describe("DataTable", () => {
 
   it("renders sort indicator on sorted column", () => {
     render(
-      <DataTable.Root
-        columns={testColumns}
-        rows={testRows}
-        sortStates={[{ field: "name", direction: "Asc" }]}
+      <DataTableContext.Provider
+        value={createCtx({
+          sortStates: [{ field: "name", direction: "Asc" }],
+        })}
       >
-        <DataTable.Headers />
-        <DataTable.Body />
-      </DataTable.Root>,
+        <DataTable.Root>
+          <DataTable.Headers />
+          <DataTable.Body />
+        </DataTable.Root>
+      </DataTableContext.Provider>,
     );
 
     expect(screen.getByText("▲")).toBeInTheDocument();
@@ -144,14 +194,16 @@ describe("DataTable", () => {
 
   it("supports custom rendering with children", () => {
     render(
-      <DataTable.Root columns={testColumns} rows={testRows}>
-        <DataTable.Headers />
-        <DataTable.Body>
-          <DataTable.Row>
-            <DataTable.Cell>Custom Cell</DataTable.Cell>
-          </DataTable.Row>
-        </DataTable.Body>
-      </DataTable.Root>,
+      <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();

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

@@ -1,8 +1,8 @@
 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.Root` or `DataTable.Provider`.
+ * Context value provided by `DataTable.Provider`.
  *
  * Exposes row operations for optimistic updates, table state, column
  * visibility, and page info so that `DataTable.Headers` / `DataTable.Body`
@@ -14,7 +14,7 @@ export interface DataTableContextValue<TRow extends Record<string, unknown>> {
   deleteRow: RowOperations<TRow>["deleteRow"];
   insertRow: RowOperations<TRow>["insertRow"];
 
-  // Table state propagated from DataTable.Root / DataTable.Provider
+  // Table state propagated from DataTable.Provider
   columns: Column<TRow>[];
   rows: TRow[];
   loading: boolean;
@@ -31,6 +31,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.
@@ -40,9 +46,9 @@ const DataTableContext = createContext<DataTableContextValue<any> | null>(null);
 export { DataTableContext };
 
 /**
- * Hook to access row operations from the nearest `DataTable.Root`.
+ * Hook to access row operations from the nearest `DataTable.Provider`.
  *
- * @throws Error if used outside of `DataTable.Root`.
+ * @throws Error if used outside of `DataTable.Provider`.
  *
  * @example
  * ```tsx
@@ -57,7 +63,9 @@ export function useDataTableContext<
 >(): DataTableContextValue<TRow> {
   const ctx = useContext(DataTableContext);
   if (!ctx) {
-    throw new Error("useDataTableContext must be used within <DataTable.Root>");
+    throw new Error(
+      "useDataTableContext must be used within <DataTable.Provider>",
+    );
   }
   return ctx as DataTableContextValue<TRow>;
 }

package/src/component/data-table/{index.tsx → data-table.tsx}

@@ -1,18 +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,
-  DataTableRootProps,
-  PageInfo,
-  UseDataTableReturn,
-} from "../types";
+import type { Column, RowAction, UseDataTableReturn } from "../types";
 import {
   DataTableContext,
   type DataTableContextValue,
@@ -23,66 +22,28 @@ import {
 // =============================================================================
 
 /**
- * Internal noop row operations used when none are provided.
+ * Root container for the DataTable compound component.
+ *
+ * Must be used within `DataTable.Provider`.
+ * 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>
+ * ```
  */
-const noopRowOps = {
-  updateRow: () => ({ rollback: () => {} }),
-  deleteRow: () => ({
-    rollback: () => {},
-    deletedRow: {} as Record<string, unknown>,
-  }),
-  insertRow: () => ({ rollback: () => {} }),
-};
-
-const defaultPageInfo: PageInfo = {
-  hasNextPage: false,
-  endCursor: null,
-  hasPreviousPage: false,
-  startCursor: null,
-};
-
-function DataTableRoot<TRow extends Record<string, unknown>>({
-  columns = [] as Column<TRow>[],
-  rows = [] as TRow[],
-  loading = false,
-  error = null,
-  sortStates = [],
-  onSort,
-  rowOperations,
+function DataTableRoot({
   children,
-}: DataTableRootProps<TRow>) {
-  // When rendered inside DataTable.Provider, inherit missing fields from context
-  const parentCtx = useContext(
-    DataTableContext,
-  ) as DataTableContextValue<TRow> | null;
-
-  const contextValue: DataTableContextValue<TRow> = {
-    updateRow: (rowOperations?.updateRow ??
-      noopRowOps.updateRow) as DataTableContextValue<TRow>["updateRow"],
-    deleteRow: (rowOperations?.deleteRow ??
-      noopRowOps.deleteRow) as DataTableContextValue<TRow>["deleteRow"],
-    insertRow: (rowOperations?.insertRow ??
-      noopRowOps.insertRow) as DataTableContextValue<TRow>["insertRow"],
-    columns,
-    rows,
-    loading,
-    error,
-    sortStates,
-    onSort,
-    // Inherit column visibility & pageInfo from parent context (DataTable.Provider)
-    visibleColumns: parentCtx?.visibleColumns ?? columns,
-    isColumnVisible: parentCtx?.isColumnVisible ?? (() => true),
-    toggleColumn: parentCtx?.toggleColumn ?? (() => {}),
-    showAllColumns: parentCtx?.showAllColumns ?? (() => {}),
-    hideAllColumns: parentCtx?.hideAllColumns ?? (() => {}),
-    pageInfo: parentCtx?.pageInfo ?? defaultPageInfo,
-  };
-
-  return (
-    <DataTableContext.Provider value={contextValue}>
-      <Table.Root>{children}</Table.Root>
-    </DataTableContext.Provider>
-  );
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return <Table.Root className={className}>{children}</Table.Root>;
 }
 
 // =============================================================================
@@ -125,8 +86,8 @@ function DataTableProviderComponent<TRow extends Record<string, unknown>>({
     rows: value.rows,
     loading: value.loading,
     error: value.error,
-    sortStates: value.rootProps.sortStates ?? [],
-    onSort: value.rootProps.onSort,
+    sortStates: value.sortStates ?? [],
+    onSort: value.onSort,
     updateRow: value.updateRow,
     deleteRow: value.deleteRow,
     insertRow: value.insertRow,
@@ -136,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;
@@ -160,16 +123,14 @@ function DataTableProviderComponent<TRow extends Record<string, unknown>>({
 // DataTable.Headers
 // =============================================================================
 
-interface DataTableHeadersProps {
-  className?: string;
-}
-
-function DataTableHeaders({ className }: DataTableHeadersProps) {
+function DataTableHeaders({ className }: { className?: string }) {
   const ctx = useContext(DataTableContext);
   if (!ctx) {
-    throw new Error("<DataTable.Headers> must be used within <DataTable.Root>");
+    throw new Error(
+      "<DataTable.Headers> must be used within <DataTable.Provider>",
+    );
   }
-  const { columns, sortStates, onSort } = ctx;
+  const { columns, sortStates, onSort, rowActions } = ctx;
 
   return (
     <Table.Headers className={className}>
@@ -208,6 +169,11 @@ function DataTableHeaders({ className }: DataTableHeadersProps) {
             </Table.HeaderCell>
           );
         })}
+        {rowActions && rowActions.length > 0 && (
+          <Table.HeaderCell style={{ width: 50 }}>
+            <span className="sr-only">操作</span>
+          </Table.HeaderCell>
+        )}
       </Table.HeaderRow>
     </Table.Headers>
   );
@@ -225,17 +191,22 @@ function SortIndicator({ direction }: { direction: "Asc" | "Desc" }) {
 // DataTable.Body
 // =============================================================================
 
-interface DataTableBodyProps {
+function DataTableBody({
+  children,
+  className,
+}: {
   children?: ReactNode;
   className?: string;
-}
-
-function DataTableBody({ children, className }: DataTableBodyProps) {
+}) {
   const ctx = useContext(DataTableContext);
   if (!ctx) {
-    throw new Error("<DataTable.Body> must be used within <DataTable.Root>");
+    throw new Error(
+      "<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) {
@@ -248,7 +219,7 @@ function DataTableBody({ children, className }: DataTableBodyProps) {
       {loading && (!rows || rows.length === 0) && (
         <Table.Row>
           <Table.Cell
-            colSpan={columns?.length ?? 1}
+            colSpan={totalColSpan}
             className="h-24 text-center"
           >
             <span className="text-muted-foreground">Loading...</span>
@@ -258,7 +229,7 @@ function DataTableBody({ children, className }: DataTableBodyProps) {
       {error && (
         <Table.Row>
           <Table.Cell
-            colSpan={columns?.length ?? 1}
+            colSpan={totalColSpan}
             className="h-24 text-center"
           >
             <span className="text-destructive">Error: {error.message}</span>
@@ -268,7 +239,7 @@ function DataTableBody({ children, className }: DataTableBodyProps) {
       {!loading && !error && (!rows || rows.length === 0) && (
         <Table.Row>
           <Table.Cell
-            colSpan={columns?.length ?? 1}
+            colSpan={totalColSpan}
             className="h-24 text-center"
           >
             <span className="text-muted-foreground">No data</span>
@@ -276,19 +247,31 @@ function DataTableBody({ children, className }: DataTableBodyProps) {
         </Table.Row>
       )}
       {rows?.map((row, rowIndex) => (
-        <DataTableRow key={rowIndex} row={row}>
+        <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 (
-              <DataTableCell
+              <Table.Cell
                 key={key}
-                row={row}
-                column={col}
-                rowIndex={rowIndex}
-              />
+                style={col.width ? { width: col.width } : undefined}
+              >
+                {resolveContent(row, col, rowIndex)}
+              </Table.Cell>
             );
           })}
-        </DataTableRow>
+          {hasRowActions && (
+            <Table.Cell
+              style={{ width: 50 }}
+              onClick={(e) => e.stopPropagation()}
+            >
+              <RowActionsMenu actions={rowActions} row={row} />
+            </Table.Cell>
+          )}
+        </Table.Row>
       ))}
     </Table.Body>
   );
@@ -298,82 +281,54 @@ function DataTableBody({ children, className }: DataTableBodyProps) {
 // DataTable.Row
 // =============================================================================
 
-interface DataTableRowComponentProps<
-  TRow extends Record<string, unknown>,
-> extends Omit<ComponentProps<"tr">, "children"> {
-  row?: TRow;
-  children?: ReactNode;
-}
-
-function DataTableRow<TRow extends Record<string, unknown>>({
-  children,
-  ...restProps
-}: DataTableRowComponentProps<TRow>) {
-  return <Table.Row {...restProps}>{children}</Table.Row>;
+/**
+ * Thin wrapper around `Table.Row` for use in custom rendering within
+ * `DataTable.Body`.
+ */
+function DataTableRow(props: ComponentProps<"tr">) {
+  return <Table.Row {...props} />;
 }
 
 // =============================================================================
 // DataTable.Cell
 // =============================================================================
 
-interface DataTableCellComponentProps<
-  TRow extends Record<string, unknown>,
-> extends ComponentProps<"td"> {
-  row?: TRow;
-  column?: Column<TRow>;
-  rowIndex?: number;
+/**
+ * Thin wrapper around `Table.Cell` for use in custom rendering within
+ * `DataTable.Body`.
+ */
+function DataTableCell(props: ComponentProps<"td">) {
+  return <Table.Cell {...props} />;
 }
 
-function DataTableCell<TRow extends Record<string, unknown>>({
-  row,
-  column,
-  rowIndex = 0,
-  children,
-  className,
-  ...restProps
-}: DataTableCellComponentProps<TRow>) {
-  const content = resolveContent(children, row, column, rowIndex);
-
-  return (
-    <Table.Cell
-      className={className}
-      style={column?.width ? { width: column.width } : undefined}
-      {...restProps}
-    >
-      {content}
-    </Table.Cell>
-  );
-}
+// =============================================================================
+// Helpers
+// =============================================================================
 
 /**
- * Resolve cell content from children, row data, and column definition.
+ * Resolve cell content from row data and column definition.
  */
 function resolveContent<TRow extends Record<string, unknown>>(
-  children: ReactNode,
-  row: TRow | undefined,
-  column: Column<TRow> | undefined,
+  row: TRow,
+  column: Column<TRow>,
   rowIndex: number,
 ): ReactNode {
-  if (!children && row && column) {
-    switch (column.kind) {
-      case "field": {
-        const value = row[column.dataKey];
-        if (column.renderer) {
-          return createElement(column.renderer, {
-            value,
-            row,
-            rowIndex,
-            column,
-          });
-        }
-        return formatValue(value);
+  switch (column.kind) {
+    case "field": {
+      const value = row[column.dataKey];
+      if (column.renderer) {
+        return createElement(column.renderer, {
+          value,
+          row,
+          rowIndex,
+          column,
+        });
       }
-      case "display":
-        return column.render(row);
+      return formatValue(value);
     }
+    case "display":
+      return column.render(row);
   }
-
-  return children;
 }
 
 /**
@@ -387,6 +342,95 @@ 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
 // =============================================================================
@@ -394,12 +438,11 @@ function formatValue(value: unknown): ReactNode {
 /**
  * Data-bound table compound component.
  *
- * Use with `useDataTable()` hook which provides `rootProps` to spread,
- * or wrap with `DataTable.Provider` for context-based usage.
+ * Use with `useDataTable()` hook and wrap with `DataTable.Provider`
+ * for context-based data flow.
  *
  * @example
  * ```tsx
- * // Context-based (recommended)
  * const table = useDataTable({ columns, data, loading, collection });
  *
  * <DataTable.Provider value={table}>
@@ -411,12 +454,6 @@ function formatValue(value: unknown): ReactNode {
  *   </DataTable.Root>
  *   <Pagination />
  * </DataTable.Provider>
- *
- * // Props-based (still supported)
- * <DataTable.Root {...table.rootProps}>
- *   <DataTable.Headers />
- *   <DataTable.Body />
- * </DataTable.Root>
  * ```
  */
 export const DataTable = {

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

@@ -234,46 +234,23 @@ describe("useDataTable", () => {
   });
 
   // ---------------------------------------------------------------------------
-  // Props generators
+  // Sort state
   // ---------------------------------------------------------------------------
-  describe("props generators", () => {
-    it("rootProps contains columns, rows, loading, error", () => {
-      const { result } = renderHook(() =>
-        useDataTable<TestRow>({
-          columns: testColumns,
-          data: testData,
-          loading: true,
-        }),
-      );
-
-      const { rootProps } = result.current;
-      expect(rootProps.columns).toHaveLength(4);
-      expect(rootProps.rows).toHaveLength(3);
-      expect(rootProps.loading).toBe(true);
-    });
-
-    it("getRowProps returns row", () => {
+  describe("sort state", () => {
+    it("sortStates is empty when no collection is provided", () => {
       const { result } = renderHook(() =>
         useDataTable<TestRow>({ columns: testColumns, data: testData }),
       );
 
-      const rowProps = result.current.getRowProps(result.current.rows[0]);
-      expect(rowProps.row.name).toBe("Alice");
+      expect(result.current.sortStates).toEqual([]);
     });
 
-    it("getCellProps returns row, column, rowIndex", () => {
+    it("onSort is undefined when no collection is provided", () => {
       const { result } = renderHook(() =>
         useDataTable<TestRow>({ columns: testColumns, data: testData }),
       );
 
-      const cellProps = result.current.getCellProps(
-        result.current.rows[0],
-        testColumns[0],
-        0,
-      );
-      expect(cellProps.row.name).toBe("Alice");
-      expect(cellProps.column).toBe(testColumns[0]);
-      expect(cellProps.rowIndex).toBe(0);
+      expect(result.current.onSort).toBeUndefined();
     });
   });
 });

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

@@ -1,17 +1,15 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import type {
   Column,
-  DataTableCellProps,
-  DataTableRootProps,
-  DataTableRowProps,
   PageInfo,
+  SortState,
   UseDataTableOptions,
   UseDataTableReturn,
 } from "../types";
 
 /**
  * Hook that integrates data management, column visibility, row operations, and
- * props generators for the `DataTable.*` compound component.
+ * sort/pagination state for the `DataTable.*` compound component.
  *
  * @example
  * ```tsx
@@ -25,10 +23,12 @@ import type {
  *   collection,
  * });
  *
- * <DataTable.Root {...table.rootProps}>
- *   <DataTable.Headers />
- *   <DataTable.Body />
- * </DataTable.Root>
+ * <DataTable.Provider value={table}>
+ *   <DataTable.Root>
+ *     <DataTable.Headers />
+ *     <DataTable.Body />
+ *   </DataTable.Root>
+ * </DataTable.Provider>
  * ```
  */
 export function useDataTable<TRow extends Record<string, unknown>>(
@@ -40,6 +40,8 @@ export function useDataTable<TRow extends Record<string, unknown>>(
     loading = false,
     error = null,
     collection,
+    onClickRow,
+    rowActions,
   } = options;
 
   // ---------------------------------------------------------------------------
@@ -194,64 +196,30 @@ export function useDataTable<TRow extends Record<string, unknown>>(
   );
 
   // ---------------------------------------------------------------------------
-  // Props generators
+  // Sort (delegated from collection)
   // ---------------------------------------------------------------------------
-  const rootProps = useMemo<DataTableRootProps<TRow>>(() => {
-    return {
-      columns: visibleColumns,
-      rows,
-      loading,
-      error,
-      onSort: collection
-        ? (field: string, direction?: "Asc" | "Desc") =>
-            collection.setSort(field, direction)
-        : undefined,
-      sortStates: collection?.sortStates,
-      rowOperations: { updateRow, deleteRow, insertRow },
-      children: null,
-    };
-  }, [
-    visibleColumns,
-    rows,
-    loading,
-    error,
-    collection,
-    updateRow,
-    deleteRow,
-    insertRow,
-  ]);
-
-  const getRowProps = useCallback(
-    (row: TRow): DataTableRowProps<TRow> => ({ row }),
-    [],
-  );
-
-  const getCellProps = useCallback(
-    (
-      row: TRow,
-      column: Column<TRow>,
-      rowIndex: number,
-    ): DataTableCellProps<TRow> => ({
-      row,
-      column,
-      rowIndex,
-    }),
-    [],
-  );
+  const sortStates = useMemo<SortState[]>(() => {
+    return collection?.sortStates ?? [];
+  }, [collection?.sortStates]);
+
+  const onSort = useMemo<
+    ((field: string, direction?: "Asc" | "Desc") => void) | undefined
+  >(() => {
+    if (!collection) return undefined;
+    return (field: string, direction?: "Asc" | "Desc") =>
+      collection.setSort(field, direction);
+  }, [collection]);
 
   // ---------------------------------------------------------------------------
   // Return
   // ---------------------------------------------------------------------------
   return {
-    // Props generators
-    rootProps,
-    getRowProps,
-    getCellProps,
-
     // Data
     rows,
     loading,
     error,
+    sortStates,
+    onSort,
 
     // Pagination
     pageInfo,
@@ -275,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/index.ts

@@ -22,10 +22,8 @@ export type {
   UseCollectionReturn,
   UseDataTableOptions,
   UseDataTableReturn,
+  RowAction,
   RowOperations,
-  DataTableRootProps,
-  DataTableRowProps,
-  DataTableCellProps,
   FieldName,
   TableFieldName,
   OrderableFieldName,
@@ -62,7 +60,7 @@ export {
 export { Table } from "./table";
 
 // DataTable (data-bound)
-export { DataTable } from "./data-table/index";
+export { DataTable } from "./data-table/data-table";
 export { useDataTable } from "./data-table/use-data-table";
 export { useDataTableContext } from "./data-table/data-table-context";
 

package/src/component/types.ts

@@ -497,6 +497,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,63 +515,45 @@ export interface RowOperations<TRow extends Record<string, unknown>> {
   insertRow: (row: TRow) => { rollback: () => void };
 }
 
-/**
- * Props for `DataTable.Root` component (generated by `useDataTable`).
- */
-export interface DataTableRootProps<TRow extends Record<string, unknown>> {
-  /** Visible column definitions */
-  columns: Column<TRow>[];
-  /** Row data */
-  rows: TRow[];
-  /** Loading state */
-  loading?: boolean;
-  /** Error */
-  error?: Error | null;
-  /** Sort handler (connected to collection) */
-  onSort?: (field: string, direction?: "Asc" | "Desc") => void;
-  /** Current sort states */
-  sortStates?: SortState[];
-  /** Row operations (provided to children via Context) */
-  rowOperations?: RowOperations<TRow>;
-  children: ReactNode;
-}
-
-/**
- * Props for `DataTable.Row` component.
- */
-export interface DataTableRowProps<TRow extends Record<string, unknown>> {
-  /** The row data */
-  row: TRow;
-}
+// =============================================================================
+// Row Actions
+// =============================================================================
 
 /**
- * Props for `DataTable.Cell` component.
+ * 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 DataTableCellProps<TRow extends Record<string, unknown>> {
-  /** The row data */
-  row: TRow;
-  /** The column definition */
-  column: Column<TRow>;
-  /** The row index */
-  rowIndex: number;
+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.
  */
 export interface UseDataTableReturn<TRow extends Record<string, unknown>> {
-  // Props generators (for spreading)
-  /** Props for DataTable.Root */
-  rootProps: DataTableRootProps<TRow>;
-  /** Get props for a DataTable.Row */
-  getRowProps: (row: TRow) => DataTableRowProps<TRow>;
-  /** Get props for a DataTable.Cell */
-  getCellProps: (
-    row: TRow,
-    column: Column<TRow>,
-    rowIndex: number,
-  ) => DataTableCellProps<TRow>;
-
   // Data
   /** Row data extracted from collection result */
   rows: TRow[];
@@ -575,6 +561,10 @@ export interface UseDataTableReturn<TRow extends Record<string, unknown>> {
   loading: boolean;
   /** Error */
   error: Error | null;
+  /** Current sort states */
+  sortStates: SortState[];
+  /** Sort handler (connected to collection) */
+  onSort?: (field: string, direction?: "Asc" | "Desc") => void;
 
   // Pagination (delegated from collection)
   /** Page info from GraphQL response */
@@ -613,6 +603,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>[];
 }
 
 // =============================================================================