@izumisy-tailor/tailor-data-viewer 0.2.31 → 0.2.33

package/README.md

@@ -10,8 +10,8 @@ A low-level React component library for building data table interfaces with Tail
 - **`Table.*` Compound Components**: Static, unstyled table primitives (`<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, `<td>`)
 - **`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**: `createColumnHelper().inferColumns()` auto-derives sort/filter config from generated table metadata
+- **Column Definition Helper**: `createColumnHelper<TRow>()` returns `{ column, inferColumns }` with the row type bound
+- **Metadata-based Inference**: `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
@@ -56,22 +56,28 @@ import {
 import "@izumisy-tailor/tailor-data-viewer/styles/theme.css";
 
 // 1. Define columns
-const { field, display } = createColumnHelper<Order>();
+const { column } = createColumnHelper<Order>();
 
 const columns = [
-  field("name", {
+  column({
     label: "Name",
-    sort: { type: "string" },
-    filter: { type: "string" },
+    render: (row) => row.name,
+    accessor: (row) => row.name,
+    sort: { field: "name", type: "string" },
+    filter: { field: "name", type: "string" },
   }),
-  field("amount", {
+  column({
     label: "Amount",
-    sort: { type: "number" },
-    filter: { type: "number" },
+    render: (row) => String(row.amount),
+    accessor: (row) => row.amount,
+    sort: { field: "amount", type: "number" },
+    filter: { field: "amount", type: "number" },
   }),
-  field("status", {
+  column({
     label: "Status",
+    render: (row) => row.status,
     filter: {
+      field: "status",
       type: "enum",
       options: [
         { value: "DRAFT", label: "Draft" },
@@ -79,7 +85,9 @@ const columns = [
       ],
     },
   }),
-  display("actions", {
+  column({
+    id: "actions",
+    label: "Actions",
     width: 50,
     render: (row) => <button onClick={() => handleEdit(row)}>Edit</button>,
   }),
@@ -175,35 +183,24 @@ For cases where you need `Collection.Provider` without `DataTable.Provider` (e.g
 </Collection.Provider>
 ```
 
-### Column Definition Helpers
+### Column Definition Helper
 
-#### `field(dataKey, options?)`
+#### `column(options)`
 
-Defines a data-bound column. Supports sort and filter configuration.
+Defines a column with required `label` and `render`. Optionally supports `sort`, `filter`, `accessor`, `width`, and `id`.
 
 ```tsx
-field("name", {
+column<Order>({
   label: "Name",
-  sort: { type: "string" },
-  filter: { type: "string" },
-  renderer: ({ value }) => <strong>{value}</strong>,
-})
-```
-
-#### `display(id, options)`
-
-Defines a render-only column (no sort/filter).
-
-```tsx
-display("actions", {
-  width: 50,
-  render: (row) => <ActionMenu row={row} />,
+  render: (row) => <strong>{row.name}</strong>,
+  sort: { field: "name", type: "string" },
+  filter: { field: "name", type: "string" },
 })
 ```
 
 ### 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 `createColumnHelper().inferColumns()` 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 `inferColumns()` for automatic sort/filter configuration.
 
 1. Configure the generator in your `tailor.config.ts`:
 
@@ -229,30 +226,31 @@ export default defineConfig({
 tailor-sdk generate
 ```
 
-### `createColumnHelper().inferColumns(tableMetadata)`
+### `inferColumns(tableMetadata)`
 
-`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.
+`column()` 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 { createColumnHelper } from "@izumisy-tailor/tailor-data-viewer/component";
 import { tableMetadata } from "./generated/data-viewer-metadata.generated";
 
-const { inferColumns, display } = createColumnHelper<Task>();
-const { column, columns } = inferColumns(tableMetadata.task);
+const { column, inferColumns } = createColumnHelper<Task>();
+const infer = inferColumns(tableMetadata.task);
 
 const taskColumns = [
-  column("title"),                     // sort/filter auto-configured from metadata
-  column("status"),                    // enum options auto-derived
-  column("dueDate"),                   // date type auto-detected
-  column("priority", { sort: false }), // override: disable sort
-  ...columns(["name", "email"]),       // batch definition
-  display("actions", {
+  column(infer("title")),                            // sort/filter auto-configured from metadata
+  column(infer("status")),                           // enum options auto-derived
+  column(infer("dueDate")),                          // date type auto-detected
+  column(infer("priority", { sort: false })),        // override: disable sort
+  column({
+    id: "actions",
+    label: "Actions",
     render: (row) => <ActionMenu row={row} />,
   }),
 ];
 ```
 
-`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.
+`inferColumns()` can be freely mixed with manual `column()` definitions. Use manual `column()` for fields not in the metadata or those requiring custom configuration, and `inferColumns()` for everything else.
 
 ### `useDataTable(options)`
 
@@ -336,7 +334,7 @@ Pair with `useDataTable` for automatic header sorting, cell rendering, and row o
           onClick={() => navigate(`/orders/${row.id}`)}
         >
           {table.visibleColumns.map((col) => (
-            <DataTable.Cell key={col.kind === "field" ? col.dataKey : col.id} />
+            <DataTable.Cell key={col.id ?? col.label} />
           ))}
         </DataTable.Row>
       ))}
@@ -373,10 +371,10 @@ All utility components read from `DataTable.Provider` context — no prop spread
 
 ### Optimistic Updates in Cell Renderers
 
-Use `useDataTableContext()` inside `DataTable.Provider` to access row operations from custom cell renderers.
+Use `useDataTableContext()` inside `DataTable.Provider` to access row operations from custom renderers.
 
 ```tsx
-const StatusEditor: CellRenderer<Order> = ({ value, row }) => {
+function StatusEditor({ row }: { row: Order }) {
   const { updateRow } = useDataTableContext<Order>();
   const [updateOrder] = useMutation(UPDATE_ORDER);
 
@@ -389,13 +387,19 @@ const StatusEditor: CellRenderer<Order> = ({ value, row }) => {
     }
   };
 
-  return <StatusSelect value={value} onChange={handleChange} />;
-};
+  return <StatusSelect value={row.status} onChange={handleChange} />;
+}
+
+// Use in column definition
+column<Order>({
+  label: "Status",
+  render: (row) => <StatusEditor row={row} />,
+})
 ```
 
 ### Relation Fields
 
-Use `display()` with GraphQL query expansion to show relation data.
+Use `column()` with GraphQL query expansion to show relation data.
 
 ```tsx
 // Include relations in your GraphQL query
@@ -414,17 +418,21 @@ const GET_MEMBERSHIPS = graphql(`
   }
 `);
 
-// Display relation fields with display()
+// Display relation fields with column()
 const columns = [
-  display("supplierCompanyName", {
+  column<Membership>({
     label: "Company",
     render: (row) => row.supplier?.companyName ?? "-",
   }),
-  display("addedByName", {
+  column<Membership>({
     label: "Added By",
     render: (row) => row.addedBy?.name ?? "-",
   }),
-  field("createdAt", { label: "Created", sort: { type: "date" } }),
+  column<Membership>({
+    label: "Created",
+    render: (row) => row.createdAt,
+    sort: { field: "createdAt", type: "date" },
+  }),
 ];
 ```
 

package/package.json

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

package/src/component/data-table/column-selector.test.tsx

@@ -11,10 +11,9 @@ import { ColumnSelector } from "./column-selector";
 type TestRow = { id: string; name: string; status: string };
 
 const testColumns: Column<TestRow>[] = [
-  { kind: "field", dataKey: "name", label: "Name" },
-  { kind: "field", dataKey: "status", label: "Status" },
+  { label: "Name", render: (row) => row.name },
+  { label: "Status", render: (row) => row.status },
   {
-    kind: "display",
     id: "actions",
     label: "Actions",
     render: (row) => <button>Edit {row.name}</button>,
@@ -85,7 +84,7 @@ describe("ColumnSelector", () => {
 
     const checkboxes = screen.getAllByRole("checkbox");
     fireEvent.click(checkboxes[0]);
-    expect(toggleColumn).toHaveBeenCalledWith("name");
+    expect(toggleColumn).toHaveBeenCalledWith("Name");
   });
 
   it("calls showAllColumns when Select all is clicked", () => {

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

@@ -47,10 +47,9 @@ export function ColumnSelector() {
               {labels.columnSelector.deselectAll}
             </button>
           </div>
-          {columns.map((col) => {
-            const key = col.kind === "field" ? col.dataKey : col.id;
-            const label =
-              col.label ?? (col.kind === "field" ? col.dataKey : col.id);
+          {columns.map((col, colIndex) => {
+            const key = col.id ?? col.label ?? String(colIndex);
+            const label = col.label;
             const visible = isColumnVisible(key);
 
             return (

package/src/component/data-table/csv-button.test.tsx

@@ -11,8 +11,12 @@ import { CsvButton } from "./csv-button";
 type TestRow = { id: string; name: string; status: string };
 
 const testColumns: Column<TestRow>[] = [
-  { kind: "field", dataKey: "name", label: "Name" },
-  { kind: "field", dataKey: "status", label: "Status" },
+  { label: "Name", render: (row) => row.name, accessor: (row) => row.name },
+  {
+    label: "Status",
+    render: (row) => row.status,
+    accessor: (row) => row.status,
+  },
 ];
 
 const testRows: TestRow[] = [

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

@@ -20,21 +20,15 @@ export function CsvButton({ filename = "export" }: { filename?: string }) {
   const labels = getLabels(locale);
   const handleExport = () => {
     // Build header row
-    const headers = visibleColumns.map((col) => {
-      if (col.kind === "field") {
-        return col.label ?? col.dataKey;
-      }
-      return col.label ?? col.id;
-    });
+    const headers = visibleColumns.map((col) => col.label ?? "");
 
-    // Build data rows
+    // Build data rows (only columns with accessor are exported)
     const csvRows = rows.map((row) =>
       visibleColumns.map((col) => {
-        if (col.kind === "field") {
-          const value = (row as Record<string, unknown>)[col.dataKey];
+        if (col.accessor) {
+          const value = col.accessor(row);
           return formatCsvValue(value);
         }
-        // Display columns are not exportable (they may contain JSX)
         return "";
       }),
     );

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

@@ -14,18 +14,15 @@ type TestRow = {
 
 const testColumns: Column<TestRow>[] = [
   {
-    kind: "field",
-    dataKey: "name",
     label: "Name",
-    sort: { type: "string" },
+    render: (row) => row.name,
+    sort: { field: "name", type: "string" },
   },
   {
-    kind: "field",
-    dataKey: "status",
     label: "Status",
+    render: (row) => row.status,
   },
   {
-    kind: "display",
     id: "actions",
     label: "Actions",
     render: (row) => <button>Edit {row.name}</button>,
@@ -116,7 +113,9 @@ describe("DataTable", () => {
       </DataTableContext.Provider>,
     );
 
-    expect(screen.getByText("Loading...")).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-datatable-state="loading"]'),
+    ).toBeInTheDocument();
   });
 
   it("shows error state", () => {
@@ -130,7 +129,9 @@ describe("DataTable", () => {
       </DataTableContext.Provider>,
     );
 
-    expect(screen.getByText("Error: Something went wrong")).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-datatable-state="error"]'),
+    ).toBeInTheDocument();
   });
 
   it("shows empty state", () => {
@@ -143,7 +144,9 @@ describe("DataTable", () => {
       </DataTableContext.Provider>,
     );
 
-    expect(screen.getByText("No data")).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-datatable-state="empty"]'),
+    ).toBeInTheDocument();
   });
 
   it("renders sort indicator on sorted column", () => {
@@ -183,16 +186,14 @@ describe("DataTable", () => {
   describe("header sort click", () => {
     const sortableColumns: Column<TestRow>[] = [
       {
-        kind: "field",
-        dataKey: "name",
         label: "Name",
-        sort: { type: "string" },
+        render: (row) => row.name,
+        sort: { field: "name", type: "string" },
       },
       {
-        kind: "field",
-        dataKey: "status",
         label: "Status",
-        sort: { type: "string" },
+        render: (row) => row.status,
+        sort: { field: "status", type: "string" },
       },
     ];
 
@@ -266,12 +267,11 @@ describe("DataTable", () => {
       const onSort = vi.fn();
       const mixedColumns: Column<TestRow>[] = [
         {
-          kind: "field",
-          dataKey: "name",
           label: "Name",
-          sort: { type: "string" },
+          render: (row) => row.name,
+          sort: { field: "name", type: "string" },
         },
-        { kind: "field", dataKey: "status", label: "Status" },
+        { label: "Status", render: (row) => row.status },
       ];
       render(
         <DataTableContext.Provider

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

@@ -1,5 +1,4 @@
 import {
-  createElement,
   useContext,
   useCallback,
   useEffect,
@@ -11,7 +10,7 @@ import {
 import { cn } from "../lib/utils";
 import { CollectionProvider } from "../collection/collection-provider";
 import { Table } from "../table";
-import type { Column, RowAction, UseDataTableReturn } from "../types";
+import type { RowAction, SortConfig, UseDataTableReturn } from "../types";
 import {
   DataTableContext,
   type DataTableContextValue,
@@ -138,19 +137,19 @@ function DataTableHeaders({ className }: { className?: string }) {
   return (
     <Table.Headers className={className}>
       <Table.HeaderRow>
-        {columns?.map((col) => {
-          const key = col.kind === "field" ? col.dataKey : col.id;
-          const label =
-            col.label ?? (col.kind === "field" ? col.dataKey : col.id);
+        {columns?.map((col, colIndex) => {
+          const key = col.id ?? col.label ?? String(colIndex);
+          const label = col.label;
 
-          // Only field columns with sort config can be sorted
-          const isSortable = col.kind === "field" && !!col.sort;
-          const currentSort = sortStates?.find(
-            (s) => col.kind === "field" && s.field === col.dataKey,
-          );
+          const isSortable = !!col.sort;
+          const currentSort = col.sort
+            ? sortStates?.find(
+                (s) => s.field === (col.sort as SortConfig).field,
+              )
+            : undefined;
 
           const handleClick = () => {
-            if (!isSortable || !onSort || col.kind !== "field") return;
+            if (!isSortable || !onSort || !col.sort) return;
             // Cycle: none → Asc → Desc → none
             const nextDirection =
               currentSort?.direction === "Asc"
@@ -158,7 +157,7 @@ function DataTableHeaders({ className }: { className?: string }) {
                 : currentSort?.direction === "Desc"
                   ? undefined
                   : "Asc";
-            onSort(col.dataKey, nextDirection);
+            onSort(col.sort.field, nextDirection);
           };
 
           return (
@@ -228,14 +227,19 @@ function DataTableBody({
       {loading && (!rows || rows.length === 0) && (
         <Table.Row>
           <Table.Cell colSpan={totalColSpan} className="h-24 text-center">
-            <span className="text-muted-foreground">{labels.loading}</span>
+            <span
+              className="text-muted-foreground"
+              data-datatable-state="loading"
+            >
+              {labels.loading}
+            </span>
           </Table.Cell>
         </Table.Row>
       )}
       {error && (
         <Table.Row>
           <Table.Cell colSpan={totalColSpan} className="h-24 text-center">
-            <span className="text-destructive">
+            <span className="text-destructive" data-datatable-state="error">
               {labels.errorPrefix} {error.message}
             </span>
           </Table.Cell>
@@ -244,7 +248,12 @@ function DataTableBody({
       {!loading && !error && (!rows || rows.length === 0) && (
         <Table.Row>
           <Table.Cell colSpan={totalColSpan} className="h-24 text-center">
-            <span className="text-muted-foreground">{labels.noData}</span>
+            <span
+              className="text-muted-foreground"
+              data-datatable-state="empty"
+            >
+              {labels.noData}
+            </span>
           </Table.Cell>
         </Table.Row>
       )}
@@ -254,14 +263,14 @@ function DataTableBody({
           className={cn(onClickRow && "cursor-pointer")}
           onClick={onClickRow ? () => onClickRow(row) : undefined}
         >
-          {columns?.map((col) => {
-            const key = col.kind === "field" ? col.dataKey : col.id;
+          {columns?.map((col, colIndex) => {
+            const key = col.id ?? col.label ?? String(colIndex);
             return (
               <Table.Cell
                 key={key}
                 style={col.width ? { width: col.width } : undefined}
               >
-                {resolveContent(row, col, rowIndex)}
+                {col.render(row)}
               </Table.Cell>
             );
           })}
@@ -311,43 +320,6 @@ function DataTableCell(props: ComponentProps<"td">) {
 // Helpers
 // =============================================================================
 
-/**
- * Resolve cell content from row data and column definition.
- */
-function resolveContent<TRow extends Record<string, unknown>>(
-  row: TRow,
-  column: Column<TRow>,
-  rowIndex: number,
-): ReactNode {
-  switch (column.kind) {
-    case "field": {
-      const value = row[column.dataKey];
-      if (column.renderer) {
-        return createElement(column.renderer, {
-          value,
-          row,
-          rowIndex,
-          column,
-        });
-      }
-      return formatValue(value);
-    }
-    case "display":
-      return column.render(row);
-  }
-}
-
-/**
- * Default value formatter for cell display.
- */
-function formatValue(value: unknown): ReactNode {
-  if (value == null) return "";
-  if (typeof value === "boolean") return value ? "✓" : "✗";
-  if (value instanceof Date) return value.toLocaleDateString();
-  if (typeof value === "object") return JSON.stringify(value);
-  return String(value);
-}
-
 // =============================================================================
 // RowActionsMenu
 // =============================================================================

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

@@ -11,8 +11,8 @@ import { Pagination } from "./pagination";
 type TestRow = { id: string; name: string; status: string };
 
 const testColumns: Column<TestRow>[] = [
-  { kind: "field", dataKey: "name", label: "Name" },
-  { kind: "field", dataKey: "status", label: "Status" },
+  { label: "Name", render: (row) => row.name },
+  { label: "Status", render: (row) => row.status },
 ];
 
 const testRows: TestRow[] = [

package/src/component/data-table/search-filter-form.test.tsx

@@ -13,17 +13,16 @@ type TestRow = { id: string; name: string; status: string; priority: number };
 
 const testColumns: Column<TestRow>[] = [
   {
-    kind: "field",
-    dataKey: "name",
     label: "Name",
-    sort: { type: "string" },
-    filter: { type: "string" },
+    render: (row) => row.name,
+    sort: { field: "name", type: "string" },
+    filter: { field: "name", type: "string" },
   },
   {
-    kind: "field",
-    dataKey: "status",
     label: "Status",
+    render: (row) => row.status,
     filter: {
+      field: "status",
       type: "enum",
       options: [
         { value: "active", label: "Active" },
@@ -32,14 +31,12 @@ const testColumns: Column<TestRow>[] = [
     },
   },
   {
-    kind: "field",
-    dataKey: "priority",
     label: "Priority",
-    sort: { type: "number" },
-    filter: { type: "number" },
+    render: (row) => String(row.priority),
+    sort: { field: "priority", type: "number" },
+    filter: { field: "priority", type: "number" },
   },
   {
-    kind: "display",
     id: "actions",
     label: "Actions",
     render: (row) => <button>Edit {row.name}</button>,
@@ -168,7 +165,7 @@ describe("SearchFilterForm", () => {
 
   it("shows 'No filterable fields' when no columns have filter config", () => {
     const columnsWithoutFilter: Column<TestRow>[] = [
-      { kind: "field", dataKey: "name", label: "Name" },
+      { label: "Name", render: (row) => row.name },
     ];
     render(
       <TestProviders dataTable={{ columns: columnsWithoutFilter }}>

package/src/component/data-table/search-filter-form.tsx

@@ -48,14 +48,11 @@ export function SearchFilterForm({
   const { filters, addFilter, removeFilter, clearFilters } =
     useCollectionContext();
   const sf = getLabels(locale).searchFilter;
-  const filterableColumns = columns.filter(
-    (col) => col.kind === "field" && col.filter,
-  );
+  const filterableColumns = columns.filter((col) => !!col.filter);
 
   // Exclude already-filtered fields
   const availableColumns = filterableColumns.filter(
-    (col) =>
-      col.kind === "field" && !filters.some((f) => f.field === col.dataKey),
+    (col) => col.filter && !filters.some((f) => f.field === col.filter!.field),
   );
 
   const [selectedField, setSelectedField] = useState("");
@@ -67,10 +64,9 @@ export function SearchFilterForm({
 
   // Resolve the selected column and its filter config
   const selectedColumn = filterableColumns.find(
-    (col) => col.kind === "field" && col.dataKey === selectedField,
+    (col) => col.filter?.field === selectedField,
   );
-  const selectedFilterConfig =
-    selectedColumn?.kind === "field" ? selectedColumn.filter : undefined;
+  const selectedFilterConfig = selectedColumn?.filter;
   const availableOperators = selectedFilterConfig
     ? OPERATORS_BY_FILTER_TYPE[selectedFilterConfig.type]
     : ["eq" as const];
@@ -93,9 +89,7 @@ export function SearchFilterForm({
 
   const getFieldLabel = useCallback(
     (fieldKey: string): string => {
-      const col = filterableColumns.find(
-        (c) => c.kind === "field" && c.dataKey === fieldKey,
-      );
+      const col = filterableColumns.find((c) => c.filter?.field === fieldKey);
       return col?.label ?? fieldKey;
     },
     [filterableColumns],
@@ -324,10 +318,10 @@ export function SearchFilterForm({
                     {l("selectField", "Select field...")}
                   </option>
                   {availableColumns.map((col) => {
-                    if (col.kind !== "field") return null;
+                    if (!col.filter) return null;
                     return (
-                      <option key={col.dataKey} value={col.dataKey}>
-                        {col.label ?? col.dataKey}
+                      <option key={col.filter.field} value={col.filter.field}>
+                        {col.label}
                       </option>
                     );
                   })}