Black Lives Matter. Please consider donating to Black Girls Code today.
https://www.blackgirlscode.com

Pattern matching callbacks with several components

Is it possible to use pattern matching callbacks to create a arbitrary/dynamic number of “complex” components (i.e. several components that interact with each other in a specific callback structure)?

To demonstrate what my question, here is simple example:

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State
import dash_table
from dash_table.Format import Format, Scheme, Sign, Symbol

table = dash_table.DataTable(
id=‘table-0’,
columns=[
{‘id’:‘string col’, ‘name’:‘string col’, ‘presentation’: ‘input’, ‘type’ :‘text’},
{‘id’:‘numeric col’, ‘name’:‘numeric col’, ‘presentation’: ‘input’, ‘type’ :‘numeric’},],
data=[{‘string col’:‘john’,‘numeric col’:6}],
editable=True
)

button = html.Button(id=‘add-button-0’,children=‘add row’, n_clicks=0)

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

app.layout = html.Div([
table,
button
])

@app.callback(
Output(‘table-0’,‘data’),
[Input(‘add-button-0’,‘n_clicks’)],
[State(‘table-0’,‘data’)])
def add_new_row(n_clicks,data):
if n_clicks>0:
new_row = {‘string col’:‘elephant’,‘numeric col’:44}
data.append(new_row)
return data

if name == ‘main’:
app.run_server(debug=True)

EDIT - I can’t get the indentation to work for my code here so here is a screenshot:

I would like to have a button (one like the ‘ADD FILTER’ button in the first example on https://dash.plotly.com/pattern-matching-callbacks) that can create an arbitrary number of the button/table pairs specified in the quoted code above.

Is there a way to do this?

The pattern-matching callbacks appear to be almost appropriate, but it doesn’t appear the arbitrary components can have multiple simple components with user-defined callbacks amongst the simple components.