How to create dynamic callback for generated component - plotly-dash

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

Answer 2

I don't know, if that is currently at all possible with dash. However you might consider creating an empty data table component, and simply updating all it's properties in your call-back (except the id of course :)). If users are not supposed to see the empty data table on startup, you can set it as a hidden div in the beginning, and make sure it becomes visible in the callback.
If you decide to try this approach, make sure you return meaningful values each time the callback for creating the data table is called. Even if these values are empty.