fix: adds table dropdown cell editor using options defined in TableInput column (#6825)

* Added options parameter to table

* Removed shadow from no-border on ag cell

* Added Table Dropdown Cell Editor

* Added options to column field type

* Rendered dropdown instead of text if column has options

* Changed structured output to use new options

* Updated starter projects

* Refactor: Simplify TableOptions field definitions

---------

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>

src/frontend/src/App.css

@@ -124,11 +124,12 @@ body {
 /* This CSS is to not apply the border for the column having 'no-border' class */
 .no-border.ag-cell:focus {
   border: none !important;
-  outline: none;
+  outline: none !important;
+  box-shadow: none !important;
 }
 .no-border.ag-cell {
   border: none !important;
-  outline: none;
+  outline: none !important;
 }
 
 .react-flow__edge.selected .react-flow__edge-path {

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

@@ -0,0 +1,22 @@
+import { CustomCellEditorProps } from "ag-grid-react";
+import InputComponent from "../../../inputComponent";
+
+export default function TableDropdownCellEditor({
+  value,
+  values,
+  onValueChange,
+  colDef,
+}: CustomCellEditorProps & { values: string[] }) {
+  return (
+    <div className="flex h-full items-center px-2">
+      <InputComponent
+        setSelectedOption={(value) => onValueChange(value)}
+        value={value}
+        options={values}
+        password={false}
+        placeholder={"Select an option"}
+        id="apply-to-fields"
+      />
+    </div>
+  );
+}

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

@@ -28,4 +28,5 @@ export interface ColumnField {
   default?: any;
   edit_mode?: "modal" | "inline" | "popover";
   hidden?: boolean;
+  options?: string[];
 }

src/frontend/src/utils/utils.ts

@@ -1,4 +1,5 @@
 import TableAutoCellRender from "@/components/core/parameterRenderComponent/components/tableComponent/components/tableAutoCellRender";
+import TableDropdownCellEditor from "@/components/core/parameterRenderComponent/components/tableComponent/components/tableDropdownCellEditor";
 import TableToggleCellEditor from "@/components/core/parameterRenderComponent/components/tableComponent/components/tableToggleCellEditor";
 import useAlertStore from "@/stores/alertStore";
 import { ColumnField, FormatterType } from "@/types/utils/functions";
@@ -566,8 +567,21 @@ export function FormatColumns(columns: ColumnField[]): ColDef<any>[] {
       newCol.cellRendererParams = {
         formatter: col.formatter,
       };
-      if (col.formatter !== FormatterType.text || col.edit_mode !== "inline") {
-        if (
+
+      if (
+        col.formatter !== FormatterType.text ||
+        col.edit_mode !== "inline" ||
+        col.options
+      ) {
+        if (col.options && col.formatter === FormatterType.text) {
+          newCol.cellEditor = TableDropdownCellEditor;
+          newCol.cellEditorPopup = false;
+          newCol.cellEditorParams = {
+            values: col.options,
+          };
+          newCol.autoHeight = false;
+          newCol.cellClass = "no-border !py-2";
+        } else if (
           col.edit_mode === "popover" &&
           col.formatter === FormatterType.text
         ) {