How to create dynamic callback for generated component

Question

I am able to understand how the callbacks work in the dash-table-experiment where the DataTable is part of the app.layout = Div/Html layout.

But how do I create the callback when the DataTable is generated like this and it is not part of the static layout?

def generate_table(tdf, max_rows=200):
    return  dt.DataTable(rows=tdf.to_dict('records'),
             columns=tdf.columns,
             row_selectable=True,
             filterable=False,
             sortable=False,
             selected_row_indices=[],
             id="datatable-gapminder"
            )

If I say

@app.callback(
    Output('datatable-gapminder', 'selected_row_indices'),
    [Input('graph-gapminder', 'clickData')],
    [State('datatable-gapminder', 'selected_row_indices')])
def update_selected_row_indices(clickData, selected_row_indices):
    if clickData:
        for point in clickData['points']:
            if point['pointNumber'] in selected_row_indices:
                selected_row_indices.remove(point['pointNumber'])
            else:
                selected_row_indices.append(point['pointNumber'])
    return selected_row_indices

I get an error

Attempting to assign a callback to the
component with the id "datatable-gapminder" but no
components with id "datatable-gapminder" exist in the
app's layout.

Answer 1

You are getting that error because the component with id datatable-gapminder is not yet in the layout.

If you want to create callbacks for a component which is not yet in the layout, you have to suppress the callbacks exceptions.

app.config.supress_callback_exceptions = True

I think you will also need a function to serve the layout. By default, Dash apps store the app.layout in memory. If you set app.layout to a function, then you can serve a dynamic layout on every page load. See here.

def serve_layout():
    layout = html.Div(
        children=[
            # dt.DataTable()
        ],
    )
    return layout

app.layout = serve_layout