Return a Pandas DataFrame as a data_table from a callback with Plotly Dash for Python

Question

I would like to read a .csv file and return a groupby function as a callback to be displayed as a simple data table with "dash_table" library. @Lawliet's helpful answer shows how to do that with "dash_table_experiments" library. 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

df = pd.read_csv(
        'https://gist.githubusercontent.com/chriddyp/'
        'c78bf172206ce24f77d6363a2d754b59/raw/'
        'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
        'usa-agricultural-exports-2011.csv')

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

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

    html.Div([
        html.Button(id='submit-button',                
                children='Submit'
    )
    ]),    

])

@app.callback(Output('datatable','data'),
            [Input('submit-button','n_clicks')],
                [State('submit-button','n_clicks')])

def update_datatable(n_clicks,csv_file):            
    if n_clicks:                            
        dfgb = df.groupby(['state']).sum()
        return dfgb.to_dict('rows')

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

Lawliet · Accepted Answer · 2019-03-26 17:07:34Z

27

+100

When you are trying to register the callback Output component as a DataTable, all the required / mandatory attributes for the DataTable component should be updated in the callback and returned. In your code, you are updating just DataTable.data and not DataTable.column, one easy way is to return the whole Datatable component which is prepopulated with all the required attribute values.

Here is an example,

import dash_html_components as html
import dash_core_components as dcc
import dash
import dash_table
import pandas as pd
import dash_table_experiments as dt

app = dash.Dash(__name__)

#data to be loaded
data = [['Alex',10],['Bob',12],['Clarke',13],['Alex',100]]
df = pd.DataFrame(data,columns=['Name','Mark'])

app.layout = html.Div([
    dt.DataTable(
            rows=df.to_dict('records'),
            columns=df.columns,
            row_selectable=True,
            filterable=True,
            sortable=True,
            selected_row_indices=list(df.index),  # all rows selected by default
            id='2'
     ),
    html.Button('Submit', id='button'),
    html.Div(id="div-1"),
])


@app.callback(
    dash.dependencies.Output('div-1', 'children'),
    [dash.dependencies.Input('button', 'n_clicks')])
def update_output(n_clicks):

    df_chart = df.groupby('Name').sum()

    return [
        dt.DataTable(
            rows=df_chart.to_dict('rows'),
            columns=df_chart.columns,
            row_selectable=True,
            filterable=True,
            sortable=True,
            selected_row_indices=list(df_chart.index),  # all rows selected by default
            id='3'
        )
    ]

if __name__ == '__main__':
    app.run_server(debug=True)

Looks like dash-table-experiments is deprecated.

Edit 1: Here is one way of how it can be achieved using dash_tables

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

df = pd.read_csv(
        'https://gist.githubusercontent.com/chriddyp/'
        'c78bf172206ce24f77d6363a2d754b59/raw/'
        'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
        'usa-agricultural-exports-2011.csv')

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

app.layout = html.Div([
    dt.DataTable(
        id = 'dt1', 
        columns =  [{"name": i, "id": i,} for i in (df.columns)],

    ),
    html.Div([
        html.Button(id='submit-button',                
                children='Submit'
        )
    ]),    

])

@app.callback(Output('dt1','data'),
            [Input('submit-button','n_clicks')],
                [State('submit-button','n_clicks')])

def update_datatable(n_clicks,csv_file):            
    if n_clicks:                            
        dfgb = df.groupby(['state']).sum()
        data_1 = df.to_dict('rows')
        return data_1

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

Another way: return the whole DataTable

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

df = pd.read_csv(
        'https://gist.githubusercontent.com/chriddyp/'
        'c78bf172206ce24f77d6363a2d754b59/raw/'
        'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
        'usa-agricultural-exports-2011.csv')

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

app.layout = html.Div([
    html.Div(id="table1"),

    html.Div([
        html.Button(id='submit-button',                
                children='Submit'
    )
    ]),    

])

@app.callback(Output('table1','children'),
            [Input('submit-button','n_clicks')],
                [State('submit-button','n_clicks')])

def update_datatable(n_clicks,csv_file):            
    if n_clicks:                            
        dfgb = df.groupby(['state']).sum()
        data = df.to_dict('rows')
        columns =  [{"name": i, "id": i,} for i in (df.columns)]
        return dt.DataTable(data=data, columns=columns)


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

I referred to this example: https://github.com/plotly/dash-table/blob/master/tests/cypress/dash/v_copy_paste.py#L33

edited Mar 26, 2019 at 17:07

answered Mar 22, 2019 at 18:28

Lawliet

1,60212 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

sparrow Over a year ago

Thanks @Lawliet. I'm sorry I wasn't more clear in my question, I've edited it, I'm trying to return the groupby table using "dash_table" not "dash_table_experiments". I suppose I can just use dash_table_experiments instead though, as your example shows.

sparrow Over a year ago

Thanks @Lawliet! Your solution works for returning dfgb, you just forgot to return that from the callback in your example, should be: data = dfgb.to_dict('rows')

sparrow Over a year ago

A quick (optional) follow up question :). Do you know how to give the datatable the ability to be copied to the clipboard when it's contents are highlighted with the mouse, then ctrl+C?

Ilya Berdichevsky Over a year ago

@sparrow Shift and mouse clicks (or Shift and arrows) will let you highlight and Ctlr+C will copy to clipboard. This functionality exist by default.

yts61 Over a year ago

@Lawliet, i have a similar question here: stackoverflow.com/questions/60556896/…, if you are free, please drop by and have a look, thank you.

shivsn · Accepted Answer · 2019-03-26 18:45:19Z

2

You almost got it done just with minor modification in update_datatable it should work fine (not tested):

def update_datatable(n_clicks,csv_file):            
    if n_clicks:                            
        dfgb = df.groupby(['state']).sum()
        return html.Div([dash_table.DataTable(
                data=dfgb.to_dict('rows'),
                columns=[{'name': i, 'id': i} for i in dfgb.columns],
                style_header={'backgroundColor': "#FFD700",
                              'fontWeight': 'bold',
                              'textAlign': 'center',},
                style_table={'overflowX': 'scroll'},  
                style_cell={'minWidth': '180px', 'width': '180px',
                        'maxWidth': '180px','whiteSpace': 'normal'},                        
                         filtering=True,
                 row_selectable="multi",
                 n_fixed_rows=1),
               html.Hr()
        ])

answered Mar 26, 2019 at 18:45

shivsn

7,9141 gold badge28 silver badges34 bronze badges

2 Comments

sparrow Over a year ago

Thanks! that works. A quick (optional) follow up question :). Do you know how to give the datatable the ability to be copied to the clipboard when it's contents are highlighted with the mouse, then ctrl+C?

yts61 Over a year ago

@shivsn i have a similary question here: stackoverflow.com/questions/60556896/…, if you are free, please drop by and have a look, thank you.

Alex 4 Cologne · Accepted Answer · 2024-05-21 11:14:41Z

As of 2024-05-21 with Python 3.12.3, Pandas 2.2.2 and Dash 2.16.1 the correct syntax is:

import pandas as pd
from dash import callback, Dash, dash_table, html, Input, Output, State

df = pd.read_csv(
        'https://gist.githubusercontent.com/chriddyp/'
        'c78bf172206ce24f77d6363a2d754b59/raw/'
        'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
        'usa-agricultural-exports-2011.csv')

app=Dash(__name__, title="IHK-Arbeitskräfteradar") 

app.layout = html.Div([
    html.Div(id="table1"),

    html.Div([
        html.Button(id='submit-button',                
                children='Submit'
    )
    ]),    

])

@callback(
    Output('table1','children'),
    Input('submit-button','n_clicks'),
    State('submit-button','n_clicks'),
)

def update_datatable(n_clicks,csv_file):            
    if n_clicks:                            
        dfgb = df.groupby(['state']).sum()
        data = df.to_dict('records')
        columns =  [{"name": i, "id": i,} for i in (df.columns)]
        return dash_table.DataTable(data=data, columns=columns)
        return dash_table.DataTable(data=data)

if __name__ == '__main__':
    app.run(debug=True)

Collectives™ on Stack Overflow

Return a Pandas DataFrame as a data_table from a callback with Plotly Dash for Python

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related