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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.2.19",
+  "version": "0.2.20",
   "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

@@ -2,7 +2,7 @@ import { createContext, useContext } from "react";
 import type { Column, PageInfo, 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;
@@ -40,9 +40,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 +57,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}

@@ -7,12 +7,7 @@ import {
 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, UseDataTableReturn } from "../types";
 import {
   DataTableContext,
   type DataTableContextValue,
@@ -23,66 +18,19 @@ 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 is read from context.
  */
-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 +73,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,
@@ -160,14 +108,12 @@ 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;
 
@@ -225,15 +171,18 @@ 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;
 
@@ -276,19 +225,19 @@ function DataTableBody({ children, className }: DataTableBodyProps) {
         </Table.Row>
       )}
       {rows?.map((row, rowIndex) => (
-        <DataTableRow key={rowIndex} row={row}>
+        <Table.Row key={rowIndex}>
           {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>
+        </Table.Row>
       ))}
     </Table.Body>
   );
@@ -298,82 +247,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;
 }
 
 /**
@@ -394,12 +315,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 +331,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>>(
@@ -194,64 +194,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,

package/src/component/index.ts

@@ -23,9 +23,6 @@ export type {
   UseDataTableOptions,
   UseDataTableReturn,
   RowOperations,
-  DataTableRootProps,
-  DataTableRowProps,
-  DataTableCellProps,
   FieldName,
   TableFieldName,
   OrderableFieldName,
@@ -62,7 +59,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

@@ -511,63 +511,10 @@ 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;
-}
-
-/**
- * Props for `DataTable.Cell` component.
- */
-export interface DataTableCellProps<TRow extends Record<string, unknown>> {
-  /** The row data */
-  row: TRow;
-  /** The column definition */
-  column: Column<TRow>;
-  /** The row index */
-  rowIndex: number;
-}
-
 /**
  * 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 +522,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 */