Dropdown Cells Not Displaying Dropdown Values in DataTable

Dash Python
1

Hi All,

I need to create a DataTable that’s going to require a fairly elaborate amount of editable inputs on a row-by-row basis. Many of which need to be dropdown menus with pre-defined values.

I am trying to follow along with the following example on how to implement dropdown menus in a DataTable, but for some reason my Table does NOT display the actual drop down values and I’m stumped as to why.

Here is my sample example:

import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
import pandas as pd
from sqlalchemy import create_engine
from return_matrix import create_final_datatable
from dash.dependencies import Input, Output, State
from dash_table import DataTable

#### Global Variables Which Will Not Need to Be Changed

table_columns = [{
        "id": "Label",
        "name": "Label",
        "type": "text"
        }, {'id': 'Calc1', 'name': 'Calc1', 'presentation': 'dropdown'}]
        

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.COSMO], suppress_callback_exceptions=True)

app.layout = html.Div([
        
        dbc.Container(id='main-container', fluid=True, children=[
                html.H3("Data Explorer", style={'text-align': 'center'}),
                dbc.Row(dbc.Col(children=[DataTable(id='input-table', editable=True,
                          columns  = table_columns,
                          dropdown = {
                                  'Calc1': {
                                  'options': [
                                  {'label': i, 'value': i}
                    for i in ['FILTER', 'FWDRET', 'RATIO']
                ]
            }}, data=[{'Label': 'Beginning Label', 'Calc1': 'FILTER'}]),
                html.Div(id="table-dropdown")], width={"size": 8, "offset":2}))
            ])
        ])
                
if __name__ == '__main__':
    app.run_server(port=8051)

Not clear at all to me what’s different between our two examples.

2

Hi @rosenthall

The problem is caused by the Bootstrap stylesheet. If you take that out, the dropdowns work as expected.

I’m sure there is some custom css you can put in the assets directory to fix this, but I’m not sure what that is. But at least this is a start of a solution :slight_smile: