Updating a variable number of DataTables created in another callback

Dash Python
1

Hello,

I’m writing a Dash app to get live updates on graphs that contain information from another python program that is executed simultaneously. The issue I’m facing right now is that the number of graphs in my app is variable as it depends on the other python program. I currently have one callbacks that receives information from the program and depending on it creates a variable amount of datatables:

app.layout = html.Div(children=[
	html.Div(id="div"),
	dcc.Interval(
    		id='interval',
    		interval=1000,
    		n_intervals=0)
])
# update datatables in every interval
@app.callback(
    Output('div', 'children'),
    Input('interval', 'n_intervals'),)
def update_dt(n_interval):
    df_list = get_dataframes(...)

    for i, df in enumerate(df_list):
        dt = dash_table.DataTable(id=f"dt_{i}",  data=df.to_dict('records'), row_selectable="multi")
        dt_list.append(dt)

    return dt_list

As can be seen I update the children attribute of my html.Div(id=“div”) and insert datatables with unique ids and data. Now I want to write a callback function that enables me to change the style of one specific datatable in case that the user selects rows of this table. The task itself is no problem if I have only one datatable of which I know the id/which is defined in app.layout but I do not know how to approach this issue for the specific set up of my app. I have tried to

  • write a callback function with Output('div', 'children'), Input('div', 'children') which failed because output and input cannot be the same attribute (I think). Plus I do not know if a callback defined as this one would be called when a derived_viewport_selected_row_ids attribute of one of the datatables changes as that is not its input.

  • integrate the functionality within the existing callback method above. But this would only work if I defined an additional input Input('div', 'children') (as I would need to access the current state of the div.children) which leads to the same problem.

Is there a way to access the current state of a component of my app other than using it as an Input of a callback function? I tried to access it via app.layout.children[idx] but this way I only get back the original html.Div I defined in app.layout which has an empty children attribute.

I hope I got across what issue I’m facing and if so that some of you can help guide me in the right direction :slight_smile:

Thanks in advance!

2

HI @ttd
If the number of graphs is not pre-defined because it depends on user interaction or an external program, one good way to tackle this is through the Dynamic (pattern-matching) callback. Have you tried that already?

1 Like
3

I did not try that before but it works now, thank you so much!

1 Like