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

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

@@ -12,18 +12,17 @@ type TestRow = {
 
 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",
-    sort: { type: "string" },
+    render: (row) => row.status,
+    sort: { field: "status", type: "string" },
     filter: {
+      field: "status",
       type: "enum",
       options: [
         { value: "ACTIVE", label: "Active" },
@@ -32,13 +31,11 @@ const testColumns: Column<TestRow>[] = [
     },
   },
   {
-    kind: "field",
-    dataKey: "amount",
     label: "Amount",
-    sort: { type: "number" },
+    render: (row) => String(row.amount),
+    sort: { field: "amount", type: "number" },
   },
   {
-    kind: "display",
     id: "actions",
     label: "Actions",
     render: () => null,
@@ -115,7 +112,7 @@ describe("useDataTable", () => {
         useDataTable<TestRow>({ columns: testColumns, data: testData }),
       );
       expect(result.current.visibleColumns).toHaveLength(4);
-      expect(result.current.isColumnVisible("name")).toBe(true);
+      expect(result.current.isColumnVisible("Name")).toBe(true);
       expect(result.current.isColumnVisible("actions")).toBe(true);
     });
 
@@ -125,16 +122,16 @@ describe("useDataTable", () => {
       );
 
       act(() => {
-        result.current.toggleColumn("status");
+        result.current.toggleColumn("Status");
       });
       expect(result.current.visibleColumns).toHaveLength(3);
-      expect(result.current.isColumnVisible("status")).toBe(false);
+      expect(result.current.isColumnVisible("Status")).toBe(false);
 
       act(() => {
-        result.current.toggleColumn("status");
+        result.current.toggleColumn("Status");
       });
       expect(result.current.visibleColumns).toHaveLength(4);
-      expect(result.current.isColumnVisible("status")).toBe(true);
+      expect(result.current.isColumnVisible("Status")).toBe(true);
     });
 
     it("hideAllColumns hides all columns", () => {

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

@@ -93,7 +93,7 @@ export function useDataTable<TRow extends Record<string, unknown>>(
   const [hiddenColumns, setHiddenColumns] = useState<Set<string>>(new Set());
 
   const getColumnKey = useCallback((col: Column<TRow>): string => {
-    return col.kind === "field" ? col.dataKey : col.id;
+    return col.id ?? col.label ?? "";
   }, []);
 
   const visibleColumns = useMemo<Column<TRow>[]>(() => {

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, expectTypeOf } from "vitest";
-import { createColumnHelper } from "./field-helpers";
+import { column, inferColumns, createColumnHelper } from "./field-helpers";
 import type { TableMetadataMap } from "../generator/metadata-generator";
 import { fieldTypeToSortConfig, fieldTypeToFilterConfig } from "./types";
 import type { NodeType, TableFieldName } from "./types";
@@ -19,62 +19,58 @@ describe("NodeType", () => {
     type Row = NodeType<Result>;
     expectTypeOf<Row>().toEqualTypeOf<{ id: string; amount: number }>();
   });
-
-  it("works with createColumnHelper", () => {
-    type Result = { edges: { node: { id: string; title: string } }[] } | null;
-    type Row = NodeType<Result>;
-    const { field } = createColumnHelper<Row>();
-    const col = field("title");
-    expect(col.dataKey).toBe("title");
-  });
 });
 
-describe("createColumnHelper()", () => {
+describe("column()", () => {
   type TestRow = { name: string; age: number };
 
-  it("returns field and display helpers with TRow bound", () => {
-    const helpers = createColumnHelper<TestRow>();
-    expect(typeof helpers.field).toBe("function");
-    expect(typeof helpers.display).toBe("function");
-  });
-
-  it("field helper creates a field column without explicit type param", () => {
-    const { field } = createColumnHelper<TestRow>();
-    const col = field("name", {
+  it("creates a column with render and sort/filter", () => {
+    const col = column<TestRow>({
       label: "Name",
-      sort: { type: "string" },
-      filter: { type: "string" },
+      render: (row) => row.name,
+      sort: { field: "name", type: "string" },
+      filter: { field: "name", type: "string" },
     });
-    expect(col.kind).toBe("field");
-    expect(col.dataKey).toBe("name");
     expect(col.label).toBe("Name");
-    expect(col.sort).toEqual({ type: "string" });
-    expect(col.filter).toEqual({ type: "string" });
+    expect(col.sort).toEqual({ field: "name", type: "string" });
+    expect(col.filter).toEqual({ field: "name", type: "string" });
+    expect(typeof col.render).toBe("function");
   });
 
-  it("field helper creates minimal column", () => {
-    const { field } = createColumnHelper<TestRow>();
-    const col = field("age");
-    expect(col.kind).toBe("field");
-    expect(col.dataKey).toBe("age");
-    expect(col.label).toBeUndefined();
+  it("creates minimal column with label and render", () => {
+    const col = column<TestRow>({
+      label: "Age",
+      render: (row) => String(row.age),
+    });
+    expect(col.label).toBe("Age");
+    expect(col.sort).toBeUndefined();
+    expect(col.filter).toBeUndefined();
   });
 
-  it("display helper creates a display column without explicit type param", () => {
-    const { display } = createColumnHelper<TestRow>();
-    const col = display("actions", {
+  it("supports accessor and width", () => {
+    const col = column<TestRow>({
       label: "Actions",
       width: 100,
       render: (row) => `${row.name}: ${row.age}`,
+      accessor: (row) => row.name,
     });
-    expect(col.kind).toBe("display");
-    expect(col.id).toBe("actions");
     expect(col.label).toBe("Actions");
     expect(col.width).toBe(100);
     expect(typeof col.render).toBe("function");
+    expect(typeof col.accessor).toBe("function");
+  });
+
+  it("allows undefined label", () => {
+    const col = column<TestRow>({
+      render: (row) => row.name,
+    });
+    expect(col.label).toBeUndefined();
+    expect(typeof col.render).toBe("function");
   });
+});
 
-  it("inferColumns returns column/columns helpers with TRow bound", () => {
+describe("inferColumns()", () => {
+  it("returns a function that produces column options from metadata", () => {
     type TaskRow = { id: string; title: string; status: string };
     const metadata = {
       name: "task",
@@ -92,75 +88,103 @@ describe("createColumnHelper()", () => {
       ],
     } as const;
 
-    const { inferColumns, display } = createColumnHelper<TaskRow>();
-    const { column, columns } = inferColumns(metadata);
+    const infer = inferColumns<TaskRow>(metadata);
 
-    // column() works with auto-detection
-    const titleCol = column("title");
-    expect(titleCol.dataKey).toBe("title");
-    expect(titleCol.sort).toEqual({ type: "string" });
+    // infer() returns ColumnOptions that can be passed to column()
+    const titleOpts = infer("title");
+    expect(titleOpts.label).toBe("title");
+    expect(titleOpts.sort).toEqual({ field: "title", type: "string" });
+    expect(typeof titleOpts.render).toBe("function");
+    expect(typeof titleOpts.accessor).toBe("function");
 
-    // columns() works
-    const cols = columns(["title", "status"]);
-    expect(cols).toHaveLength(2);
+    // Can be used with column()
+    const titleCol = column(infer("title"));
+    expect(titleCol.label).toBe("title");
+    expect(titleCol.sort).toEqual({ field: "title", type: "string" });
 
-    // display still works alongside inferColumns
-    const actionsCol = display("actions", {
-      render: (row) => `${row.title}`,
+    // Can be spread and overridden
+    const customCol = column({
+      ...infer("status"),
+      label: "Custom Status",
     });
-    expect(actionsCol.kind).toBe("display");
+    expect(customCol.label).toBe("Custom Status");
   });
 });
 
 describe("fieldTypeToSortConfig", () => {
   it("maps string to string sort", () => {
-    expect(fieldTypeToSortConfig("string")).toEqual({ type: "string" });
+    expect(fieldTypeToSortConfig("name", "string")).toEqual({
+      field: "name",
+      type: "string",
+    });
   });
 
   it("maps number to number sort", () => {
-    expect(fieldTypeToSortConfig("number")).toEqual({ type: "number" });
+    expect(fieldTypeToSortConfig("amount", "number")).toEqual({
+      field: "amount",
+      type: "number",
+    });
   });
 
   it("maps datetime to date sort", () => {
-    expect(fieldTypeToSortConfig("datetime")).toEqual({ type: "date" });
+    expect(fieldTypeToSortConfig("createdAt", "datetime")).toEqual({
+      field: "createdAt",
+      type: "date",
+    });
   });
 
   it("maps date to date sort", () => {
-    expect(fieldTypeToSortConfig("date")).toEqual({ type: "date" });
+    expect(fieldTypeToSortConfig("dueDate", "date")).toEqual({
+      field: "dueDate",
+      type: "date",
+    });
   });
 
   it("maps enum to string sort", () => {
-    expect(fieldTypeToSortConfig("enum")).toEqual({ type: "string" });
+    expect(fieldTypeToSortConfig("status", "enum")).toEqual({
+      field: "status",
+      type: "string",
+    });
   });
 
   it("returns undefined for uuid", () => {
-    expect(fieldTypeToSortConfig("uuid")).toBeUndefined();
+    expect(fieldTypeToSortConfig("id", "uuid")).toBeUndefined();
   });
 
   it("returns undefined for array", () => {
-    expect(fieldTypeToSortConfig("array")).toBeUndefined();
+    expect(fieldTypeToSortConfig("tags", "array")).toBeUndefined();
   });
 
   it("returns undefined for nested", () => {
-    expect(fieldTypeToSortConfig("nested")).toBeUndefined();
+    expect(fieldTypeToSortConfig("meta", "nested")).toBeUndefined();
   });
 });
 
 describe("fieldTypeToFilterConfig", () => {
   it("maps string to string filter", () => {
-    expect(fieldTypeToFilterConfig("string")).toEqual({ type: "string" });
+    expect(fieldTypeToFilterConfig("name", "string")).toEqual({
+      field: "name",
+      type: "string",
+    });
   });
 
   it("maps number to number filter", () => {
-    expect(fieldTypeToFilterConfig("number")).toEqual({ type: "number" });
+    expect(fieldTypeToFilterConfig("amount", "number")).toEqual({
+      field: "amount",
+      type: "number",
+    });
   });
 
   it("maps uuid to uuid filter", () => {
-    expect(fieldTypeToFilterConfig("uuid")).toEqual({ type: "uuid" });
+    expect(fieldTypeToFilterConfig("id", "uuid")).toEqual({
+      field: "id",
+      type: "uuid",
+    });
   });
 
   it("maps enum with values to enum filter", () => {
-    expect(fieldTypeToFilterConfig("enum", ["a", "b", "c"])).toEqual({
+    expect(fieldTypeToFilterConfig("status", "enum", ["a", "b", "c"])).toEqual({
+      field: "status",
       type: "enum",
       options: [
         { value: "a", label: "a" },
@@ -171,11 +195,11 @@ describe("fieldTypeToFilterConfig", () => {
   });
 
   it("returns undefined for array", () => {
-    expect(fieldTypeToFilterConfig("array")).toBeUndefined();
+    expect(fieldTypeToFilterConfig("tags", "array")).toBeUndefined();
   });
 });
 
-describe("createColumnHelper().inferColumns()", () => {
+describe("inferColumns() with metadata", () => {
   const testMetadata = {
     task: {
       name: "task",
@@ -213,22 +237,22 @@ describe("createColumnHelper().inferColumns()", () => {
     tags: string[];
   };
 
-  it("creates a column with auto-detected sort/filter", () => {
-    const { inferColumns } = createColumnHelper<TaskRow>();
-    const { column } = inferColumns(testMetadata.task);
+  it("creates column options with auto-detected sort/filter", () => {
+    const infer = inferColumns<TaskRow>(testMetadata.task);
 
-    const titleCol = column("title");
-    expect(titleCol.kind).toBe("field");
-    expect(titleCol.dataKey).toBe("title");
-    expect(titleCol.sort).toEqual({ type: "string" });
-    expect(titleCol.filter).toEqual({ type: "string" });
+    const titleOpts = infer("title");
+    expect(titleOpts.label).toBe("title");
+    expect(titleOpts.sort).toEqual({ field: "title", type: "string" });
+    expect(titleOpts.filter).toEqual({ field: "title", type: "string" });
+    expect(typeof titleOpts.render).toBe("function");
+    expect(typeof titleOpts.accessor).toBe("function");
   });
 
   it("auto-detects enum options", () => {
-    const { inferColumns } = createColumnHelper<TaskRow>();
-    const { column } = inferColumns(testMetadata.task);
-    const statusCol = column("status");
-    expect(statusCol.filter).toEqual({
+    const infer = inferColumns<TaskRow>(testMetadata.task);
+    const statusOpts = infer("status");
+    expect(statusOpts.filter).toEqual({
+      field: "status",
       type: "enum",
       options: [
         { value: "todo", label: "todo" },
@@ -237,88 +261,68 @@ describe("createColumnHelper().inferColumns()", () => {
       ],
     });
     // enum maps to string sort
-    expect(statusCol.sort).toEqual({ type: "string" });
+    expect(statusOpts.sort).toEqual({ field: "status", type: "string" });
   });
 
   it("auto-detects date type", () => {
-    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" });
+    const infer = inferColumns<TaskRow>(testMetadata.task);
+    const dateOpts = infer("dueDate");
+    expect(dateOpts.sort).toEqual({ field: "dueDate", type: "date" });
+    expect(dateOpts.filter).toEqual({ field: "dueDate", type: "date" });
   });
 
   it("disables sort with sort: false", () => {
-    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" });
+    const infer = inferColumns<TaskRow>(testMetadata.task);
+    const opts = infer("title", { sort: false });
+    expect(opts.sort).toBeUndefined();
+    expect(opts.filter).toEqual({ field: "title", type: "string" });
   });
 
   it("disables filter with filter: false", () => {
-    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();
+    const infer = inferColumns<TaskRow>(testMetadata.task);
+    const opts = infer("title", { filter: false });
+    expect(opts.sort).toEqual({ field: "title", type: "string" });
+    expect(opts.filter).toBeUndefined();
   });
 
   it("uuid has no sort, has uuid filter", () => {
-    const { inferColumns } = createColumnHelper<TaskRow>();
-    const { column } = inferColumns(testMetadata.task);
-    const col = column("id");
-    expect(col.sort).toBeUndefined();
-    expect(col.filter).toEqual({ type: "uuid" });
+    const infer = inferColumns<TaskRow>(testMetadata.task);
+    const opts = infer("id");
+    expect(opts.sort).toBeUndefined();
+    expect(opts.filter).toEqual({ field: "id", type: "uuid" });
   });
 
   it("array type has no sort/filter", () => {
-    const { inferColumns } = createColumnHelper<TaskRow>();
-    const { column } = inferColumns(testMetadata.task);
-    const col = column("tags");
-    expect(col.sort).toBeUndefined();
-    expect(col.filter).toBeUndefined();
+    const infer = inferColumns<TaskRow>(testMetadata.task);
+    const opts = infer("tags");
+    expect(opts.sort).toBeUndefined();
+    expect(opts.filter).toBeUndefined();
   });
 
-  it("columns() creates multiple columns at once", () => {
-    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");
-    expect(cols[1].dataKey).toBe("status");
-    expect(cols[2].dataKey).toBe("dueDate");
-  });
+  it("generates default render and accessor functions", () => {
+    const infer = inferColumns<TaskRow>(testMetadata.task);
 
-  it("columns() applies overrides", () => {
-    const { inferColumns } = createColumnHelper<TaskRow>();
-    const { columns } = inferColumns(testMetadata.task);
-    const cols = columns(["title", "status"], {
-      overrides: {
-        title: { label: "Custom Title", width: 300 },
-      },
-    });
-    expect(cols[0].label).toBe("Custom Title");
-    expect(cols[0].width).toBe(300);
-  });
+    const opts = infer("title");
+    const testRow = {
+      id: "1",
+      title: "Test Task",
+      status: "todo",
+      dueDate: "2024-01-01",
+      count: 5,
+      isActive: true,
+      tags: ["a"],
+    };
 
-  it("columns() applies global sort/filter options", () => {
-    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();
-    // filter should still be auto-detected
-    expect(cols[0].filter).toEqual({ type: "string" });
+    expect(opts.render(testRow)).toBe("Test Task");
+    expect(opts.accessor!(testRow)).toBe("Test Task");
   });
 
   it("throws for non-existent field", () => {
-    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',
-    );
+    const infer = inferColumns<TaskRow>(testMetadata.task);
+    expect(() =>
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      infer("nonExistent" as any),
+    ).toThrow('Field "nonExistent" not found in table "task" metadata');
   });
 
   it("infers TableFieldName type correctly", () => {
@@ -327,4 +331,83 @@ describe("createColumnHelper().inferColumns()", () => {
       "id" | "title" | "status" | "dueDate" | "count" | "isActive" | "tags"
     >();
   });
+
+  it("spread override works with column()", () => {
+    const infer = inferColumns<TaskRow>(testMetadata.task);
+
+    const col = column({
+      ...infer("title"),
+      label: "Custom Title",
+      width: 200,
+    });
+    expect(col.label).toBe("Custom Title");
+    expect(col.width).toBe(200);
+    expect(col.sort).toEqual({ field: "title", type: "string" });
+  });
+});
+
+describe("createColumnHelper()", () => {
+  type OrderRow = { id: string; name: string; amount: number };
+
+  it("returns column and inferColumns with TRow bound", () => {
+    const helper = createColumnHelper<OrderRow>();
+    expect(typeof helper.column).toBe("function");
+    expect(typeof helper.inferColumns).toBe("function");
+  });
+
+  it("column() works without type parameter", () => {
+    const { column } = createColumnHelper<OrderRow>();
+    const col = column({
+      label: "Name",
+      render: (row) => row.name,
+      sort: { field: "name", type: "string" },
+    });
+    expect(col.label).toBe("Name");
+    expect(col.sort).toEqual({ field: "name", type: "string" });
+  });
+
+  it("inferColumns() works without type parameter", () => {
+    const metadata = {
+      name: "order",
+      pluralForm: "orders",
+      readAllowedRoles: [],
+      fields: [
+        { name: "id", type: "uuid", required: true },
+        { name: "name", type: "string", required: true },
+        { name: "amount", type: "number", required: false },
+      ],
+    } as const;
+
+    const { column, inferColumns } = createColumnHelper<OrderRow>();
+    const infer = inferColumns(metadata);
+
+    const col = column(infer("name"));
+    expect(col.label).toBe("name");
+    expect(col.sort).toEqual({ field: "name", type: "string" });
+  });
+
+  it("column + inferColumns spread override", () => {
+    const metadata = {
+      name: "order",
+      pluralForm: "orders",
+      readAllowedRoles: [],
+      fields: [
+        { name: "id", type: "uuid", required: true },
+        { name: "name", type: "string", required: true },
+        { name: "amount", type: "number", required: false },
+      ],
+    } as const;
+
+    const { column, inferColumns } = createColumnHelper<OrderRow>();
+    const infer = inferColumns(metadata);
+
+    const col = column({
+      ...infer("name"),
+      label: "Custom Name",
+      render: (row) => `Name: ${row.name}`,
+    });
+    expect(col.label).toBe("Custom Name");
+    expect(col.sort).toEqual({ field: "name", type: "string" });
+    expect(col.render({ id: "1", name: "Test", amount: 0 })).toBe("Name: Test");
+  });
 });