Return a dataframe as a data_table from a callback

Dash Python
1

I would like to read a .csv file and return a groupby function as a callback to be displayed as a simple data table. Is this possible with Dash? Here is where I’m stuck:

import pandas as pd
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
from dash.dependencies import Input, Output, State


app = dash.Dash()
application = app.server

app.layout = html.Div([
    dash_table.DataTable(
        id = 'datatable',        
    ),

    html.Div([
        html.H3('Give path and name of .csv file:',style=dict(paddingRight='30px')),
        dcc.Input(
            id='csv-files-loc',            
            style={'fontSize':12}
        ),        
        html.Button(id='submit-button',                
                children='Submit'
    )
    ]),    
    
])
 
@app.callback(Output('datatable','data'),
            [Input('submit-button','n_clicks')],
             [State('csv-files-loc','value')])

def update_datatable(n_clicks,csv_file):            
    if n_clicks:
        df = pd.read_csv(
    'https://gist.githubusercontent.com/chriddyp/'
    'c78bf172206ce24f77d6363a2d754b59/raw/'
    'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
    'usa-agricultural-exports-2011.csv')                
        dfgb = df.groupby(['state']).sum()
        return dfgb.to_dict('rows')

if __name__ == '__main__':
    application.run(debug=False, port=8080)
2

What error are you getting?

I’ve not carefully read your code but it looks largely correct bar a couple of small mistakes:

if n_clicks > 0: should be if n_clicks: and df.groupby(['col_1'].sum() should be df.groupby(['col_1']).sum() and you can get rid of n_clicks=0.

3

Thanks Damian,

Sorry for the minor mistakes in my code, those were not the issue. I’m not getting any error, the problem is that no table is displayed. I’ve cleaned up my code in the original post and also removed the .csv input as that is not necessary for the example.

4

A less desirable alternative would be to write to html with Pandas method to_html.

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
from dash.dependencies import Input, Output, State
import pandas as pd
     
app = dash.Dash()
application = app.server

app.layout = html.Div([
    html.Div([
        html.Iframe(id = 'datatable', height = 500, width = 1200)
    ]),    

    html.Div([
        html.H3('Location of JIRA Query .csv file:',style=dict(paddingRight='30px')),
        dcc.Input(
            id='csv-files-loc',            
            style={'fontSize':12}
        ),        
        html.Button(id='submit-button',                    
                children='Submit'
    )
    ]),    
    
])
 
@app.callback(Output('datatable','srcDoc'),
            [Input('submit-button','n_clicks')],
             [State('csv-files-loc','value')])

def update_datatable(n_clicks,csv_file):            
    if n_clicks: 
        df =  pd.read_csv(csv_file)
        return df.to_html()

if __name__ == '__main__':       
    application.run(debug=False, port=8080)
1 Like
5

Here is the solution:

1 Like