feat: option to hide a column in frontend when defining a Table Input, hides Tool identifier from table display (#6222)

* added changes to hide fields from table input

* [autofix.ci] apply automated fixes

---------

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

src/backend/base/langflow/base/tools/constants.py

@@ -12,6 +12,7 @@ TOOL_TABLE_SCHEMA = [
         "sortable": False,
         "filterable": False,
         "edit_mode": EditMode.INLINE,
+        "hidden": False,
     },
     {
         "name": "description",
@@ -21,6 +22,7 @@ TOOL_TABLE_SCHEMA = [
         "sortable": False,
         "filterable": False,
         "edit_mode": EditMode.POPOVER,
+        "hidden": False,
     },
     {
         "name": "tags",
@@ -31,6 +33,7 @@ TOOL_TABLE_SCHEMA = [
         "sortable": False,
         "filterable": False,
         "edit_mode": EditMode.INLINE,
+        "hidden": True,
     },
 ]
 

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

@@ -30,6 +30,7 @@ class Column(BaseModel):
     default: str | None = None
     disable_edit: bool = Field(default=False)
     edit_mode: EditMode | None = Field(default=EditMode.MODAL)
+    hidden: bool = Field(default=False)
 
     @model_validator(mode="after")
     def set_display_name(self):

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

@@ -53,61 +53,67 @@ const TableComponent = forwardRef<
     },
     ref,
   ) => {
-    let colDef = props.columnDefs.map((col, index) => {
-      let newCol = {
-        ...col,
-      };
-      if (props.rowSelection && props.onSelectionChanged && index === 0) {
-        newCol = {
-          ...newCol,
-          checkboxSelection: true,
-          headerCheckboxSelection: true,
-          headerCheckboxSelectionFilteredOnly: true,
+    let colDef = props.columnDefs
+      .map((col, index) => {
+        let newCol = {
+          ...col,
         };
-      }
-      if (
-        (typeof props.tableOptions?.block_hide === "boolean" &&
-          props.tableOptions?.block_hide) ||
-        (Array.isArray(props.tableOptions?.block_hide) &&
-          props.tableOptions?.block_hide.includes(newCol.field ?? ""))
-      ) {
-        newCol = {
-          ...newCol,
-          lockVisible: true,
-        };
-      }
-      if (
-        (typeof props.editable === "boolean" && props.editable) ||
-        (Array.isArray(props.editable) &&
-          props.editable.every((field) => typeof field === "string") &&
-          (props.editable as Array<string>).includes(newCol.field ?? ""))
-      ) {
-        newCol = {
-          ...newCol,
-          editable: true,
-        };
-      }
-      if (
-        Array.isArray(props.editable) &&
-        props.editable.every((field) => typeof field === "object")
-      ) {
-        const field = (
-          props.editable as Array<{
-            field: string;
-            onUpdate: (value: any) => void;
-            editableCell: boolean;
-          }>
-        ).find((field) => field.field === newCol.field);
-        if (field) {
+        // Filter out hidden columns
+        if (col.hidden) {
+          return null;
+        }
+        if (props.rowSelection && props.onSelectionChanged && index === 0) {
           newCol = {
             ...newCol,
-            editable: field.editableCell,
-            onCellValueChanged: (e) => field.onUpdate(e),
+            checkboxSelection: true,
+            headerCheckboxSelection: true,
+            headerCheckboxSelectionFilteredOnly: true,
           };
         }
-      }
-      return newCol;
-    });
+        if (
+          (typeof props.tableOptions?.block_hide === "boolean" &&
+            props.tableOptions?.block_hide) ||
+          (Array.isArray(props.tableOptions?.block_hide) &&
+            props.tableOptions?.block_hide.includes(newCol.field ?? ""))
+        ) {
+          newCol = {
+            ...newCol,
+            lockVisible: true,
+          };
+        }
+        if (
+          (typeof props.editable === "boolean" && props.editable) ||
+          (Array.isArray(props.editable) &&
+            props.editable.every((field) => typeof field === "string") &&
+            (props.editable as Array<string>).includes(newCol.field ?? ""))
+        ) {
+          newCol = {
+            ...newCol,
+            editable: true,
+          };
+        }
+        if (
+          Array.isArray(props.editable) &&
+          props.editable.every((field) => typeof field === "object")
+        ) {
+          const field = (
+            props.editable as Array<{
+              field: string;
+              onUpdate: (value: any) => void;
+              editableCell: boolean;
+            }>
+          ).find((field) => field.field === newCol.field);
+          if (field) {
+            newCol = {
+              ...newCol,
+              editable: field.editableCell,
+              onCellValueChanged: (e) => field.onUpdate(e),
+            };
+          }
+        }
+        return newCol;
+      })
+      .filter(Boolean); // Filter out null values from hidden columns
     // @ts-ignore
     const realRef: React.MutableRefObject<AgGridReact> =
       useRef<AgGridReact | null>(null);

src/frontend/src/types/utils/functions.ts

@@ -26,6 +26,7 @@ export interface ColumnField {
   formatter?: FormatterType;
   description?: string;
   disable_edit?: boolean;
-  default?: any; // Add this line
+  default?: any;
   edit_mode?: "modal" | "inline" | "popover";
+  hidden?: boolean;
 }

src/frontend/src/utils/utils.ts

@@ -524,7 +524,7 @@ export function brokenEdgeMessage({
 export function FormatColumns(columns: ColumnField[]): ColDef<any>[] {
   if (!columns) return [];
   const basic_types = new Set(["date", "number"]);
-  const colDefs = columns.map((col, index) => {
+  const colDefs = columns.map((col) => {
     let newCol: ColDef = {
       headerName: col.display_name,
       field: col.name,
@@ -532,6 +532,7 @@ export function FormatColumns(columns: ColumnField[]): ColDef<any>[] {
       filter: col.filterable,
       context: col.description ? { info: col.description } : {},
       cellClass: col.disable_edit ? "cell-disable-edit" : "",
+      hide: col.hidden,
       valueParser: (params: ValueParserParams) => {
         const { context, newValue, colDef, oldValue } = params;
         if (
@@ -595,6 +596,7 @@ export function generateBackendColumnsFromValue(
       sortable: !tableOptions?.block_sort,
       filterable: !tableOptions?.block_filter,
       default: null, // Initialize default to null or appropriate value
+      hidden: false,
     };
 
     // Attempt to infer the default value from the data, if possible