Hi Bryan,
Thanks for the help so far! I think your first answer is sort of what I’m after but I’m a bit new so will take me a while to muddle through so I’ve attempted an MRE below.
I’d like to have a series of dropdowns synced together such that if I select a feature in one dropdown it updates the other dropdowns and their options based on the selection which in turn filters the table results.
So with the example below if I choose the continent Africa, the country dropdown only allows countries from Africa and so on for the year! Likewise, it works in reverse or any order you start the selection from.
After rereading your post I had a look at this and it has the functionality for what I’m after in the table filters but wasn’t sure how to make the dropdown work as the filter query etc. Does the same docs on the filtering page work for AG Grid?
On a separate note is there a way to fix that weird space formatting to get the dropdown and table in one row apart from dropping columns?
Thanks again:)
import pandas as pd
import plotly.express as px
from dash import Dash, html, dash_table, dcc, callback, Output, Input
import dash_bootstrap_components as dbc
df = px.data.gapminder()
#dropdown options
continent_options = df['continent'].unique()
country_options = df['country'].unique()
year_options = df['year'].unique()
# Initilialise app & style
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
#Layout
app.layout = dbc.Container(
dbc.Row([
dbc.Col([
dcc.Markdown('##### Sync Dropdowns')
]),
html.Hr(),
dbc.Col([dash_table.DataTable(data=df.to_dict('records'),
id='Table',
page_size=10,
)
],
width=8
),
dbc.Col([dcc.Dropdown(id='continent_dropdown',
options=continent_options,
clearable=True,
multi=True),
html.Hr(),
dcc.Dropdown(id='country_dropdown',
options=country_options,
clearable=True,
multi=True),
html.Hr(),
dcc.Dropdown(id='year_dropdown',
options=year_options,
clearable=True,
multi=True),
html.Hr()],
width=4)
]),
fluid=True
)
# Sync Street, Sequence, Address, Status dropdown Filter
@callback(
Output(component_id='continent_dropdown', component_property='value'),
Output(component_id='country_dropdown', component_property='value'),
Output(component_id='year_dropdown', component_property='value'),
Input(component_id='continent_dropdown', component_property='value'),
Input(component_id='country_dropdown', component_property='value'),
Input(component_id='year_dropdown', component_property='value')
)
def sync_dropdowns(chosen_continent, chosen_country, chosen_year):
input_id = ctx.triggered[0]["prop_id"].split(".")[0]
if input_id == "continent_dropdown":
selected_df = df.query("continent == @chosen_continent")
chosen_country = selected_df['country'].unique().tolist()
chosen_year = selected_df['year'].unique().tolist()
elif input_id == "country_dropdown":
selected_df = df.query("country == @chosen_country")
chosen_continent = selected_df['continent'].unique().tolist()
chosen_year = selected_df['year'].unique().tolist()
elif input_id == "year_dropdown":
selected_df = df.query("year == @chosen_year")
chosen_country = selected_df['country'].unique().tolist()
chosen_continent = selected_df['continent'].unique().tolist()
return chosen_continent, chosen_country, chosen_year
# Update Table
@callback(
Output(component_id='Table', component_property='data'),
Input(component_id='continent_dropdown', component_property='value'),
Input(component_id='country_dropdown', component_property='value'),
Input(component_id='year_dropdown', component_property='value')
)
def update_table(chosen_continent, chosen_country, chosen_year):
input_id = ctx.triggered[0]["prop_id"].split(".")[0]
if input_id == 'continent_dropdown':
selected_df = df.query("continent == @chosen_continent")
elif input_id == 'country_dropdown':
selected_df = df.query("country == @chosen_country")
elif input_id == 'year_dropdown':
selected_df = df.query("year == @chosen_year")
return selected_df.to_dict('records')
# Run the app
if __name__ == '__main__':
app.run(debug=True)
I have a private github if that’s useful!
