Dash DataTable Not Displaying Dropdown Values in Cell

Question

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.

Answer 1

You can also add the following to dash_table.DataTable():

css = [{
    "selector": ".Select-menu-outer",
    "rule": 'display : block !important'
}]