Dash 数据表不显示单元格中的下拉值

Question

我需要创建一个数据表，该数据表需要逐行提供大量可编辑输入。其中许多需要是带有预定义值的下拉菜单。

我试图按照以下示例了解如何在数据表中实现下拉菜单，但由于某种原因，我的表没有显示实际的下拉值，我很困惑为什么。

这是我的示例：

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)

我根本不清楚我们的两个示例之间有什么不同。

Answer 1

您还可以将以下内容添加到

dash_table.DataTable()

：

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

Answer 2

我遇到了这个问题并解决了这个问题

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

因此，在您的 css 文件中创建或添加此代码。