How to pass Dataframe to dash Data-table through callbacks?

Dash Python
1

Hi, why am I not able to pass a pandas data frame to a datatable in Dash data-table version
3.1.11 on the click of an html button? My code looks something like this
‘’’

app.layout = html.Div([
html.Button(‘Server’, n_clicks = 0, id=‘Server_Button’),
dash_table.DataTable(id=‘datatable-upload-container’),
])

@app.callback(Output(‘datatable-upload-container’, ‘data’),
[Input(‘Server_Button’, ‘n_clicks’)])
def update_output(clicks):
if clicks%2!=0:
df = pd.read_csv(‘https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv’)
return df.to_dict(‘rows’)
‘’’

1 Like
2

The combination of setting n_clicks to always 0 and then having an if statement saying when it is even don’t return anything looks to be your problem.

Try this as your button:

html.Button('Server', id='Server_Button')

And try this as your callback:

from dash.exceptions import PreventUpdate

@app.callback(Output('datatable-upload-container', 'data'),
              [Input('Server_Button', 'n_clicks')])
def update_output(clicks):
    if clicks is None:
        raise PreventUpdate
    df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
    return df.to_dict('rows')

As with normal Python you can always do the most basic type of debugging by inserting print statements, e.g. printing out what “clicks” give you would help you understand why this is failing. And if that fails to help you can reduce branching complexity to see where you are going wrong, e.g. remove the ifs and see what happens.

Finally always make sure you are on the latest version of all the Dash components, here is my current list:

dash                      0.35.2
dash-core-components      0.42.1
dash-html-components      0.13.5
dash-renderer             0.16.2
dash-table                3.1.11
3

Hi Damian thanks for your reply! I hadn’t updated Dash and its components that you had listed. Updated it, but still the problem remains! I am not able to pass on a data frame to data-table unless I specify the columns in the dash layout!

4

Hi Sagark, did you try code changes I suggested? Are you getting errors? Did you try printing out the value of click? What did you get?

What exactly do you mean by “unless I specify the columns in the dash layout”? I do believe specify columns to the data table is a requirement for it to work.

5

Hi Damian, I did try out the changes you suggested! I hadn’t updated Dash and its components.But even after updating and trying out your changes I get the same solution, which is the table not being displayed! I didn’t have this problem with the previous version of Dash data-table though. The value of click is ‘1’ as expected but the table isn’t getting displayed. It is only when I declare something like this ‘’‘dt.DataTable(
id=‘table’,
columns=[{“name”: i, “id”: i} for i in df.columns],
),
])’’’ in my layout that the table gets displayed!

6

Good to hear you figured it out! As per the documentation you need to provide columns.