The Dash datatable is a very useful component provided by Plotly Dash. An editable Dash table allows for dropdown list for certain columns. However, sometimes the dropdown list does not show up properly. Let’s now review a few reasons that cause the problem.

Reasons for invisible dropdown list with the default style

For the Dash datatable without any style templates, the main reason for the invisible dropdown list is setting the overflowY to be hidden, in style_cell. Let’s look at the following simple example: Let’s start with a very simple dash table with the following code:

import dash
import dash_table
import dash_html_components as html


app = dash.Dash()

columns = [
    {"name": "Column1", "id": "Column1"},
    {"name": "Dropdown", "id": "Dropdown", "presentation": "dropdown"},
    {"name": "Column2", "id": "Column2"}
]


app.layout = html.Div(
    dash_table.DataTable(
        id="table",
        columns=columns,
        data=[{c["id"]: "" for c in columns}],
        dropdown={
            "Dropdown":
            {"options": [{"label": i, "value": i} for i in ["A", "B", "C"]]}},
        editable=True,
        style_table={
            "width": "600px",
        }
    )
)

if __name__ == "__main__":
    app.run_server(debug=True)

The dropdown list looks appropriate:

However, if you turn on the argument "overflowY": "hidden" in style_table:

        style_table={
            "width": "600px",
            "overflowY": "hidden"
        }  

The dropdown list then does not show up:

This is quite intuitive since the dropdown list was the overflow and got hidden. However, if you set "overflowY": "hidden" in style_cell, and do not specify style_table, the dropdown list still shows up:

style_tabe={
            "width": "600px"
       },
style_cell={
            "overflowY": "hidden"
        } 

Reasons for invisible dropdown list when using the Bootstrap components style

The Dash Bootstrap Components is a library of Bootstrap components for Plotly Dash, that makes it easier to build consistently styled apps with complex, responsive layouts. When turning on the bootstrap components style:

import dash_bootstrap_components as dbc
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

The dropdown list in the datatable does not show up:

To fix the problem, we need to add a .css setting. To be specific, create a folder called assets in the same directory as your app, and create a file with the suffix .css, all the files with .css will be auto-detected and the settings inside the files will be automatically applied to the app. For example, let’s create a file called table.css

Inside the file table.css, add the following setting:

.Select-menu-outer {
    display : block !important;
  }

After this, without any settings in style_table or style_cell, the dropdown list properly shows up:

Different from the case with the default style, with the bootstrap style, setting "overflowY": "hidden" in either style_cell or style_table will cause the disappearance of the dropdown list.

Summary

To summarize, to avoid the disappearance of dropdown list in a Dash datatable:

1. Don’t set "overflowY": "hidden" in either style_table or style_cell
2. With the bootstrap style, add the css style: .Select-menu-outer display : block !important;}