How to create a reactive table with dynamic data?

Dash Python
1

I am trying to create a reactive table similar to

However I need the data in the table to be able to update, so, I I created a Div instead and pass the data table children.

app.layout = html.Div([
    ....
    html.Div(id='tbl_overview_div'),
    dcc.Graph(id='gr_overview'),])


def getTableOverview(*args):
    ...
    return dte.DataTable(id='**tbl_overview**', rows=df.to_dict('records'), columns=columns, row_selectable = True, filterable = True, sortable = True, selected_row_indices = [])


@app.callback(dd.Output('tbl_overview', 'children'), dependencies)
def update_graph(*args):
    return [] widgets.getTableOverview(args)


@app.callback(
    dd.Output('tbl_overview', 'selected_row_indices'),
    [dd.Input('gr_overview', 'clickData')],
    [dd.State('tbl_overview', 'selected_row_indices')])
def update_selected_row_indices(clickData, selected_row_indices):
    ....

@app.callback(
    dd.Output('gr_overview', 'figure'),
    [dd.Input('tbl_overview', 'rows'),
     dd.Input('tbl_overview', 'selected_row_indices')])
def update_figure(rows, selected_row_indices):
    ....

The problem I am having now is that dash throws

dash.exceptions.NonExistantIdException: 
Attempting to assign a callback to the
component with the id "tbl_overview" but no
components with id "tbl_overview" exist in the
app's layout.

I assume this is because the children are not known when the dependency tree is created. How can I work around this? Any suggestions?

2

What worked is to pre-create the table with some fake data and then pass the actual rows via the callback