Data Table creation with Dash Framework based on dropdown value

Dash Python
1

I am trying to build a dashboard where user can choose a pandas dataframe from the dropdown. Also they can search, sort, see the summary and download the data.

I have designed the dropdown many with the file names. Also added the dash.DataTable component. But I am not able to call the dataframe based on the value selected from dropdown.

Code:

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


#df = pd.read_csv('data/chronos.csv')

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Dropdown(
        id='demo-dropdown',
        options=[
            {'label': 'Chronos_data', 'value': 'chronos.csv'},
            {'label': 'CN_data', 'value': 'cn.csv'},
            {'label': 'Expression_data', 'value': 'expression.csv'}
        ],
        value='dataset'
    ),
    html.Div(id='dd-output-container'),
    dash_table.DataTable(
        id='datatable-interactivity',
        columns=[
            {"name": i, "id": i, "deletable": True, "selectable": True} for i in df.columns
        ],
        data=df.to_dict('records'),
        editable=True,
        filter_action="native",
        sort_action="native",
        sort_mode="multi",
        column_selectable="single",
        row_selectable="multi",
        row_deletable=True,
        selected_columns=[],
        selected_rows=[],
        page_action="native",
        page_current= 0,
        page_size= 15,
        export_format='xlsx',
        export_headers='display',
        merge_duplicate_headers=True
    ),
    html.Div(id='datatable-interactivity-container')
])

@app.callback(
    Output('datatable-interactivity', 'data'),
    [Input('demo-dropdown', 'value')]
)
def update_output(dropdown_val):
    df_data = pd.read_csv('data/'+dropdown_val)
    return df_data

@app.callback(
    Output('datatable-interactivity', 'style_data_conditional'),
    [Input('datatable-interactivity', 'selected_columns')]
)
def update_styles(selected_columns):
    return [{
        'if': { 'column_id': i },
        'background_color': '#D2F3FF'
    } for i in selected_columns]




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



Error: line 27, in <module>
    {"name": i, "id": i, "deletable": True, "selectable": True} for i in df.columns
NameError: name 'df' is not defined

Thanks in advance.

2

Hi,

The error indicates that the dataframe df is not defined when the app layout is created. So you should not initialize dcc.Graph with parameters that depend on the underlying dataframe, namely data and column. Just remove those parameter from dcc.Graph in the layout and replace the callback by:

@app.callback(
    Output('datatable-interactivity', 'data'),
    Output('datatable-interactivity', 'columns'),
    [Input('demo-dropdown', 'value')]
)
def update_output(dropdown_val):
    df_data = pd.read_csv('data/'+dropdown_val)
    return df_data, 
        [{"name": i, "id": i, "deletable": True, "selectable": True} for i in df_data.columns]
1 Like
3

thanks man. I will implement this.