DatePickerRange to Update Data Table

Dash Python
5

Hi Troy, glad to see my answer helped you.

1 - Concerning the index : It seems that Dash Datatable is not taking it into account (so far). you simply have to reset it.

df2 = df2.reset_index(drop= False)

2 - Concerning the update :
It is really important to change the “Property” you wanna update, and not the full DataFrame. For example, in the code you provide, the property you try to change is ‘data’, while you return a full ‘Dataframe’.
Try the following and it should work :

@app.callback(
dash.dependencies.Output('table', 'data'),
[dash.dependencies.Input('my-date-picker-range', 'start_date'),
 dash.dependencies.Input('my-date-picker-range', 'end_date')])

def update_data(start_date, end_date):
    df2 = df.loc[start_date: end_date]
    data = df2.to_dict("rows")
return data

3 - You will probably have to do the same for the name of your columns and make another callback since the property is different (columns instead of data):

@app.callback(
dash.dependencies.Output('table', 'columns'),
[dash.dependencies.Input('my-date-picker-range', 'start_date'),
 dash.dependencies.Input('my-date-picker-range', 'end_date')])

def update_columns(start_date, end_date):
df2 = df.loc[start_date: end_date]
columns =[{"name": i, "id": i} for i in df2.columns]
return columns

When you try to update a Graph, Table, etc… Be sure that you update the right property.
You can get all the details if needed here : https://dash.plot.ly/datatable

I hope that helps, :slight_smile:

Quentin

1 Like