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

package/README.md

@@ -11,7 +11,7 @@ A low-level React component library for building data table interfaces with Tail
 - **`DataTable.*` Compound Components**: Data-bound table with sort indicators, cell renderers, and `useDataTable` integration
 - **`useDataTable` Hook**: Integrates data, column visibility, row operations (optimistic updates), and props generators
 - **Column Definition Helpers**: `field()` for data columns with sort/filter, `display()` for render-only columns
-- **Metadata-based Inference**: `inferColumnHelper()` auto-derives sort/filter config from generated table metadata
+- **Metadata-based Inference**: `createColumnHelper().inferColumns()` auto-derives sort/filter config from generated table metadata
 - **Utility Components**: `ColumnSelector`, `CsvButton`, `SearchFilterForm`, `Pagination` — all props-based, spreadable from hooks
 - **Multi-sort Support**: Multiple simultaneous sort fields
 - **Optimistic Updates**: `updateRow`, `deleteRow`, `insertRow` with rollback
@@ -49,27 +49,27 @@ npm install react react-dom
 import {
   useCollection,
   useDataTable,
-  Collection,
   DataTable,
   Pagination,
-  field,
-  display,
+  createColumnHelper,
 } from "@izumisy-tailor/tailor-data-viewer/component";
 import "@izumisy-tailor/tailor-data-viewer/styles/theme.css";
 
 // 1. Define columns
+const { field, display } = createColumnHelper<Order>();
+
 const columns = [
-  field<Order>("name", {
+  field("name", {
     label: "Name",
     sort: { type: "string" },
     filter: { type: "string" },
   }),
-  field<Order>("amount", {
+  field("amount", {
     label: "Amount",
     sort: { type: "number" },
     filter: { type: "number" },
   }),
-  field<Order>("status", {
+  field("status", {
     label: "Status",
     filter: {
       type: "enum",
@@ -79,7 +79,7 @@ const columns = [
       ],
     },
   }),
-  display<Order>("actions", {
+  display("actions", {
     width: 50,
     render: (row) => <button onClick={() => handleEdit(row)}>Edit</button>,
   }),
@@ -98,13 +98,13 @@ function OrdersPage() {
   });
 
   return (
-    <Collection.Provider value={collection}>
-      <DataTable.Root {...table.rootProps}>
+    <DataTable.Provider value={table}>
+      <DataTable.Root>
         <DataTable.Headers />
         <DataTable.Body />
       </DataTable.Root>
-      <Pagination {...table} />
-    </Collection.Provider>
+      <Pagination />
+    </DataTable.Provider>
   );
 }
 ```
@@ -128,8 +128,8 @@ const collection = useCollection({
 const [result] = useQuery({ ...collection.toQueryArgs() });
 
 // Filter operations
-collection.addFilter("status", "ACTIVE", "eq");
-collection.setFilters([{ field: "status", fieldType: "enum", operator: "eq", value: "ACTIVE" }]);
+collection.addFilter("status", "eq", "ACTIVE");
+collection.setFilters([{ field: "status", operator: "eq", value: "ACTIVE" }]);
 collection.removeFilter("status");
 collection.clearFilters();
 
@@ -140,26 +140,40 @@ collection.clearSort();
 
 // Pagination
 collection.nextPage(endCursor);
-collection.prevPage();
+collection.prevPage(startCursor);
 collection.resetPage();
+
+// Page info tracking
+collection.setPageInfo(pageInfo);
+collection.hasPrevPage;  // boolean
+collection.hasNextPage;  // boolean
 ```
 
-### `Collection.Provider` / `useCollectionContext()`
+### `DataTable.Provider` / `useDataTableContext()` / `useCollectionContext()`
 
-Shares `useCollection` return value via Context. Child components access it with `useCollectionContext()`.
+`DataTable.Provider` wraps the table UI and provides both data table and collection context. All utility components (`Pagination`, `ColumnSelector`, `CsvButton`, `SearchFilterForm`) read from this context — no prop spreading needed.
+
+When `collection` is passed to `useDataTable`, `DataTable.Provider` automatically wraps a `Collection.Provider` so child components can use `useCollectionContext()`.
 
 ```tsx
-<Collection.Provider value={collection}>
+<DataTable.Provider value={table}>
   <StatusFilter />   {/* useCollectionContext() inside */}
-  <DataTable.Root {...table.rootProps}>
+  <DataTable.Root>
     <DataTable.Headers />
     <DataTable.Body />
   </DataTable.Root>
-  <Pagination {...table} />
-</Collection.Provider>
+  <Pagination />
+</DataTable.Provider>
 ```
 
-Provider is optional — for simple cases, pass params directly via props.
+For cases where you need `Collection.Provider` without `DataTable.Provider` (e.g., non-table UIs), you can use it standalone:
+
+```tsx
+<Collection.Provider value={collection}>
+  <StatusFilter />
+  <CustomKanbanBoard />
+</Collection.Provider>
+```
 
 ### Column Definition Helpers
 
@@ -189,7 +203,7 @@ display("actions", {
 
 ### Table Metadata Generator
 
-This library includes a metadata generator for [Tailor Platform SDK](https://www.npmjs.com/package/@tailor-platform/sdk) that produces type-safe table metadata with `as const` assertions. The generated metadata is used by `inferColumnHelper()` for automatic sort/filter configuration.
+This library includes a metadata generator for [Tailor Platform SDK](https://www.npmjs.com/package/@tailor-platform/sdk) that produces type-safe table metadata with `as const` assertions. The generated metadata is used by `createColumnHelper().inferColumns()` for automatic sort/filter configuration.
 
 1. Configure the generator in your `tailor.config.ts`:
 
@@ -215,15 +229,16 @@ export default defineConfig({
 tailor-sdk generate
 ```
 
-### `inferColumnHelper(tableMetadata)`
+### `createColumnHelper().inferColumns(tableMetadata)`
 
-`field()` requires manually specifying `sort`/`filter` type configs and enum `options` for every column. `inferColumnHelper()` eliminates this boilerplate by automatically deriving these from the generated table metadata. Based on each field's type (string, number, date, enum, etc.), the appropriate `SortConfig` / `FilterConfig` is set automatically, and enum fields get their options populated from the schema.
+`field()` requires manually specifying `sort`/`filter` type configs and enum `options` for every column. `inferColumns()` eliminates this boilerplate by automatically deriving these from the generated table metadata. Based on each field's type (string, number, date, enum, etc.), the appropriate `SortConfig` / `FilterConfig` is set automatically, and enum fields get their options populated from the schema.
 
 ```tsx
-import { inferColumnHelper, display } from "@izumisy-tailor/tailor-data-viewer/component";
+import { createColumnHelper } from "@izumisy-tailor/tailor-data-viewer/component";
 import { tableMetadata } from "./generated/data-viewer-metadata.generated";
 
-const { column, columns } = inferColumnHelper(tableMetadata.task);
+const { inferColumns, display } = createColumnHelper<Task>();
+const { column, columns } = inferColumns(tableMetadata.task);
 
 const taskColumns = [
   column("title"),                     // sort/filter auto-configured from metadata
@@ -237,7 +252,7 @@ const taskColumns = [
 ];
 ```
 
-`inferColumnHelper()` can be freely mixed with manual `field()` / `display()` definitions. Use `field()` for fields not in the metadata or those requiring custom configuration, and `inferColumnHelper()` for everything else.
+`inferColumns()` can be freely mixed with manual `field()` / `display()` definitions. Use `field()` for fields not in the metadata or those requiring custom configuration, and `inferColumns()` for everything else.
 
 ### `useDataTable(options)`
 
@@ -250,13 +265,19 @@ const table = useDataTable<Order>({
   loading: result.fetching,
   error: result.error,
   collection,
+  onClickRow: (row) => navigate(`/orders/${row.id}`),
+  rowActions: [
+    { id: "delete", label: "Delete", variant: "destructive", onClick: (row) => handleDelete(row.id) },
+  ],
 });
 
-// Spread props to components
-<DataTable.Root {...table.rootProps}>...</DataTable.Root>
-<ColumnSelector {...table} />
-<CsvButton {...table} />
-<Pagination {...table} />
+// Wrap with DataTable.Provider (utility components read from context)
+<DataTable.Provider value={table}>
+  <DataTable.Root>...</DataTable.Root>
+  <ColumnSelector />
+  <CsvButton filename="orders" />
+  <Pagination />
+</DataTable.Provider>
 
 // Column visibility
 table.toggleColumn("amount");
@@ -296,52 +317,63 @@ Low-level table primitives without data binding. Use for fully custom layouts or
 Pair with `useDataTable` for automatic header sorting, cell rendering, and row operations.
 
 ```tsx
-// Basic usage (spread rootProps)
-<DataTable.Root {...table.rootProps}>
-  <DataTable.Headers />
-  <DataTable.Body />
-</DataTable.Root>
+// Basic usage (wrap with DataTable.Provider)
+<DataTable.Provider value={table}>
+  <DataTable.Root>
+    <DataTable.Headers />
+    <DataTable.Body />
+  </DataTable.Root>
+</DataTable.Provider>
 
 // Custom row rendering
-<DataTable.Root {...table.rootProps}>
-  <DataTable.Headers />
-  <DataTable.Body>
-    {table.rows.map((row, rowIndex) => (
-      <DataTable.Row
-        key={row.id}
-        {...table.getRowProps(row)}
-        onClick={() => navigate(`/orders/${row.id}`)}
-      >
-        {table.visibleColumns.map((col) => (
-          <DataTable.Cell key={col.id} {...table.getCellProps(row, col, rowIndex)} />
-        ))}
-      </DataTable.Row>
-    ))}
-  </DataTable.Body>
-</DataTable.Root>
+<DataTable.Provider value={table}>
+  <DataTable.Root>
+    <DataTable.Headers />
+    <DataTable.Body>
+      {table.rows.map((row) => (
+        <DataTable.Row
+          key={row.id}
+          onClick={() => navigate(`/orders/${row.id}`)}
+        >
+          {table.visibleColumns.map((col) => (
+            <DataTable.Cell key={col.kind === "field" ? col.dataKey : col.id} />
+          ))}
+        </DataTable.Row>
+      ))}
+    </DataTable.Body>
+  </DataTable.Root>
+</DataTable.Provider>
 ```
 
 ### Utility Components
 
-All utility components are props-based and designed to be used with spread from `useDataTable` / `useCollection`.
+All utility components read from `DataTable.Provider` context.
+
+| Component | Props | Description |
+|-----------|-------|-------------|
+| `Pagination` | (none) | Previous/Next page controls |
+| `ColumnSelector` | (none) | Column visibility toggle UI |
+| `CsvButton` | `filename?` | Export visible data as CSV |
+| `SearchFilterForm` | `labels?`, `trigger?` | Multi-field filter form with operator selection |
 
-| Component | Spread from | Description |
-|-----------|------------|-------------|
-| `ColumnSelector` | `{...table}` | Column visibility toggle UI |
-| `CsvButton` | `{...table}` | Export visible data as CSV |
-| `SearchFilterForm` | `{...table, ...collection}` | Multi-field filter form with operator selection |
-| `Pagination` | `{...table}` | Previous/Next page controls |
+All utility components read from `DataTable.Provider` context — no prop spreading needed:
 
 ```tsx
-<SearchFilterForm {...table} {...collection} />
-<ColumnSelector {...table} />
-<CsvButton {...table} filename="orders-export" />
-<Pagination {...table} />
+<DataTable.Provider value={table}>
+  <SearchFilterForm />
+  <ColumnSelector />
+  <CsvButton filename="orders-export" />
+  <DataTable.Root>
+    <DataTable.Headers />
+    <DataTable.Body />
+  </DataTable.Root>
+  <Pagination />
+</DataTable.Provider>
 ```
 
 ### Optimistic Updates in Cell Renderers
 
-Use `useDataTableContext()` inside `DataTable.Root` to access row operations from custom cell renderers.
+Use `useDataTableContext()` inside `DataTable.Provider` to access row operations from custom cell renderers.
 
 ```tsx
 const StatusEditor: CellRenderer<Order> = ({ value, row }) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.2.21",
+  "version": "0.2.23",
   "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, RowAction, RowOperations, SortState } from "../types";
+import type {
+  Column,
+  PageInfo,
+  RowAction,
+  RowOperations,
+  SortState,
+} from "../types";
 
 /**
  * Context value provided by `DataTable.Provider`.

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

@@ -218,30 +218,21 @@ function DataTableBody({
     <Table.Body className={className}>
       {loading && (!rows || rows.length === 0) && (
         <Table.Row>
-          <Table.Cell
-            colSpan={totalColSpan}
-            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={totalColSpan}
-            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={totalColSpan}
-            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>
@@ -374,15 +365,16 @@ function RowActionsMenu<TRow extends Record<string, unknown>>({
   }, [open]);
 
   // Close on Escape
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (e.key === "Escape") setOpen(false);
-    },
-    [],
-  );
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === "Escape") setOpen(false);
+  }, []);
 
   return (
-    <div className="relative inline-block" ref={menuRef} onKeyDown={handleKeyDown}>
+    <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"

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, expectTypeOf } from "vitest";
-import { createColumnHelper, inferColumnHelper } from "./field-helpers";
+import { createColumnHelper } from "./field-helpers";
 import type { TableMetadataMap } from "../generator/metadata-generator";
 import { fieldTypeToSortConfig, fieldTypeToFilterConfig } from "./types";
 import type { NodeType, TableFieldName } from "./types";
@@ -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", () => {
@@ -138,7 +175,7 @@ describe("fieldTypeToFilterConfig", () => {
   });
 });
 
-describe("inferColumnHelper()", () => {
+describe("createColumnHelper().inferColumns()", () => {
   const testMetadata = {
     task: {
       name: "task",
@@ -166,8 +203,19 @@ describe("inferColumnHelper()", () => {
     },
   } as const satisfies TableMetadataMap;
 
+  type TaskRow = {
+    id: string;
+    title: string;
+    status: string;
+    dueDate: string;
+    count: number;
+    isActive: boolean;
+    tags: string[];
+  };
+
   it("creates a column with auto-detected sort/filter", () => {
-    const { column } = inferColumnHelper(testMetadata.task);
+    const { inferColumns } = createColumnHelper<TaskRow>();
+    const { column } = inferColumns(testMetadata.task);
 
     const titleCol = column("title");
     expect(titleCol.kind).toBe("field");
@@ -177,7 +225,8 @@ describe("inferColumnHelper()", () => {
   });
 
   it("auto-detects enum options", () => {
-    const { column } = inferColumnHelper(testMetadata.task);
+    const { inferColumns } = createColumnHelper<TaskRow>();
+    const { column } = inferColumns(testMetadata.task);
     const statusCol = column("status");
     expect(statusCol.filter).toEqual({
       type: "enum",
@@ -192,42 +241,48 @@ describe("inferColumnHelper()", () => {
   });
 
   it("auto-detects date type", () => {
-    const { column } = inferColumnHelper(testMetadata.task);
+    const { inferColumns } = createColumnHelper<TaskRow>();
+    const { column } = inferColumns(testMetadata.task);
     const dateCol = column("dueDate");
     expect(dateCol.sort).toEqual({ type: "date" });
     expect(dateCol.filter).toEqual({ type: "date" });
   });
 
   it("disables sort with sort: false", () => {
-    const { column } = inferColumnHelper(testMetadata.task);
+    const { inferColumns } = createColumnHelper<TaskRow>();
+    const { column } = inferColumns(testMetadata.task);
     const col = column("title", { sort: false });
     expect(col.sort).toBeUndefined();
     expect(col.filter).toEqual({ type: "string" });
   });
 
   it("disables filter with filter: false", () => {
-    const { column } = inferColumnHelper(testMetadata.task);
+    const { inferColumns } = createColumnHelper<TaskRow>();
+    const { column } = inferColumns(testMetadata.task);
     const col = column("title", { filter: false });
     expect(col.sort).toEqual({ type: "string" });
     expect(col.filter).toBeUndefined();
   });
 
   it("uuid has no sort, has uuid filter", () => {
-    const { column } = inferColumnHelper(testMetadata.task);
+    const { inferColumns } = createColumnHelper<TaskRow>();
+    const { column } = inferColumns(testMetadata.task);
     const col = column("id");
     expect(col.sort).toBeUndefined();
     expect(col.filter).toEqual({ type: "uuid" });
   });
 
   it("array type has no sort/filter", () => {
-    const { column } = inferColumnHelper(testMetadata.task);
+    const { inferColumns } = createColumnHelper<TaskRow>();
+    const { column } = inferColumns(testMetadata.task);
     const col = column("tags");
     expect(col.sort).toBeUndefined();
     expect(col.filter).toBeUndefined();
   });
 
   it("columns() creates multiple columns at once", () => {
-    const { columns } = inferColumnHelper(testMetadata.task);
+    const { inferColumns } = createColumnHelper<TaskRow>();
+    const { columns } = inferColumns(testMetadata.task);
     const cols = columns(["title", "status", "dueDate"]);
     expect(cols).toHaveLength(3);
     expect(cols[0].dataKey).toBe("title");
@@ -236,7 +291,8 @@ describe("inferColumnHelper()", () => {
   });
 
   it("columns() applies overrides", () => {
-    const { columns } = inferColumnHelper(testMetadata.task);
+    const { inferColumns } = createColumnHelper<TaskRow>();
+    const { columns } = inferColumns(testMetadata.task);
     const cols = columns(["title", "status"], {
       overrides: {
         title: { label: "Custom Title", width: 300 },
@@ -247,7 +303,8 @@ describe("inferColumnHelper()", () => {
   });
 
   it("columns() applies global sort/filter options", () => {
-    const { columns } = inferColumnHelper(testMetadata.task);
+    const { inferColumns } = createColumnHelper<TaskRow>();
+    const { columns } = inferColumns(testMetadata.task);
     const cols = columns(["title", "status"], { sort: false });
     expect(cols[0].sort).toBeUndefined();
     expect(cols[1].sort).toBeUndefined();
@@ -256,7 +313,8 @@ describe("inferColumnHelper()", () => {
   });
 
   it("throws for non-existent field", () => {
-    const { column } = inferColumnHelper(testMetadata.task);
+    const { inferColumns } = createColumnHelper<TaskRow>();
+    const { column } = inferColumns(testMetadata.task);
     // @ts-expect-error - intentionally testing invalid field name
     expect(() => column("nonExistent")).toThrow(
       'Field "nonExistent" not found in table "task" metadata',

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,45 +119,31 @@ 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),
   };
 }
 
 // =============================================================================
-// inferColumnHelper() helper
+// Internal: metadata-based column inference (used by createColumnHelper)
 // =============================================================================
 
-/**
- * Create column definition helpers from generated table metadata.
- *
- * Automatically infers sort/filter configuration from field types,
- * including enum options.
- *
- * @typeParam TRow - The row type for type-safe renderer access.
- * @param tableMetadata - A single table metadata object from the generated map.
- *
- * @example
- * ```tsx
- * import { tableMetadata } from "./generated/data-viewer-metadata.generated";
- *
- * type Task = { id: string; title: string; status: string; dueDate: string };
- *
- * const { column, columns } = inferColumnHelper<Task>(tableMetadata.task);
- *
- * const taskColumns = [
- *   column("title"),           // sort/filter auto-detected
- *   column("status"),          // enum options auto-populated
- *   column("dueDate"),         // date type auto-recognized
- *   column("title", {
- *     renderer: ({ row }) => <span>{row.title}</span>, // row: Task
- *   }),
- * ];
- * ```
- */
-export function inferColumnHelper<
+function inferColumnHelper<
   TRow extends Record<string, unknown>,
   const TTable extends TableMetadata = TableMetadata,
 >(

package/src/component/index.ts

@@ -65,7 +65,7 @@ export { useDataTable } from "./data-table/use-data-table";
 export { useDataTableContext } from "./data-table/data-table-context";
 
 // Field helpers
-export { createColumnHelper, inferColumnHelper } from "./field-helpers";
+export { createColumnHelper } from "./field-helpers";
 
 // Utility components
 export { Pagination } from "./pagination";

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;
 }
 
 // =============================================================================