Hi, I’ve been using Dash on Python for a week now to develop a Webapp that may seem simple but for which I can’t find an answer to my dysfunction.
However, I made some interesting points.
-
having a dataset displayed with the possibility of being able to filter on the fly on the values: DONE
-
Be able to export the filtered dataset in csv: DONE
-
To be able to connect my dropdown to filter on fixed variables: NOT OK
However, it seems to be the simplest thing, but I really don’t understand how the relation of the callback works with the function of updating the dataset via the “children”.
Thanks to anyone who could help me in my experience with this framework.
Here is the structure of my code stripped to the maximum of unnecessary information.
app.layout = html.Div([
html.H1("Global Referential of Network Products"),
#SELECT COUNTRY
#DATASET INTERACTIF
html.Div([
html.Label('Quick research input dataset'),
dash_table.DataTable(
id='datatable_id',
data=df.to_dict('records'),
columns=[
{"name": i, "id": i, "deletable": False, "selectable": False} for i in df.columns
],
fixed_rows={ 'headers': True, 'data': 0 },
filter_action="native",
sort_action="native",
row_deletable=False,
page_action="native",
page_current= 0,
page_size= 10,
virtualization=False,
style_cell_conditional=[
{'if': {'Country': 'Country'},
'width': '30%', 'textAlign': 'left'},
{'if': {'Manufacturer_Code': 'Manufacturer_Code'},
'width': '30%', 'textAlign': 'left'},
{'if': {'Local_Code': 'Local_Code'},
'width': '30%', 'textAlign': 'left'},
{'if': {'Item_Description': 'Item_Description'},
'width': '10%', 'textAlign': 'left'},
],
export_format='xlsx',
export_headers='display',
merge_duplicate_headers=True,
),
dcc.Dropdown(id="slct_country",
options=[
{"label": country_list[0], "value": country_list[0]},
...
{"label": country_list[8], "value": country_list[8]}],
multi=False,
value=country_list[2],
style={'width': "60%"}
),
html.Div([
html.Button("Add Filter", id="add-filter", n_clicks=0),
html.Div(id='dropdown-container', children=[]),
html.Div(id='dropdown-container-output')
])
],className='row')
])
@app.callback(
[Output(component_id='datatable_id', component_property='data'),
Output(component_id='data_filtered', component_property='children'),
Output('dropdown-container', 'children')],
[Input(component_id='slct_country', component_property='value')])
def display_dropdowns(children):
new_dropdown = dcc.Dropdown(
country_list,
id={
'type': 'filter-dropdown',
'index': n_clicks
}
)
children.append(new_dropdown)
return children
def update_data(country_value):
if len(country_value)==0:
df_filterd = dff[dff['Country'].isin(country_list)]
else:
print(country_value)
df_filterd = dff[dff.index.isin(country_value)]
return country_value
As you can see, I have in my Input component the dropdown select_country with the value as the country I selected into it but It had any impact in my dataset after.