Dash DataTable cannot read property

Dash Python
1

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)