在 Dash 中使用下拉列表更新表格

Question

我想创建将根据下拉列表选择进行过滤的表。我的代码部分工作，当我选择要显示的 1 个或多个项目时，它可以正常工作。 当我清理选择时它不起作用。我希望得到完整的表，但它返回空表。

组件代码：

#7th row components
bullion_coins_dropdown = dcc.Dropdown(id = 'bullion_coins_dropdown', options = [x for x in sorted(bullion_coins_df.Coin.unique())],
                                      multi = True)

#8th row components
bullion_coins_table = dash_table.DataTable(id = 'bullion_coins_table',
                                           columns = [
                                               {'name' : 'Coin', 'id' : 'Coin', 'type' : 'text'},
                                               {'name' : 'Mint', 'id' : 'Mint', 'type' : 'text'},
                                               {'name' : 'Country', 'id' : 'Country', 'type' : 'text'},
                                               {'name' : 'Weight [g]', 'id' : 'Weight [g]', 'type' : 'numeric'},
                                               {'name' : 'Fineness [%]', 'id' : 'Fineness [%]', 'type' : 'numeric'},
                                               {'name' : 'Diameter [mm]', 'id' : 'Diameter [mm]', 'type' : 'numeric'},
                                               {'name' : 'Diameter tolerance [mm]', 'id' : 'Diameter tolerance [mm]', 'type' : 'numeric'},
                                               {'name' : 'Thickness [mm]', 'id' : 'Thickness [mm]', 'type' : 'numeric'},
                                               {'name' : 'Thickness tol. [mm]', 'id' : 'Thickness tol. [mm]', 'type' : 'numeric'},
                                               {'name' : 'Metal', 'id' : 'Metal', 'type' : 'text'}
                                            ],
                                           data = bullion_coins_df.to_dict('records'),
                                           filter_action = 'native',
                                           page_size = 5,
                                           
                                           style_data = {
                                               'width' : '100px', 'minWidth' : '100px', 'maxWidth' : '100px',
                                               'overflow' : 'hidden',
                                               'textOverflow' : 'ellipsis',
                                           })

回拨码：

@app.callback(
    Output(bullion_coins_table, component_property = 'data'),
    Input(bullion_coins_dropdown, component_property = 'value')
)

def table_func(bullion_coins_dropdown):
    if bullion_coins_dropdown == None:
        bullion_coins_table = bullion_coins_df.to_dict('records') 
    else:
        bullion_coins_table = bullion_coins_df[bullion_coins_df.Coin.isin(bullion_coins_dropdown)].to_dict('records')
    return bullion_coins_table

我尝试使用复制的数据框执行 else 语句，但没有得到预期的结果。

Answer 1

我没有您的数据框，但我认为您应该在

dash_table.DataTable

中设置 data = []，然后使用回调根据

dropdown

选项返回数据。示例代码：

from dash import Dash, dash_table
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app = Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(id = 'bullion_coins_dropdown', 
                 options = [x for x in sorted(df['State'].unique())],
                 multi = True),
    dash_table.DataTable(id='table',
                         data=[], 
                         columns = [{"name": i, "id": i} for i in df.columns])
])

@app.callback(Output('table', 'data'), 
              Input('bullion_coins_dropdown', 'value'))

def update_table(bullion_coins_dropdown):
    if bullion_coins_dropdown:
        dff = df[df['State'].isin(bullion_coins_dropdown)]
    else:
        dff = df.copy()
    return dff.to_dict(orient = 'records')
if __name__ == '__main__':
    app.run(debug=False)