Issue loading Plotly Dash datatable with drop downlist selection

Question

i have an issue loading the dash data table upon dropdownlist selection. Chart is able to load but not the dash datatable. There is no error thrown. Any one able to help advise what is the error here? Thanks in advance.

Below is the code snippets

''' server = flask.Flask(name) app = dash.Dash(name, server=server)

# Populate the layout with HTML and graph components
app.layout = html.Div([
    html.H5("SALES Report"),

    #Drop Down
    html.Div(
        [
            dcc.Dropdown(
                id="SALESRange",
                options=[{
                    'label': i,
                    'value': i
                } for i in SALES_Range_Options],
                value='All SALES Range'
            )
        ],
        style={'width': '25%',
               'display': 'inline-block'}),
    #CHART

    html.Div([dcc.Graph(id='summarybargraph') ]),

    #TABLE
    html.H6("Details list"),
    html.Div([
    dash_table.DataTable(id='detailsresults')  ]), 

])

# Add the callbacks to support the interactive componets
@app.callback(
    Output('summarybargraph', 'figure'),
    [Input('SALESRange', 'value')])

def generate_graph(SALESRange):

    if SALESRange == "All SALES Range" : 
        df_plot = SALES_Range_CAT_df.copy()

    else:
        df_plot = SALES_Range_CAT_df[SALES_Range_CAT_df['SALES_RANGE'] == SALESRange] 

    trace1 = go.Bar(x=df_plot['SALES_RANGE'], 
                    y=df_plot['Patron_count'], 
                    name='No of Patrons',
                    text =df_plot['Patron_count'],
                    #textposition='auto',
                    #marker_color=colors # marker color can be a single color value or an iterable
                   )

    return {
        'data': [trace1],
        'layout':
         go.Layout(
            title='SALES Range for {}'.format(SALESRange)
            )
    }

def generate_table(dataframe):
    '''Given dataframe, return template generated using Dash components
    '''
    return html.Div( [dash_table.DataTable(
                #id='match-results',

                data=dataframe.to_dict('records'),
                columns=[{"name": i, "id": i} for i in dataframe.columns], 
                style_header={'backgroundColor': "#FFD700",
                                  'fontWeight': 'bold',
                                  'textAlign': 'center',},
                style_table={'overflowX': 'scroll'},  
                 style_cell={'minWidth': '180px', 'width': '180px',
                            'maxWidth': '180px','whiteSpace': 'normal'},                        

                 row_selectable="multi"),
                   html.Hr()
        ])


@app.callback(
    Output('detailsresults', 'data'),
    [
        Input('SALESRange', 'value'),
    ]
)

def load_results(SALESRange):
    results = GR_df[GR_df['SALES_RANGE'] == SALESRange]
    return generate_table(results)


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

'''

Rudertier Rudertier · Accepted Answer · 2020-04-07T08:12:17

I think the problem is, that your generate_table function returns a Div. Your Callback tries to add that Div to your DataTable as data.

In the layout try changing your chart to

#TABLE
html.H6("Details list"),
html.Div(id='detailsresults')),

And change your callback to:

@app.callback(
    Output('detailsresults', 'childern'),
    [Input('SALESRange', 'value'),])

Issue loading Plotly Dash datatable with drop downlist selection

1 Answers