Would something like this work? I recommend reading through the user guide https://plot.ly/dash/getting-started-part-2 to learn more about how these callbacks work.
import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
df = pd.read_csv(
'https://gist.githubusercontent.com/chriddyp/'
'c78bf172206ce24f77d6363a2d754b59/raw/'
'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
'usa-agricultural-exports-2011.csv')
def generate_table(dataframe, max_rows=10):
return html.Table(
# Header
[html.Tr([html.Th(col) for col in dataframe.columns])] +
# Body
[html.Tr([
html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
]) for i in range(min(len(dataframe), max_rows))]
)
app = dash.Dash()
app.layout = html.Div(children=[
html.H4(children='US Agriculture Exports (2011)'),
dcc.Dropdown(id='dropdown', options=[
{'label': i, 'value': i} for i in df.state.unique()
], multi=True, placeholder='Filter by state...'),
html.Div(id='table-container')
])
@app.callback(
dash.dependencies.Output('table-container', 'children'),
[dash.dependencies.Input('dropdown', 'value')])
def display_table(dropdown_value):
if dropdown_value is None:
return generate_table(df)
dff = df[df.state.str.contains('|'.join(dropdown_value))]
return generate_table(dff)
app.css.append_css({"external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"})
if __name__ == '__main__':
app.run_server(debug=True)
