@tsed/react-formio 3.0.0-rc.13 → 3.0.0-rc.15

package/src/molecules/table/components/DefaultCell.tsx

@@ -18,4 +18,4 @@ export function DefaultCell<Data = any>({ getValue, renderValue }: CellContext<D
 }
 
 registerComponent("Cell", DefaultCell);
-registerComponent("Cell.text", DefaultCell);
+registerComponent("Cell.string", DefaultCell);

package/src/molecules/table/components/DefaultDateCell.spec.tsx

@@ -0,0 +1,43 @@
+import { render, screen } from "@testing-library/react";
+
+import { DefaultDateCell } from "./DefaultDateCell";
+
+function createCellContext(value: string | undefined, format?: string) {
+  return {
+    getValue: () => value,
+    column: {
+      columnDef: {
+        meta: {
+          format
+        }
+      }
+    }
+  } as any;
+}
+
+describe("DefaultDateCell", () => {
+  it("should render an empty span when value is undefined", () => {
+    render(<DefaultDateCell {...createCellContext(undefined)} />);
+
+    expect(screen.getByText("", { selector: "span" })).toBeInTheDocument();
+    expect(screen.queryByText(/.+/)).not.toBeInTheDocument();
+  });
+
+  it("should render the formatted date with the default format", () => {
+    render(<DefaultDateCell {...createCellContext("2026-03-12T10:30:00.000Z")} />);
+
+    expect(screen.getByText("03/12/2026", { selector: "span" })).toBeInTheDocument();
+  });
+
+  it("should render the formatted date with a custom format", () => {
+    render(<DefaultDateCell {...createCellContext("2026-03-12T10:30:00.000Z", "YYYY-MM-DD HH:mm")} />);
+
+    expect(screen.getByText("2026-03-12 10:30", { selector: "span" })).toBeInTheDocument();
+  });
+
+  it("should fallback to the raw value when the date is invalid", () => {
+    render(<DefaultDateCell {...createCellContext("not-a-date")} />);
+
+    expect(screen.getByText("not-a-date", { selector: "span" })).toBeInTheDocument();
+  });
+});

package/src/molecules/table/components/DefaultDateCell.tsx

@@ -0,0 +1,23 @@
+import { CellContext } from "@tanstack/react-table";
+import moment from "moment";
+
+import { registerComponent } from "../../../registries/components";
+
+export function DefaultDateCell<Data extends object>({ getValue, column: { columnDef } }: CellContext<Data, string>) {
+  const value = getValue();
+
+  if (!value) {
+    return <span />;
+  }
+
+  const date = moment.parseZone(value, moment.ISO_8601, true);
+
+  if (!date.isValid()) {
+    return <span>{String(value)}</span>;
+  }
+
+  return <span>{date.format(columnDef.meta?.format || "L")}</span>;
+}
+
+registerComponent("Cell.date", DefaultDateCell);
+registerComponent("Cell.datetime", DefaultDateCell);

package/src/molecules/table/components/DefaultFilter.tsx

@@ -1,22 +1,21 @@
 import "../interfaces/extends";
 
-import { Header } from "@tanstack/react-table";
+import { Header, RowData } from "@tanstack/react-table";
 import type { ComponentType } from "react";
 
 import { getComponent, registerComponent } from "../../../registries/components";
 
-export interface DefaultFilterProps<Data = any> {
-  header: Header<Data, unknown>;
+export interface DefaultFilterProps<Data extends RowData = any, TValue = unknown> {
+  header: Header<Data, TValue>;
   i18n?: (f: string) => string;
 }
 
-export interface FilterProps<Data = any, Opts = Record<string, unknown>> {
-  header: Header<Data, unknown>;
+export interface FilterProps<Data extends RowData = any, Opts = Record<string, unknown>> extends DefaultFilterProps<Data> {
   options: Opts;
-  i18n?: (f: string) => string;
 }
 
-export function DefaultFilter<Data = any>({ header, i18n }: DefaultFilterProps<Data>) {
+export function DefaultFilter<Data extends RowData = any, TValue = unknown>(props: DefaultFilterProps<Data, TValue>) {
+  const { header, i18n } = props;
   const {
     filter = {
       variant: "text"
@@ -32,6 +31,10 @@ export function DefaultFilter<Data = any>({ header, i18n }: DefaultFilterProps<D
     return null;
   }
 
+  if (filter.disabled) {
+    return null;
+  }
+
   return (
     <div className='table-cell-header__filter'>
       <Filter header={header} options={filter} i18n={i18n} />

package/src/molecules/table/filters/Filters.d.ts

@@ -8,6 +8,7 @@ export interface FilterBaseOptions extends Record<string, unknown> {
 
 export interface FilterTextOptions extends FilterBaseOptions {
   variant: "text";
+  disabled?: boolean;
   disableDatalist?: boolean;
 }
 

package/src/molecules/table/interfaces/extends.ts

@@ -7,6 +7,9 @@ declare module "@tanstack/react-table" {
   //allows us to define custom properties for our columns
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface ColumnMeta<TData extends RowData, TValue> {
+    type?: "string" | "number" | "boolean" | "date" | string;
+    format?: string;
+    labels?: Record<string, string>;
     filter?: FilterOptions;
     sort?: string;
     cellProps?: TdHTMLAttributes<HTMLTableCellElement>;

package/src/molecules/table/utils/mapFormToColumns.spec.tsx

@@ -1,8 +1,10 @@
+import { DefaultCellBoolean } from "../components/DefaultBooleanCell";
 import { DefaultCell } from "../components/DefaultCell";
+import { DefaultDateCell } from "../components/DefaultDateCell";
 import { mapFormToColumns } from "./mapFormToColumns";
 
 describe("mapFormToColumns", () => {
-  it("should use DefaultCell for mapped table columns", () => {
+  it("should use DefaultCellBoolean for mapped checkbox table columns", () => {
     const form = {
       components: [
         {
@@ -14,12 +16,13 @@ describe("mapFormToColumns", () => {
       ]
     } as any;
 
-    const [column] = mapFormToColumns(form) as any[];
+    const [column] = mapFormToColumns({ form: form }) as any[];
 
     expect(column.accessorKey).toEqual("data.enabled");
     expect(column.header).toEqual("Enabled");
+    expect(column.meta.type).toEqual("boolean");
     expect(column.meta.filter.variant).toEqual("boolean");
-    expect(column.cell).toBe(DefaultCell);
+    expect(column.cell).toBe(DefaultCellBoolean);
   });
 
   it("should fallback to DefaultCell for kept columns without a cell renderer", () => {
@@ -27,9 +30,87 @@ describe("mapFormToColumns", () => {
       components: []
     } as any;
 
-    const [column] = mapFormToColumns(form, [{ accessorKey: "data.other", header: "Other" } as any]) as any[];
+    const [column] = mapFormToColumns({ form: form, columns: [{ accessorKey: "data.other", header: "Other" } as any] }) as any[];
 
     expect(column.accessorKey).toEqual("data.other");
     expect(column.cell).toBe(DefaultCell);
   });
+
+  it("should merge a kept column matched by component key", () => {
+    const form = {
+      components: [
+        {
+          type: "textfield",
+          key: "name",
+          label: "Name:",
+          tableView: true
+        }
+      ]
+    } as any;
+
+    const [column] = mapFormToColumns({
+      form: form,
+      columns: [
+        {
+          id: "name",
+          header: "Custom name",
+          meta: {
+            order: 5,
+            filter: {
+              variant: "text"
+            }
+          }
+        } as any
+      ]
+    }) as any[];
+
+    expect(column.accessorKey).toEqual("data.name");
+    expect(column.header).toEqual("Custom name");
+    expect(column.meta.order).toEqual(5);
+  });
+
+  it("should use DefaultDateCell for mapped datetime columns", () => {
+    const form = {
+      components: [
+        {
+          type: "datetime",
+          key: "createdAt",
+          label: "Created at:",
+          tableView: true
+        }
+      ]
+    } as any;
+
+    const [column] = mapFormToColumns({ form: form }) as any[];
+
+    expect(column.accessorKey).toEqual("data.createdAt");
+    expect(column.meta.type).toEqual("date");
+    expect(column.cell).toBe(DefaultDateCell);
+  });
+
+  it("should dedupe columns when a kept column matches a mapped accessor key", () => {
+    const form = {
+      components: [
+        {
+          type: "textfield",
+          key: "email",
+          label: "Email:",
+          tableView: true
+        }
+      ]
+    } as any;
+
+    const columns = mapFormToColumns({
+      form: form,
+      columns: [
+        {
+          accessorKey: "data.email",
+          header: "Email"
+        } as any
+      ]
+    }) as any[];
+
+    expect(columns).toHaveLength(1);
+    expect(columns[0].accessorKey).toEqual("data.email");
+  });
 });

package/src/molecules/table/utils/mapFormToColumns.tsx

@@ -9,18 +9,44 @@ import { getComponent } from "../../../registries/components";
 import type { DefaultCell } from "../components/DefaultCell";
 import type { FilterVariants } from "../filters/Filters.js";
 
-const MAP_TYPES: Record<string, FilterVariants> = {
+const MAP_FILTER_TYPES: Record<string, FilterVariants> = {
   number: "range",
   currency: "range",
   checkbox: "boolean"
-};
+} as const;
 
-export function mapFormToColumns<Data = any>(form: FormType, columns: ColumnDefResolved<Data, any>[] = []): ColumnDef<Data, any>[] {
+const MAP_TYPES = {
+  date: "date",
+  datetime: "date",
+  number: "number",
+  currency: "currency",
+  checkbox: "boolean"
+} as const;
+
+function getColumnIdentity<Data>(column: ColumnDef<Data, any> | ColumnDefResolved<Data, any>) {
+  if ("id" in column && typeof column.id === "string") {
+    return column.id;
+  }
+
+  if ("accessorKey" in column && typeof column.accessorKey === "string") {
+    return column.accessorKey;
+  }
+
+  return undefined;
+}
+
+export function mapFormToColumns<Data = any>({
+  form,
+  columns = [],
+  prefix = "data."
+}: {
+  form: FormType;
+  columns?: ColumnDefResolved<Data, any>[];
+  prefix?: string;
+}): ColumnDef<Data, any>[] {
   const columnHelper = createColumnHelper<Data>();
   const columnsToKeep = cloneDeep(columns);
 
-  const Cell = getComponent<typeof DefaultCell>("Cell");
-
   const columnsFromComponents = form.components
     .flatMap((component) => {
       if (component.type === "tabs") {
@@ -32,9 +58,13 @@ export function mapFormToColumns<Data = any>(form: FormType, columns: ColumnDefR
     .filter((component) => component?.tableView)
     .map((c) => {
       const component = c as ComponentType;
+      const componentColumnKey = `${prefix}${component.key}`;
+      const matchingKeys = new Set([component.key, componentColumnKey]);
+
+      const columnIndex = columnsToKeep.findIndex((column) => {
+        const identity = getColumnIdentity(column);
 
-      const columnIndex = columnsToKeep.findIndex(({ accessorKey }) => {
-        return accessorKey === `data.${component.key}`;
+        return identity ? matchingKeys.has(identity) : false;
       });
 
       let column = columnsToKeep[columnIndex];
@@ -43,25 +73,43 @@ export function mapFormToColumns<Data = any>(form: FormType, columns: ColumnDefR
         columnsToKeep.splice(columnIndex, 1);
       }
 
-      return columnHelper.accessor(`data.${component.key}` as any, {
+      return columnHelper.accessor(componentColumnKey as any, {
         header: (component.label || component.title || component.key)?.replace(/:/, ""),
-        cell: Cell,
         meta: {
-          filter: { variant: MAP_TYPES[component.type!] || "text" },
+          type: (MAP_TYPES[component.type as keyof typeof MAP_TYPES] || component.type) as any,
+          filter: {
+            ...column?.meta?.filter,
+            variant: MAP_FILTER_TYPES[component.type as keyof typeof MAP_FILTER_TYPES] || "text"
+          },
           ...(column?.meta || {})
         },
         ...(column || {})
       });
     });
 
-  const mergedColumns = columnsFromComponents.concat(columnsToKeep as any[]).map((column, index) => ({
-    ...column,
-    meta: {
-      ...(column.meta || {}),
-      order: get(column, "meta.order", index * 10)
-    },
-    cell: column.cell || Cell
-  }));
+  const dedupedColumns = [...columnsFromComponents, ...(columnsToKeep as any[])].reduce<ColumnDef<Data, any>[]>((acc, column) => {
+    const identity = getColumnIdentity(column);
+
+    if (identity && acc.some((existingColumn) => getColumnIdentity(existingColumn) === identity)) {
+      return acc;
+    }
+
+    acc.push(column);
+    return acc;
+  }, []);
+
+  const mergedColumns = dedupedColumns.map((column, index) => {
+    const Cell = getComponent<typeof DefaultCell>([`Cell.${column.id}`, `Cell.${column.meta?.type}`, "Cell"]);
+
+    return {
+      ...column,
+      meta: {
+        ...column?.meta,
+        order: get(column, "meta.order", index * 10)
+      },
+      cell: column.cell || Cell
+    };
+  });
 
   return mergedColumns.sort((a, b) => (a.meta.order > b.meta.order ? 1 : -1)) as ColumnDef<Data, any>[];
 }

package/src/organisms/table/submissions/SubmissionsTable.tsx

@@ -8,7 +8,7 @@ export type SubmissionsTableProps<Data extends object = JSONRecord> = Omit<Table
 };
 
 export function SubmissionsTable<Data extends object = JSONRecord>({ form, ...props }: SubmissionsTableProps<Data>) {
-  const columns: any[] | undefined = form && mapFormToColumns(form);
+  const columns: any[] | undefined = form && mapFormToColumns({ form: form });
 
   return <Table {...(props as any)} columns={columns!} />;
 }