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

package/src/component/field-helpers.ts

@@ -1,181 +1,102 @@
+import type { ReactNode } from "react";
 import type { TableMetadata } from "../generator/metadata-generator";
 import type {
-  CellRenderer,
-  DisplayColumn,
-  DisplayColumnOptions,
-  FieldColumn,
-  FieldColumnOptions,
+  Column,
+  ColumnOptions,
   TableFieldName,
   FilterConfig,
   MetadataFieldOptions,
-  MetadataFieldsOptions,
   SortConfig,
 } from "./types";
 import { fieldTypeToFilterConfig, fieldTypeToSortConfig } from "./types";
 
 // =============================================================================
-// field() helper
+// column() helper
 // =============================================================================
 
 /**
- * Define a data field column.
+ * Define a column with explicit render and optional sort/filter/accessor.
  *
- * Accesses `row[dataKey]` for the cell value. Supports sort/filter when configured.
- *
- * @param dataKey - Property name on the row object.
- * @param options - Column options (label, width, sort, filter, renderer).
+ * @param options - Column options (label, render, sort, filter, accessor, width).
  *
  * @example
  * ```tsx
- * field("name", {
+ * column({
  *   label: "Name",
- *   sort: { type: "string" },
- *   filter: { type: "string" },
+ *   render: (row) => row.name,
+ *   sort: { field: "name", type: "string" },
+ *   filter: { field: "name", type: "string" },
  * })
  * ```
  */
-export function field<TRow extends Record<string, unknown>>(
-  dataKey: keyof TRow & string,
-  options?: FieldColumnOptions<TRow>,
-): FieldColumn<TRow> {
+export function column<TRow extends Record<string, unknown>>(
+  options: ColumnOptions<TRow>,
+): Column<TRow> {
   return {
-    kind: "field",
-    dataKey,
-    label: options?.label,
-    width: options?.width,
-    sort: options?.sort,
-    filter: options?.filter,
-    renderer: options?.renderer,
+    label: options.label,
+    render: options.render,
+    id: options.id,
+    width: options.width,
+    accessor: options.accessor,
+    sort: options.sort,
+    filter: options.filter,
   };
 }
 
 // =============================================================================
-// display() helper
+// inferColumns() — metadata-driven column defaults
 // =============================================================================
 
 /**
- * Define a display-only column (not backed by a data field).
- *
- * Sort and filter are always disabled for display columns.
- *
- * @param id - Unique column identifier.
- * @param options - Column options (label, width, render function).
- *
- * @example
- * ```tsx
- * display("actions", {
- *   width: 50,
- *   render: (row) => <ActionMenu row={row} />,
- * })
- * ```
+ * Default value formatter for cell display.
  */
-export function display<TRow extends Record<string, unknown>>(
-  id: string,
-  options: DisplayColumnOptions<TRow>,
-): DisplayColumn<TRow> {
-  return {
-    kind: "display",
-    id,
-    label: options.label,
-    width: options.width,
-    render: options.render,
-  };
+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);
 }
 
-// =============================================================================
-// createColumnHelper() factory
-// =============================================================================
-
 /**
- * Create `field`, `display`, and `inferColumns` helpers with TRow bound once.
- *
- * This avoids repeating the row type parameter on every helper call.
- * Use `inferColumns(tableMetadata)` to create metadata-inferred columns
- * without specifying TRow again.
+ * Return a function that produces `ColumnOptions` from metadata field names.
  *
  * @example
  * ```tsx
- * type Order = { id: string; title: string; amount: number };
- *
- * const { field, display, inferColumns } = createColumnHelper<Order>();
- *
- * // Manual columns
- * const manualColumns = [
- *   field("title", { label: "Title", sort: { type: "string" } }),
- *   display("actions", { render: (row) => <ActionMenu row={row} /> }),
+ * const infer = inferColumns<OrderRow>(tableMetadata.order);
+ * const columns = [
+ *   column(infer("title")),
+ *   column({ ...infer("status"), render: (row) => <StatusBadge value={row.status} /> }),
  * ];
- *
- * // 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>>(): {
-  field: (
-    dataKey: keyof TRow & string,
-    options?: FieldColumnOptions<TRow>,
-  ) => FieldColumn<TRow>;
-  display: (
-    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),
-  };
-}
-
-// =============================================================================
-// Internal: metadata-based column inference (used by createColumnHelper)
-// =============================================================================
-
-function inferColumnHelper<
+export function inferColumns<
   TRow extends Record<string, unknown>,
   const TTable extends TableMetadata = TableMetadata,
 >(
   tableMetadata: TTable,
-): {
-  column: (
-    dataKey: TableFieldName<TTable>,
-    options?: MetadataFieldOptions<TRow>,
-  ) => FieldColumn<TRow>;
-
-  columns: (
-    dataKeys: TableFieldName<TTable>[],
-    options?: MetadataFieldsOptions,
-  ) => FieldColumn<TRow>[];
-} {
+): (
+  dataKey: TableFieldName<TTable>,
+  options?: MetadataFieldOptions,
+) => ColumnOptions<TRow> {
   const fields = tableMetadata.fields;
 
-  const column = (
+  return (
     dataKey: TableFieldName<TTable>,
-    columnOptions?: MetadataFieldOptions<TRow>,
-  ): FieldColumn<TRow> => {
-    const fieldMeta = fields.find((f) => f.name === dataKey);
+    columnOptions?: MetadataFieldOptions,
+  ): ColumnOptions<TRow> => {
+    const fieldName = dataKey as string;
+    const fieldMeta = fields.find((f) => f.name === fieldName);
     if (!fieldMeta) {
       throw new Error(
-        `Field "${String(dataKey)}" not found in table "${tableMetadata.name}" metadata`,
+        `Field "${fieldName}" not found in table "${tableMetadata.name}" metadata`,
       );
     }
 
     // Auto-detect sort config
     let sort: SortConfig | undefined;
     if (columnOptions?.sort !== false) {
-      sort = fieldTypeToSortConfig(fieldMeta.type);
+      sort = fieldTypeToSortConfig(fieldName, fieldMeta.type);
     }
     if (columnOptions?.sort === false) {
       sort = undefined;
@@ -184,37 +105,65 @@ function inferColumnHelper<
     // Auto-detect filter config
     let filter: FilterConfig | undefined;
     if (columnOptions?.filter !== false) {
-      filter = fieldTypeToFilterConfig(fieldMeta.type, fieldMeta.enumValues);
+      filter = fieldTypeToFilterConfig(
+        fieldName,
+        fieldMeta.type,
+        fieldMeta.enumValues,
+      );
     }
     if (columnOptions?.filter === false) {
       filter = undefined;
     }
 
+    const label =
+      columnOptions?.label ?? fieldMeta.description ?? fieldMeta.name;
+
     return {
-      kind: "field",
-      dataKey: fieldMeta.name,
-      label: columnOptions?.label ?? fieldMeta.description ?? fieldMeta.name,
+      label,
+      render: ((row: Record<string, unknown>) =>
+        formatValue(row[fieldName])) as (row: TRow) => ReactNode,
+      accessor: ((row: Record<string, unknown>) => row[fieldName]) as (
+        row: TRow,
+      ) => unknown,
       width: columnOptions?.width,
       sort,
       filter,
-      renderer: columnOptions?.renderer as CellRenderer<TRow> | undefined,
     };
   };
+}
 
-  const columnsHelper = (
-    dataKeys: TableFieldName<TTable>[],
-    options?: MetadataFieldsOptions,
-  ): FieldColumn<TRow>[] => {
-    return dataKeys.map((dataKey) => {
-      const overrides = options?.overrides?.[dataKey as string];
-      return column(dataKey, {
-        label: overrides?.label,
-        width: overrides?.width,
-        sort: overrides?.sort ?? options?.sort,
-        filter: overrides?.filter ?? options?.filter,
-      });
-    });
-  };
+// =============================================================================
+// createColumnHelper() — factory with TRow bound once
+// =============================================================================
 
-  return { column, columns: columnsHelper };
+/**
+ * Factory that captures the row type once and returns `column` and `inferColumns`
+ * with `TRow` already bound, avoiding repeated type annotations.
+ *
+ * @example
+ * ```tsx
+ * const { column, inferColumns } = createColumnHelper<Order>();
+ *
+ * const infer = inferColumns(tableMetadata.order);
+ * const columns = [
+ *   column(infer("title")),
+ *   column({ label: "Actions", render: (row) => <button>Edit {row.name}</button> }),
+ * ];
+ * ```
+ */
+export function createColumnHelper<TRow extends Record<string, unknown>>(): {
+  column: (options: ColumnOptions<TRow>) => Column<TRow>;
+  inferColumns: <const TTable extends TableMetadata = TableMetadata>(
+    tableMetadata: TTable,
+  ) => (
+    dataKey: TableFieldName<TTable>,
+    options?: MetadataFieldOptions,
+  ) => ColumnOptions<TRow>;
+} {
+  return {
+    column: (options: ColumnOptions<TRow>) => column<TRow>(options),
+    inferColumns: <const TTable extends TableMetadata = TableMetadata>(
+      tableMetadata: TTable,
+    ) => inferColumns<TRow, TTable>(tableMetadata),
+  };
 }

package/src/component/index.ts

@@ -10,12 +10,7 @@ export type {
   QueryVariables,
   CollectionResult,
   NodeType,
-  CellRendererProps,
-  CellRenderer,
-  FieldColumnOptions,
-  DisplayColumnOptions,
-  FieldColumn,
-  DisplayColumn,
+  ColumnOptions,
   Column,
   ColumnDefinition,
   UseCollectionOptions,

package/src/component/types.ts

@@ -12,12 +12,13 @@ import type {
 /**
  * Sort configuration for a column.
  * The `type` determines how values are compared when sorting.
+ * The `field` identifies the backend field name used for ordering.
  */
 export type SortConfig =
-  | { type: "string" }
-  | { type: "number" }
-  | { type: "date" }
-  | { type: "boolean" };
+  | { field: string; type: "string" }
+  | { field: string; type: "number" }
+  | { field: string; type: "date" }
+  | { field: string; type: "boolean" };
 
 /**
  * Select option for enum/dropdown filters.
@@ -30,14 +31,15 @@ export interface SelectOption {
 /**
  * Filter configuration for a column.
  * The `type` determines which operators are available.
+ * The `field` identifies the backend field name used for filtering.
  */
 export type FilterConfig =
-  | { type: "string" }
-  | { type: "number" }
-  | { type: "date" }
-  | { type: "enum"; options: SelectOption[] }
-  | { type: "boolean" }
-  | { type: "uuid" };
+  | { field: string; type: "string" }
+  | { field: string; type: "number" }
+  | { field: string; type: "date" }
+  | { field: string; type: "enum"; options: SelectOption[] }
+  | { field: string; type: "boolean" }
+  | { field: string; type: "uuid" };
 
 // =============================================================================
 // Filter Operators (Single Source of Truth)
@@ -265,114 +267,57 @@ export interface CollectionResult<T> {
  * type OrdersData = ResultOf<typeof GET_ORDERS>;
  * type Order = NodeType<OrdersData["orders"]>;
  *
- * const { field, display } = createColumnHelper<Order>();
+ * const { column } = createColumnHelper<Order>();
  * ```
  */
 export type NodeType<
   T extends { edges: { node: unknown }[] } | null | undefined,
 > = NonNullable<T>["edges"][number]["node"];
 
-// =============================================================================
-// Cell Renderer
-// =============================================================================
-
-/**
- * Props passed to a custom cell renderer.
- */
-export interface CellRendererProps<
-  TRow extends Record<string, unknown>,
-  TKey extends keyof TRow = never,
-> {
-  /** The value of the cell */
-  value: [TKey] extends [never] ? unknown : TRow[TKey];
-  /** The entire row data */
-  row: TRow;
-  /** The row index (0-based) */
-  rowIndex: number;
-  /** The column definition */
-  column: ColumnDefinition<TRow>;
-}
-
-/**
- * Custom cell renderer component.
- */
-export type CellRenderer<TRow extends Record<string, unknown>> = (
-  props: CellRendererProps<TRow>,
-) => ReactNode;
-
 // =============================================================================
 // Column Definitions
 // =============================================================================
 
 /**
- * Options for a data field column (used with `field()` helper).
+ * Options for defining a column (used with `column()` helper).
  */
-export interface FieldColumnOptions<TRow extends Record<string, unknown>> {
-  /** Column header label */
+export interface ColumnOptions<TRow extends Record<string, unknown>> {
+  /** Column header label (displayed in table header, column selector, filter form) */
   label?: string;
+  /** Render function for cell content (required) */
+  render: (row: TRow) => ReactNode;
+  /** Optional column identifier for visibility management (defaults to label) */
+  id?: string;
   /** Column width in pixels */
   width?: number;
+  /** Data accessor for CSV export and non-rendering data extraction */
+  accessor?: (row: TRow) => unknown;
   /** Sort configuration. When specified, sorting is enabled for this column. */
   sort?: SortConfig;
   /** Filter configuration. When specified, filtering is enabled for this column. */
   filter?: FilterConfig;
-  /** Custom cell renderer */
-  renderer?: CellRenderer<TRow>;
 }
 
 /**
- * Options for a display-only column (used with `display()` helper).
+ * A column definition (produced by `column()` helper).
  */
-export interface DisplayColumnOptions<TRow extends Record<string, unknown>> {
+export interface Column<TRow extends Record<string, unknown>> {
   /** Column header label */
   label?: string;
-  /** Column width in pixels */
-  width?: number;
-  /** Render function for the cell content */
+  /** Render function for cell content */
   render: (row: TRow) => ReactNode;
-}
-
-/**
- * A data field column definition (produced by `field()` helper).
- */
-export interface FieldColumn<TRow extends Record<string, unknown>> {
-  kind: "field";
-  /** Data key corresponding to a property on the row object */
-  dataKey: string;
-  /** Column header label */
-  label?: string;
+  /** Optional column identifier for visibility management */
+  id?: string;
   /** Column width in pixels */
   width?: number;
+  /** Data accessor for CSV export and non-rendering data extraction */
+  accessor?: (row: TRow) => unknown;
   /** Sort configuration */
   sort?: SortConfig;
   /** Filter configuration */
   filter?: FilterConfig;
-  /** Custom cell renderer */
-  renderer?: CellRenderer<TRow>;
-}
-
-/**
- * A display-only column definition (produced by `display()` helper).
- */
-export interface DisplayColumn<TRow extends Record<string, unknown>> {
-  kind: "display";
-  /** Column identifier */
-  id: string;
-  /** Column header label */
-  label?: string;
-  /** Column width in pixels */
-  width?: number;
-  /** Render function for the cell content */
-  render: (row: TRow) => ReactNode;
 }
 
-/**
- * Union of all column types.
- */
-export type Column<TRow extends Record<string, unknown>> =
-  | FieldColumn<TRow>
-  | DisplayColumn<TRow>;
-
 /**
  * Column definition used by `useDataTable` (same as `Column`).
  */
@@ -960,19 +905,13 @@ export type MatchingTableName<
 }[string & keyof TMetadata];
 
 /**
- * Options for metadata-based single field definition.
- *
- * @typeParam TRow - The row type for type-safe renderer access.
+ * Options for metadata-based single field inference.
  */
-export interface MetadataFieldOptions<
-  TRow extends Record<string, unknown> = Record<string, unknown>,
-> {
+export interface MetadataFieldOptions {
   /** Label override (defaults to metadata description or field name) */
   label?: string;
   /** Column width */
   width?: number;
-  /** Custom cell renderer with typed row data */
-  renderer?: CellRenderer<TRow>;
   /** Enable/disable sort (default: auto-detected from type) */
   sort?: boolean;
   /** Enable/disable filter (default: auto-detected from type) */
@@ -1143,20 +1082,23 @@ export interface PaginationProps {
  * Map metadata field type to SortConfig.
  * Returns undefined for types that don't support sorting.
  */
-export function fieldTypeToSortConfig(type: FieldType): SortConfig | undefined {
+export function fieldTypeToSortConfig(
+  field: string,
+  type: FieldType,
+): SortConfig | undefined {
   switch (type) {
     case "string":
-      return { type: "string" };
+      return { field, type: "string" };
     case "number":
-      return { type: "number" };
+      return { field, type: "number" };
     case "boolean":
-      return { type: "boolean" };
+      return { field, type: "boolean" };
     case "datetime":
     case "date":
     case "time":
-      return { type: "date" };
+      return { field, type: "date" };
     case "enum":
-      return { type: "string" };
+      return { field, type: "string" };
     default:
       return undefined;
   }
@@ -1167,24 +1109,26 @@ export function fieldTypeToSortConfig(type: FieldType): SortConfig | undefined {
  * Returns undefined for types that don't support filtering.
  */
 export function fieldTypeToFilterConfig(
+  field: string,
   type: FieldType,
   enumValues?: readonly string[],
 ): FilterConfig | undefined {
   switch (type) {
     case "string":
-      return { type: "string" };
+      return { field, type: "string" };
     case "number":
-      return { type: "number" };
+      return { field, type: "number" };
     case "boolean":
-      return { type: "boolean" };
+      return { field, type: "boolean" };
     case "uuid":
-      return { type: "uuid" };
+      return { field, type: "uuid" };
     case "datetime":
     case "date":
     case "time":
-      return { type: "date" };
+      return { field, type: "date" };
     case "enum":
       return {
+        field,
         type: "enum",
         options: (enumValues ?? []).map((v) => ({ value: v, label: v })),
       };