# DataTable content update with dropdown as input

**URL:** <https://community.plotly.com/t/datatable-content-update-with-dropdown-as-input/23487>\
**Category:** Dash Python\
**Created:** [May 15, 2019, 1:27pm UTC](https://community.plotly.com/t/datatable-content-update-with-dropdown-as-input/23487 "2019-05-15T13:27:38Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![vaclavku](https://avatars.discourse-cdn.com/v4/letter/v/8c91f0/32.png) [@vaclavku](https://community.plotly.com/u/vaclavku)\
**Post date:** [May 15, 2019, 1:27pm UTC](https://community.plotly.com/t/datatable-content-update-with-dropdown-as-input/23487/1 "2019-05-15T13:27:38Z")

</div>

Dear,  
I’ve following scenario: In the dropdown, I’ve names of tables/pandas dataframes (tab1, tab2, tabx). I try to update/change the whole table based on the option.

The layout part is:  
…  
html.Div(dtab.DataTable  
(id = ‘exch\_table’,  
columns=[{“name”: i, “id”: i} for i in df.columns],  
data=df.to\_dict(‘records’)  
)  
…

- 

In the callback, I retrieve data from database:  
@app.callback(Output(‘exch\_table’, ‘children’),  
[Input(‘exch\_dropdown’, ‘value’)])

## def update\_table(selected\_value): df = pd.read\_sql(selected\_value, conn) return df

The mistake is:  
The callback for property `children` of component `exch_table`  
returned a value having type `DataFrame`  
which is not JSON serializable.

In general, Dash properties can only be  
dash components, strings, dictionaries, numbers, None,  
or lists of those.

What is my issue about? How to solve it? (I tried to go through all the source however I didn’t find a similar scenario.)

Many thanks,  
Vaclav

Note: Just being sure: dtab is dash\_table.  
import dash\_table as dtab

---

<div class="post-metadata">

**Author:** ![vaclavku](https://avatars.discourse-cdn.com/v4/letter/v/8c91f0/32.png) [@vaclavku](https://community.plotly.com/u/vaclavku)\
**Post date:** [May 16, 2019, 7:33am UTC](https://community.plotly.com/t/datatable-content-update-with-dropdown-as-input/23487/2 "2019-05-16T07:33:58Z")

</div>

Hi, this is my solution:  
as the Das h v39 enables multiple out put (update is necessary) the layout is:  
html.Div(dtab.DataTable(id = ‘exch\_table’)

The call back is:  
def update\_table(selected\_value):  
df = pd.read\_sql(selected\_value, conn)  
columns=[{“name”: i, “id”: i} for i in df.columns]  
data=df.to\_dict(‘records’)  
return columns, data

It should work. The dash datatable is being updated based on the new pandas dataframe.

Good luck.  
Vaclav