Dash DataTable cannot read property

My process involves three steps.

1. Drop down component
2. Call back to create DataTable based on Drop Down component value selected
3. Call back to generate Graph based on a selectable row from the Data Table

Note that I didin’t put anything in the code for the Line graph just to show that the error message appears anyways. When I something to render, the same error message occurs

I keep getting the following error message;

TypeError: Cannot read property ‘0’ of undefined

My code is as follows:

app.layout = html.Div([

                html.Div([
                    html.Label('Select a simulation:'),
                    dcc.Dropdown(
                        id = 'sim-filter',
                        options = simulations,
                        value = df['SimId'].max(),
                        clearable = False,
                        multi= False
                        )
                    ], style={'width': '15%', 'padding':'5px 5px'}),
                html.Div(
                    DataTable(
                        id='events-table',
                        filter_action = 'native',
                        sort_action = 'native',
                        row_selectable = 'single',
                        style_cell=dict(textAlign='left'),
                        page_action='native',
                        page_current=0,
                        page_size=10
                        )
                ,style={'width': '50%'}),
                html.Div(
                        id='lineGraph-container', children="hello", style={'width': '49%', 'display': 'inline-block', 'padding': '0 5'})
])

Callbacks:

@app.callback(
    Output('events-table', 'columns'),
    Output('events-table', 'data'),
    Input('sim-filter', 'value')
    )

def create_event_table(selected_sim):
    dff_sessions = df_sessions[df_sessions.SimId == selected_sim].copy()
    cols = [
            {'name': 'Simulation Time', 'id':'SimulationTime', 'type' :'numeric'},
            {'name': 'Source', 'id':'Source', 'type' :'text'},
            {'name': 'Event Type', 'id':'EventType', 'type' :'text'}
        ]
    data=dff_sessions[['SimulationTime', 'Source', 'EventType']].to_dict('records')
    return cols, data

@app.callback(
    Output('lineGraph-container', 'children'),
    Input('events-table', "derived_virtual_data"),
    Input('events-table', "derived_virtual_selected_rows"),
    Input('sim-filter', 'value')
)

def update_line_graph(all_rows, selected_rows, selected_sim):
    print(all_rows, "\n", selected_rows)

1 post - 1 participant

Read full topic