Added dropdown-cell support for the data editor

pyi_hashes.json

@@ -23,7 +23,7 @@
   "reflex/components/core/window_events.pyi": "af33ccec866b9540ee7fbec6dbfbd151",
   "reflex/components/datadisplay/__init__.pyi": "52755871369acbfd3a96b46b9a11d32e",
   "reflex/components/datadisplay/code.pyi": "b86769987ef4d1cbdddb461be88539fd",
-  "reflex/components/datadisplay/dataeditor.pyi": "f8c1e816c9f22f4a7429f812214407f2",
+  "reflex/components/datadisplay/dataeditor.pyi": "f8f1c55a8f05ad0a5eb9bcda37e0371b",
   "reflex/components/datadisplay/shiki_code_block.pyi": "1d53e75b6be0d3385a342e7b3011babd",
   "reflex/components/el/__init__.pyi": "0adfd001a926a2a40aee94f6fa725ecc",
   "reflex/components/el/element.pyi": "c5974a92fbc310e42d0f6cfdd13472f4",

reflex/.templates/web/utils/helpers/dataeditor.js

@@ -46,6 +46,20 @@ export function formatCell(value, column) {
         data: value,
         readonly: !editable,
       };
+    case "dropdown":
+      const cellValue = value ? String(value) : "";
+      return {
+        kind: GridCellKind.Custom,
+        allowOverlay: editable,
+        copyData: cellValue,
+        displayData: cellValue,
+        readonly: !editable,
+        data: {
+          kind: "dropdown-cell",
+          allowedValues: (column.allowedValues || []).map(v => String(v)),
+          value: cellValue,
+        },
+      };
     default:
       console.log(
         "Warning: column.type is undefined for column.title=" + column.title,

reflex/components/datadisplay/dataeditor.py

@@ -14,7 +14,7 @@
 from reflex.utils.imports import ImportDict, ImportVar
 from reflex.utils.serializers import serializer
 from reflex.vars import get_unique_variable_name
-from reflex.vars.base import Var
+from reflex.vars.base import Var, VarData
 from reflex.vars.function import FunctionStringVar
 from reflex.vars.sequence import ArrayVar
 
@@ -366,6 +366,9 @@ class DataEditor(NoSSRComponent):
     # Fired when the search close button is clicked.
     on_search_close: EventHandler[no_args_event_spec]
 
+    # Custom cell renderers
+    custom_renderers: Var[Any]
+
     def add_imports(self) -> ImportDict:
         """Add imports for the component.
 
@@ -460,11 +463,12 @@ def add_hooks(self) -> list[str]:
         return ["\n".join(code)]
 
     @classmethod
-    def create(cls, *children, **props) -> Component:
+    def create(cls, *children, extended_cell_types: bool = False, **props) -> Component:
         """Create the DataEditor component.
 
         Args:
             *children: The children of the data editor.
+            extended_cell_types: Whether to enable extended cell types.
             **props: The props of the data editor.
 
         Raises:
@@ -521,6 +525,18 @@ def create(cls, *children, **props) -> Component:
                 "reconstructGridSelection"
             ).call(grid_selection)
 
+        if extended_cell_types:
+            props["custom_renderers"] = Var(
+                "allCells",
+                _var_data=VarData(
+                    imports={
+                        "@glideapps/glide-data-grid-cells@6.0.3": ImportVar(
+                            tag="allCells", is_default=False
+                        )
+                    }
+                ),
+            )
+
         grid = super().create(*children, **props)
         return Div.create(
             grid,