[BUG] Fixing dash_data_table dropdown menu to open on click

vizro-core/changelog.d/20240515_133813_petar_pejovic_fixing_dash_table_dropdown_menu.md

@@ -0,0 +1,49 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Changed
+
+- Fix `dash_data_table` dropdown menu to open on click. ([#481](https://github.com/mckinsey/vizro/pull/481))
+
+<!--
+
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+<!--
+### Fixed
+
+- A bullet item for the Fixed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->

vizro-core/examples/_dev/app.py

@@ -1,23 +1,46 @@
 """Dev app to try things out."""
 
+import numpy as np
 import vizro.models as vm
 import vizro.plotly.express as px
 from vizro import Vizro
-from vizro.actions import export_data
+from vizro.tables import dash_data_table
 
 df = px.data.gapminder()
 
-vm.Page.add_type("controls", vm.Button)
+dropdown_column = "Label"
+dropdown_options = ["-- A --", "-- B --", "-- C --"]
+
+# Add a 'Label' column to the data where options are randomly selected between 'A', 'B', 'C'
+df[dropdown_column] = np.random.choice(dropdown_options, size=len(df))
+
+# Drop the 'iso_alpha' and 'iso_num' columns
+df.drop(["iso_alpha", "iso_num"], axis=1, inplace=True)
+
 
 page = vm.Page(
-    title="Export from control panel",
+    title="Table Page",
     components=[
-        vm.Graph(id="scatter_graph", figure=px.scatter(data_frame=df, x="gdpPercap", y="lifeExp", color="continent")),
-    ],
-    controls=[
-        vm.Filter(column="continent"),
-        vm.Button(text="Export", actions=[vm.Action(function=export_data())]),
+        vm.Table(
+            title="Table",
+            figure=dash_data_table(
+                id="table",
+                data_frame=df,
+                columns=[
+                    {"name": i, "id": i, "presentation": "dropdown"} if i == dropdown_column else {"name": i, "id": i}
+                    for i in df.columns
+                ],
+                editable=True,
+                dropdown={
+                    dropdown_column: {
+                        "options": [{"label": i, "value": i} for i in dropdown_options],
+                        "clearable": False,
+                    },
+                },
+            ),
+        ),
     ],
+    controls=[vm.Filter(column="continent")],
 )
 
 dashboard = vm.Dashboard(pages=[page])

vizro-core/src/vizro/tables/_dash_table.py

@@ -13,6 +13,7 @@ def dash_data_table(data_frame: pd.DataFrame, **kwargs) -> dash_table.DataTable:
     defaults = {
         "columns": [{"name": col, "id": col} for col in data_frame.columns],
         "style_as_list_view": True,
+        "style_cell": {"position": "static"},
         "style_data": {"border_bottom": "1px solid var(--border-subtle-alpha-01)", "height": "40px"},
         "style_header": {
             "border_bottom": "1px solid var(--state-overlays-selected-hover)",

vizro-core/tests/unit/vizro/tables/test_dash_table.py

@@ -35,6 +35,7 @@ def test_dash_data_table(self):
                 columns=columns,
                 data=data_in_table,
                 style_as_list_view=True,
+                style_cell={"position": "static"},
                 style_data={"border_bottom": "1px solid var(--border-subtle-alpha-01)", "height": "40px"},
                 style_header={
                     "border_bottom": "1px solid var(--state-overlays-selected-hover)",