fix: Add TableNodeComponent and set default formatter type (#3382)

* feat: Add TableNodeComponent for rendering table data in ParameterRenderComponent

* refactor: Set default formatter type for columns in FormatColumns function

* [autofix.ci] apply automated fixes

* refactor: Improve object rendering in ObjectRender component

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

src/frontend/src/components/objectRender/index.tsx

@@ -7,12 +7,20 @@ export default function ObjectRender({
   object: any;
   setValue?: (value: any) => void;
 }): JSX.Element {
-  let preview =
-    object === null || object === undefined ? "‎" : JSON.stringify(object);
-  if (object === null || object === undefined) {
+  let newObject = object;
+  if (typeof object === "string") {
+    try {
+      newObject = JSON.parse(object);
+    } catch (e) {
+      newObject = object;
+    }
   }
+  let preview =
+    newObject === null || newObject === undefined
+      ? "‎"
+      : JSON.stringify(newObject);
   return (
-    <DictAreaModal onChange={setValue} value={object ?? {}}>
+    <DictAreaModal onChange={setValue} value={newObject ?? {}}>
       <div className="flex h-full w-full items-center align-middle transition-all">
         <div className="truncate">{preview}</div>
       </div>

src/frontend/src/components/parameterRenderComponent/index.tsx

@@ -2,6 +2,7 @@ import { handleOnNewValueType } from "@/CustomNodes/hooks/use-handle-new-value";
 import { TEXT_FIELD_TYPES } from "@/constants/constants";
 import { APIClassType, InputFieldType } from "@/types/api";
 import { useMemo } from "react";
+import TableNodeComponent from "../TableNodeComponent";
 import CodeAreaComponent from "../codeAreaComponent";
 import DictComponent from "../dictComponent";
 import FloatComponent from "../floatComponent";
@@ -146,6 +147,14 @@ export function ParameterRenderComponent({
           />
         ) : templateData.type === "Any" ? (
           <>-</>
+        ) : templateData.type === "table" ? (
+          <TableNodeComponent
+            description={templateData.info || "Add or edit data"}
+            columns={templateData?.table_schema?.columns}
+            onChange={onChange}
+            tableTitle={templateData?.display_name ?? "Table"}
+            value={templateValue}
+          />
         ) : (
           String(templateValue)
         )}

src/frontend/src/constants/constants.ts

@@ -646,6 +646,7 @@ export const LANGFLOW_SUPPORTED_TYPES = new Set([
   "int",
   "dict",
   "NestedDict",
+  "table",
 ]);
 
 export const priorityFields = new Set(["code", "template"]);

src/frontend/src/types/api/index.ts

@@ -77,6 +77,7 @@ export type InputFieldType = {
   refresh_button?: boolean;
   refresh_button_text?: string;
   combobox?: boolean;
+  info?: string;
   [key: string]: any;
 };
 

src/frontend/src/utils/utils.ts

@@ -502,15 +502,16 @@ export function FormatColumns(columns: ColumnField[]): ColDef<any>[] {
       sortable: col.sortable,
       filter: col.filterable,
     };
-    if (col.formatter) {
-      if (basic_types.has(col.formatter)) {
-        newCol.cellDataType = col.formatter;
-      } else {
-        newCol.cellRendererParams = {
-          formatter: col.formatter,
-        };
-        newCol.cellRenderer = TableAutoCellRender;
-      }
+    if (!col.formatter) {
+      col.formatter = FormatterType.text;
+    }
+    if (basic_types.has(col.formatter)) {
+      newCol.cellDataType = col.formatter;
+    } else {
+      newCol.cellRendererParams = {
+        formatter: col.formatter,
+      };
+      newCol.cellRenderer = TableAutoCellRender;
     }
     return newCol;
   });