feat: add new node Input type for data in table format

src/backend/base/langflow/custom/utils.py

@@ -421,7 +421,7 @@ def build_custom_component_template(
         raise HTTPException(
             status_code=400,
             detail={
-                "error": (f"Something went wrong while building the custom component. Hints: {str(exc)}"),
+                "error": (f"Error building Component: {str(exc)}"),
                 "traceback": traceback.format_exc(),
             },
         ) from exc

src/backend/base/langflow/graph/vertex/base.py

@@ -7,6 +7,7 @@
 from enum import Enum
 from typing import TYPE_CHECKING, Any, AsyncIterator, Callable, Dict, Iterator, List, Mapping, Optional, Set
 
+import pandas as pd
 from loguru import logger
 
 from langflow.exceptions.component import ComponentBuildException
@@ -373,6 +374,13 @@ def _build_params(self):
                         params[field_name] = val
                     elif isinstance(val, str):
                         params[field_name] = val != ""
+                elif field.get("type") == "table" and val is not None:
+                    # check if the value is a list of dicts
+                    # if it is, create a pandas dataframe from it
+                    if isinstance(val, list) and all(isinstance(item, dict) for item in val):
+                        params[field_name] = pd.DataFrame(val)
+                    else:
+                        raise ValueError(f"Invalid value type {type(val)} for field {field_name}")
                 elif val is not None and val != "":
                     params[field_name] = val
 

src/backend/base/langflow/inputs/__init__.py

@@ -15,6 +15,7 @@
     PromptInput,
     SecretStrInput,
     StrInput,
+    TableInput,
 )
 
 __all__ = [
@@ -34,4 +35,5 @@
     "SecretStrInput",
     "StrInput",
     "MessageTextInput",
+    "TableInput",
 ]

src/backend/base/langflow/inputs/input_mixin.py

@@ -5,6 +5,7 @@
 
 from langflow.field_typing.range_spec import RangeSpec
 from langflow.inputs.validators import CoalesceBool
+from langflow.schema.table import Column, TableSchema
 
 
 class FieldTypes(str, Enum):
@@ -18,6 +19,7 @@ class FieldTypes(str, Enum):
     FILE = "file"
     PROMPT = "prompt"
     OTHER = "other"
+    TABLE = "table"
 
 
 SerializableFieldTypes = Annotated[FieldTypes, PlainSerializer(lambda v: v.value, return_type=str)]
@@ -136,3 +138,16 @@ class DropDownMixin(BaseModel):
 
 class MultilineMixin(BaseModel):
     multiline: CoalesceBool = True
+
+
+class TableMixin(BaseModel):
+    table_schema: Optional[TableSchema | list[Column]] = None
+
+    @field_validator("table_schema")
+    @classmethod
+    def validate_table_schema(cls, v):
+        if isinstance(v, list) and all(isinstance(column, Column) for column in v):
+            return TableSchema(columns=v)
+        if isinstance(v, TableSchema):
+            return v
+        raise ValueError("table_schema must be a TableSchema or a list of Columns")

src/backend/base/langflow/inputs/inputs.py

@@ -19,9 +19,29 @@
     MultilineMixin,
     RangeMixin,
     SerializableFieldTypes,
+    TableMixin,
 )
 
 
+class TableInput(BaseInputMixin, MetadataTraceMixin, TableMixin, ListableInputMixin):
+    field_type: Optional[SerializableFieldTypes] = FieldTypes.TABLE
+    is_list: bool = True
+
+    @field_validator("value")
+    @classmethod
+    def validate_value(cls, v: Any, _info):
+        # Check if value is a list of dicts
+        if not isinstance(v, list):
+            raise ValueError(f"TableInput value must be a list of dictionaries or Data. Value '{v}' is not a list.")
+
+        for item in v:
+            if not isinstance(item, (dict, Data)):
+                raise ValueError(
+                    f"TableInput value must be a list of dictionaries or Data. Item '{item}' is not a dictionary or Data."
+                )
+        return v
+
+
 class HandleInput(BaseInputMixin, ListableInputMixin, MetadataTraceMixin):
     """
     Represents an Input that has a Handle to a specific type (e.g. BaseLanguageModel, BaseRetriever, etc.)
@@ -338,4 +358,5 @@ class FileInput(BaseInputMixin, ListableInputMixin, FileMixin, MetadataTraceMixi
     StrInput,
     MessageTextInput,
     MessageInput,
+    TableInput,
 ]

src/backend/base/langflow/io/__init__.py

@@ -15,6 +15,7 @@
     PromptInput,
     SecretStrInput,
     StrInput,
+    TableInput,
 )
 from langflow.template import Output
 
@@ -36,4 +37,5 @@
     "StrInput",
     "MessageTextInput",
     "Output",
+    "TableInput",
 ]

src/backend/base/langflow/schema/table.py

@@ -0,0 +1,31 @@
+from enum import Enum
+from typing import List, Optional
+
+from pydantic import BaseModel, Field, field_validator
+
+
+class FormatterType(str, Enum):
+    date = "date"
+    text = "text"
+    number = "number"
+    json = "json"
+
+
+class Column(BaseModel):
+    display_name: str
+    name: str
+    sortable: bool = Field(default=True)
+    filterable: bool = Field(default=True)
+    formatter: Optional[FormatterType | str] = None
+
+    @field_validator("formatter")
+    def validate_formatter(cls, value):
+        if isinstance(value, str):
+            return FormatterType(value)
+        if isinstance(value, FormatterType):
+            return value
+        raise ValueError("Invalid formatter type")
+
+
+class TableSchema(BaseModel):
+    columns: List[Column]

src/backend/base/langflow/utils/validate.py

@@ -4,6 +4,8 @@
 from types import FunctionType
 from typing import Dict, List, Optional, Union
 
+from pydantic import ValidationError
+
 from langflow.field_typing.constants import CUSTOM_COMPONENT_SUPPORTED_TYPES
 
 
@@ -168,8 +170,12 @@ def create_class(code, class_name):
 
     class_code = extract_class_code(module, class_name)
     compiled_class = compile_class_code(class_code)
-
-    return build_class_constructor(compiled_class, exec_globals, class_name)
+    try:
+        return build_class_constructor(compiled_class, exec_globals, class_name)
+    except ValidationError as e:
+        messages = [error["msg"].split(",", 1) for error in e.errors()]
+        error_message = "\n".join([message[1] if len(message) > 1 else message[0] for message in messages])
+        raise ValueError(error_message) from e
 
 
 def create_type_ignore_class():

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -1,3 +1,4 @@
+import TableNodeComponent from "@/components/TableNodeComponent";
 import { cloneDeep } from "lodash";
 import { ReactNode, useEffect, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -524,6 +525,17 @@ export default function ParameterComponent({
             />
           </div>
         </Case>
+        <Case condition={left === true && type === "table"}>
+          <div className="mt-2 w-full">
+            <TableNodeComponent
+              description={info || "Add or edit data"}
+              columns={data.node?.template[name]?.table_schema?.columns}
+              onChange={handleOnNewValue}
+              tableTitle={data.node?.template[name]?.display_name ?? "Table"}
+              value={data.node?.template[name]?.value}
+            />
+          </div>
+        </Case>
 
         <Case
           condition={

src/frontend/src/components/TableNodeComponent/index.tsx

@@ -0,0 +1,149 @@
+import TableModal from "@/modals/tableModal";
+import { FormatColumns, generateBackendColumnsFromValue } from "@/utils/utils";
+import { DataTypeDefinition, SelectionChangedEvent } from "ag-grid-community";
+import { AgGridReact } from "ag-grid-react";
+import { cloneDeep } from "lodash";
+import { useMemo, useRef, useState } from "react";
+import { ForwardedIconComponent } from "../../components/genericIconComponent";
+import { TableComponentType } from "../../types/components";
+import { Button } from "../ui/button";
+
+export default function TableNodeComponent({
+  tableTitle,
+  description,
+  value,
+  onChange,
+  editNode = false,
+  id = "",
+  columns,
+}: TableComponentType): JSX.Element {
+  const dataTypeDefinitions: {
+    [cellDataType: string]: DataTypeDefinition<any>;
+  } = useMemo(() => {
+    return {
+      // override `date` to handle custom date format `dd/mm/yyyy`
+      date: {
+        baseDataType: "date",
+        extendsDataType: "date",
+        valueParser: (params) => {
+          if (params.newValue == null) {
+            return null;
+          }
+          // convert from `dd/mm/yyyy`
+          const dateParts = params.newValue.split("/");
+          return dateParts.length === 3
+            ? new Date(
+                parseInt(dateParts[2]),
+                parseInt(dateParts[1]) - 1,
+                parseInt(dateParts[0]),
+              )
+            : null;
+        },
+        valueFormatter: (params) => {
+          let date = params.value;
+          if (typeof params.value === "string") {
+            date = new Date(params.value);
+          }
+          // convert to `dd/mm/yyyy`
+          return date == null
+            ? "‎"
+            : `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
+        },
+      },
+      number: {
+        baseDataType: "number",
+        extendsDataType: "number",
+        valueFormatter: (params) =>
+          params.value == null ? "‎" : `${params.value}`,
+      },
+    };
+  }, []);
+  const [selectedNodes, setSelectedNodes] = useState<Array<any>>([]);
+  const agGrid = useRef<AgGridReact>(null);
+  const componentColumns = columns
+    ? columns
+    : generateBackendColumnsFromValue(value ?? []);
+  const AgColumns = FormatColumns(componentColumns);
+  function setAllRows() {
+    if (agGrid.current && !agGrid.current.api.isDestroyed()) {
+      const rows: any = [];
+      agGrid.current.api.forEachNode((node) => rows.push(node.data));
+      onChange(rows);
+    }
+  }
+  function deleteRow() {
+    if (agGrid.current && selectedNodes.length > 0) {
+      agGrid.current.api.applyTransaction({
+        remove: selectedNodes.map((node) => node.data),
+      });
+      setSelectedNodes([]);
+      setAllRows();
+    }
+  }
+  function duplicateRow() {
+    if (agGrid.current && selectedNodes.length > 0) {
+      const toDuplicate = selectedNodes.map((node) => cloneDeep(node.data));
+      setSelectedNodes([]);
+      const rows: any = [];
+      onChange([...value, ...toDuplicate]);
+    }
+  }
+  function addRow() {
+    const newRow = {};
+    componentColumns.forEach((column) => {
+      newRow[column.name] = null;
+    });
+    onChange([...value, newRow]);
+  }
+
+  function updateComponent() {
+    setAllRows();
+  }
+  const editable = componentColumns.map((column) => {
+    const isCustomEdit =
+      column.formatter &&
+      (column.formatter === "text" || column.formatter === "json");
+    return {
+      field: column.name,
+      onUpdate: updateComponent,
+      editableCell: isCustomEdit ? false : true,
+    };
+  });
+
+  return (
+    <div className={"flex w-full items-center"}>
+      <div className="flex w-full items-center gap-3" data-testid={"div-" + id}>
+        <TableModal
+          dataTypeDefinitions={dataTypeDefinitions}
+          autoSizeStrategy={{ type: "fitGridWidth", defaultMinWidth: 100 }}
+          tableTitle={tableTitle}
+          description={description}
+          ref={agGrid}
+          onSelectionChanged={(event: SelectionChangedEvent) => {
+            setSelectedNodes(event.api.getSelectedNodes());
+          }}
+          rowSelection="multiple"
+          suppressRowClickSelection={true}
+          editable={editable}
+          pagination={true}
+          addRow={addRow}
+          onDelete={deleteRow}
+          onDuplicate={duplicateRow}
+          displayEmptyAlert={false}
+          className="h-full w-full"
+          columnDefs={AgColumns}
+          rowData={value}
+        >
+          <Button
+            variant="primary"
+            size={editNode ? "xs" : "default"}
+            className="w-full"
+          >
+            <ForwardedIconComponent name="Table" className="mt-px h-4 w-4" />
+            <span className="font-normal">Open Table</span>
+          </Button>
+        </TableModal>
+      </div>
+    </div>
+  );
+}

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

@@ -1,12 +1,20 @@
 import DictAreaModal from "../../modals/dictAreaModal";
 
-export default function ObjectRender({ object }: { object: any }): JSX.Element {
-  //TODO check object type
-
+export default function ObjectRender({
+  object,
+  setValue,
+}: {
+  object: any;
+  setValue?: (value: any) => void;
+}): JSX.Element {
+  let preview =
+    object === null || object === undefined ? "‎" : JSON.stringify(object);
+  if (object === null || object === undefined) {
+  }
   return (
-    <DictAreaModal value={object}>
+    <DictAreaModal onChange={setValue} value={object ?? {}}>
       <div className="flex h-full w-full items-center align-middle transition-all">
-        <div className="truncate">{JSON.stringify(object)}</div>
+        <div className="truncate">{preview}</div>
       </div>
     </DictAreaModal>
   );