# DatePickerRange to Update Data Table **URL:** \ **Category:** Dash Python\ **Created:** [November 29, 2018, 6:26am UTC](https://community.plotly.com/t/datepickerrange-to-update-data-table/16193 "2018-11-29T06:26:29Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Troy](https://avatars.discourse-cdn.com/v4/letter/t/85f322/32.png) [@Troy](https://community.plotly.com/u/Troy)\ **Post date:** [November 29, 2018, 6:26am UTC](https://community.plotly.com/t/datepickerrange-to-update-data-table/16193/1 "2018-11-29T06:26:29Z")
My layout uses two dcc components a DatePickerRange and a DataTable. The datable is displaying a pandas df with ‘Date’ as a column. I want to allow the user to select a start date & end date from the DatePickerRange and have the DataTable filter the df based on the dates selected. Seems that this is straight forward, but I get lost in writing out the function as you’ll see below: ``` @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_table(start_date, end_date): start_date = dt.strptime(start_date, '%Y-%m-%d') end_date = dt.strptime(end_date, '%Y-%m-%d') df2 = df[(df['Date']>start_date)&(df['Date'] **Author:** ![qdumont](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/qdumont/32/5278_2.png) [@qdumont](https://community.plotly.com/u/qdumont)\ **Post date:** [December 6, 2018, 2:57pm UTC](https://community.plotly.com/t/datepickerrange-to-update-data-table/16193/2 "2018-12-06T14:57:26Z") hi @Troy, I faced the same issue, and actually removing dt.strptime solved it : here is my example : ``` @app.callback( Output(component_id='chart_delay', component_property='figure'), [Input(component_id='my-date-picker-range', component_property='start_date'), Input(component_id='my-date-picker-range', component_property='end_date')] ) def update_chart(start_date, end_date) : new_results = results.loc[start_date: end_date] ``` Be sure that your DataFrame has only one index and that it is convert to DateTime. Best, Quentin ---
**Author:** ![prateek](https://avatars.discourse-cdn.com/v4/letter/p/ee7513/32.png) [@prateek](https://community.plotly.com/u/prateek)\ **Post date:** [December 6, 2018, 7:33pm UTC](https://community.plotly.com/t/datepickerrange-to-update-data-table/16193/3 "2018-12-06T19:33:56Z")
I had to do something similar, this helped me achieve the task:: @app.callback( Output(component\_id=‘chart\_delay’, component\_property=‘figure’), [Input(component\_id=‘my-date-picker-range’, component\_property=‘start\_date’), Input(component\_id=‘my-date-picker-range’, component\_property=‘end\_date’)] ) def update\_chart(start\_date, end\_date) : df2 = df.loc[(df.Date \> start\_date) & (df.Date \<= end\_date)] ---
**Author:** ![Troy](https://avatars.discourse-cdn.com/v4/letter/t/85f322/32.png) [@Troy](https://community.plotly.com/u/Troy)\ **Post date:** [January 13, 2019, 5:33am UTC](https://community.plotly.com/t/datepickerrange-to-update-data-table/16193/4 "2019-01-13T05:33:25Z")
Thanks so much for the response Quentin. I applied your suggestion and the weird thing is that the datatable is not updating. However, I can tell by looking through the Terminal that the code is working. Also, my datatable is not displaying the index (index is datetime). Something has got to be off with how I’ve set up the data table to read in the data? Full code below: ``` df = pd.read_csv('Test_Time_Series.csv') df['Date'] = pd.to_datetime(df.Date,errors='coerce') df.index = df['Date'] del df['Date'] app = dash.Dash() app.layout = html.Div([ dcc.DatePickerRange( id='my-date-picker-range', min_date_allowed=dt(2019, 1, 1), max_date_allowed=dt(2019, 1, 4), initial_visible_month=dt(2019, 1, 1), end_date=dt(2019, 1, 4) ), dash_table.DataTable( id='table', columns=[{"name": i, "id": i} for i in df.columns], data=df.to_dict("rows") ) ]) @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_table(start_date, end_date): df2 = df.loc[start_date: end_date] return df2 if __name__ == ' __main__': app.run_server(debug=True) ``` ---
**Author:** ![qdumont](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/qdumont/32/5278_2.png) [@qdumont](https://community.plotly.com/u/qdumont)\ **Post date:** [January 14, 2019, 10:15am UTC](https://community.plotly.com/t/datepickerrange-to-update-data-table/16193/5 "2019-01-14T10:15:23Z")
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](https://dash.plot.ly/datatable) I hope that helps, 🙂 Quentin ---
**Author:** ![Troy](https://avatars.discourse-cdn.com/v4/letter/t/85f322/32.png) [@Troy](https://community.plotly.com/u/Troy)\ **Post date:** [January 15, 2019, 4:27am UTC](https://community.plotly.com/t/datepickerrange-to-update-data-table/16193/6 "2019-01-15T04:27:20Z")
Quentin I REALLY appreciate you taking the time to write this out. It was super helpful and everything works as I intended it to now. Thank you! ---
**Author:** ![qdumont](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/qdumont/32/5278_2.png) [@qdumont](https://community.plotly.com/u/qdumont)\ **Post date:** [January 16, 2019, 1:35pm UTC](https://community.plotly.com/t/datepickerrange-to-update-data-table/16193/7 "2019-01-16T13:35:23Z")
Hi Troy, Pleasure is for me. Would you mind putting this topic as solved if it answered your question ? See you around, Quentin ---
**Author:** ![firehobo](https://avatars.discourse-cdn.com/v4/letter/f/8e7dd6/32.png) [@firehobo](https://community.plotly.com/u/firehobo)\ **Post date:** [March 10, 2020, 7:25pm UTC](https://community.plotly.com/t/datepickerrange-to-update-data-table/16193/8 "2020-03-10T19:25:02Z")
Hey Quentin, I tried your suggesting but I seem to be having some trouble with this. Any chance you might be able to shed some light? Any help would be super appreciated! Anytime I run the app, nothing appears in the tables. app.layout = html.Div( ``` [ dcc.DatePickerRange( id='my-date-picker-range', min_date_allowed=datetime(2019, 8, 5), max_date_allowed=datetime(2021, 9, 19), initial_visible_month=datetime(2020, 1, 1), end_date=datetime(2020, 1, 2) ), dash_table.DataTable( id="soc_cases", columns=[{"name": i, "id": i} for i in df_soc.columns], data=df_soc.to_dict("rows") ), ``` ]) #need to finish this call back #ref [DatePickerRange to Update Data Table](https://community.plotly.com/t/datepickerrange-to-update-data-table/16193/5) @app.callback( dash.dependencies.Output(‘soc\_cases’,‘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\_soc.loc[(df\_soc[‘firstBooking’] \>= start\_date) & (df\_soc[‘firstBooking’] \< end\_date)] data=df2.to\_dict(‘rows’) return data @app.callback( dash.dependencies.Output(‘soc\_cases’,‘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\_soc.loc[(df\_soc[‘firstBooking’] \>= start\_date) & (df\_soc[‘firstBooking’] \< end\_date)] columns =[{“name”: i, “id”: i} for i in df2.columns] return columns if **name** == ‘ **main** ’: app.run\_server(debug=True) ---
**Author:** ![nyck33](https://avatars.discourse-cdn.com/v4/letter/n/a8b319/32.png) [@nyck33](https://community.plotly.com/u/nyck33)\ **Post date:** [November 3, 2020, 7:30am UTC](https://community.plotly.com/t/datepickerrange-to-update-data-table/16193/9 "2020-11-03T07:30:27Z")
> **[pandas.DataFrame.to\_dict — pandas 1.1.4 documentation](https://pandas.pydata.org/pandas-docs/stable/reference/api/pandas.DataFrame.to_dict.html)** There is no `df.to_dict('rows')`