使用回调函数过滤 Dash Table

Question

我正在尝试创建一个使用 dash 的 Web 应用程序，该应用程序将显示一个表格，该表格可以通过基于列中的值的下拉菜单进行过滤，但无法开始工作

由于我有多个要更新的表，我首先创建了一个函数来从 df（之前从数据库导入）创建 Dash DataTable

def make_leaderboard(df):
return html.Div([
    dash_table.DataTable(
        columns=[{"name": i, "id": i} for i in df.columns],
        data=df.to_dict('records'),
        style_header={
            'backgroundColor': red,
            # 'fontWeight': 'bold',
            'color': 'white',
            'border': '0px',
            'font_family': 'Roboto',
            'font_size' : '15px',
            'line_height': '30px',
            'whiteSpace': 'normal',
        },
        style_cell={'padding': '5px', 'border': '0px', 'textAlign': 'center', 'font_family': 'Roboto', 'fontWeight': '100', 'font_size' : '14px', 'line_height': '28px'},
        style_data_conditional=[
        {
            'if': {'row_index': 'odd'},
            'backgroundColor': light_grey,
        }
        ],
        style_cell_conditional=[
        {
        'if': {'column_id': c},
            'textAlign': 'left'
        } for c in ['']
        ],
        style_as_list_view=True,
        page_action='native',
        fixed_rows={'headers':True},
        style_table={'height': '350px', 'overflowY': 'auto'},
    ),
    html.Br([]),
    ])

然后我创建了一个带有下拉列表和表格的破折号布局

app.layout = html.Div([
    Header(),
    #row
    html.Div([
        html.Div([
            html.Div([
                html.H6(['SELECT POSITION'],),
                dcc.Dropdown(
                    id='select_position',
                    options=[
                        {'label': 'POINT GUARD', 'value': 'PG'},
                        {'label': 'SHOOTING GUARD', 'value': 'SG'},
                        {'label': 'SMALL FORWARD', 'value': 'SF'},
                        {'label': 'POWER FORWARD', 'value': 'PF'},
                        {'label': 'CENTER', 'value': 'C'}
                    ],
                    searchable=True,
                    multi=True,
                    style={'width':'90%'},
                ),
            ], className='four columns'),
        ], className="row container-display",),
    ],
    ),

    #row
    html.Div([
        html.Div([
            html.Div([
                html.H6(['TWO POINT PERCENTAGE'],),
                html.Div(make_leaderboard(data)),
            ], className='four columns', id='df_two_perc'),
        ], className="row container-display",),
    ],
    ),
],

)

并尝试生成回调

    @app.callback(
    Output(component_id='df_two_perc', component_property='data'),
    [Input(component_id='select_position', component_property='value')]
)
def update_df_div(option_selected):
    filtered_df = df_two_leaderboard[df_two_leaderboard['POS'].isin(option_selected)]
    data = filtered_df.to_dict('records')
    return data


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

我正在尝试按位置（PG、SG、SF、PF、C）过滤并返回过滤后的数据。我目前遇到的错误是

NameError: name 'data' is not defined

所以我假设它没有收到数据的返回，但不确定下一步尝试解决这个问题，或者即使我很接近解决。任何帮助将不胜感激，因为我似乎无法以这种方式找到有关表格和过滤的任何特定资源，谢谢

Answer 1

您将 ID 附加到了错误的组件。它应该在桌子上，而不是包含的 div。

你有：

html.Div([
                html.H6(['TWO POINT PERCENTAGE'],),
                html.Div(make_leaderboard(data)),
            ], className='four columns', id='df_two_perc'),  # this should be a different id!

您尚未在桌子上设置 ID。你需要确保你有

    dash_table.DataTable(
        id='df_two_perc',
        columns=[{"name": i, "id": i} for i in df.columns],
        ...