Added dropdown-cell support for the data editor (#6139)

* Added dropdown-cell support

* Ran pre-commit

* Set allowOverlay/readonly based on editable

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* Made custom_renderers optional

* Update hash for dataeditor.pyi in pyi_hashes.json

* Add extended_cell_types param to DataEditor.create

* Update hash for dataeditor.pyi in pyi_hashes.json

* Formatting

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: Masen Furer <m_github@0x26.net>

Author: 3 people

packages/reflex-base/src/reflex_base/.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,

packages/reflex-components-dataeditor/src/reflex_components_dataeditor/dataeditor.py

@@ -14,7 +14,7 @@
 from reflex_base.utils.imports import ImportDict, ImportVar
 from reflex_base.utils.serializers import serializer
 from reflex_base.vars import get_unique_variable_name
-from reflex_base.vars.base import Var
+from reflex_base.vars.base import Var, VarData
 from reflex_base.vars.function import FunctionStringVar
 from reflex_base.vars.sequence import ArrayVar
 
@@ -395,6 +395,9 @@ class DataEditor(NoSSRComponent):
         doc="Fired when the search close button is clicked."
     )
 
+    # Custom cell renderers
+    custom_renderers: Var[Any]
+
     def add_imports(self) -> ImportDict:
         """Add imports for the component.
 
@@ -489,11 +492,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.
 
         Returns:
@@ -550,6 +554,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,

pyi_hashes.json

@@ -37,7 +37,7 @@
   "packages/reflex-components-core/src/reflex_components_core/el/elements/tables.pyi": "cba93678248925c981935a251379aa7c",
   "packages/reflex-components-core/src/reflex_components_core/el/elements/typography.pyi": "4abedc6f98f6d54194ff9e7f1f76314e",
   "packages/reflex-components-core/src/reflex_components_core/react_router/dom.pyi": "1074a512195ae23d479c4a2d553954e1",
-  "packages/reflex-components-dataeditor/src/reflex_components_dataeditor/dataeditor.pyi": "07de150d57e16f66b62d66a94da98d74",
+  "packages/reflex-components-dataeditor/src/reflex_components_dataeditor/dataeditor.pyi": "8e379fa038c7c6c0672639eb5902934d",
   "packages/reflex-components-gridjs/src/reflex_components_gridjs/datatable.pyi": "d2dc211d707c402eb24678a4cba945f7",
   "packages/reflex-components-lucide/src/reflex_components_lucide/icon.pyi": "3892ce64fef33649813a25f63c0ba43b",
   "packages/reflex-components-markdown/src/reflex_components_markdown/markdown.pyi": "da02f81678d920a68101c08fe64483a5",