Dynamic update of rows in dash bootstrap component based grid layout

Dash Python
1

I am using the grid layout functionality of dash-bootstrap-components to update the content of rows like follows:

import dash_bootstrap_components as dbc
import dash_html_components as html

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.GRID])

app.layout = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(html.Div("Row 0, Column 0")),
                dbc.Col(html.Div("Row 0, Column 1")),
                dbc.Col(html.Div("Row 0, Column: 2")),
            ]
        ),
        dbc.Row(
            id="row-1",
        ),
        dbc.Row(
            id="row-2",
        ),
    ]
)

@app.callback(
    Output('row-1', 'children'),
    [Input('interval-component', 'n_intervals')],
)
def update_row_1(n):
    row_children = [
                dbc.Col(html.Div("Dynamic content for Row 1, Column 0")),
                dbc.Col(html.Div("Dynamic content for Row 0, Column 1")),
                dbc.Col(html.Div("Dynamic content for Row 0, Column: 2")),
            ],
    return row_children

# equivalent callback for row 2

if __name__ == '__main__':
    app.run_server(debug=True)

Everything works perfectly fine.

Now I want to update the content of several rows given that the number of rows is not static but dynamic. How can I achieve this (still 1 callback for 1 row, single callback for all rows, …)?

2

My solution right now is to put the rows to update into a Div and update the Div’s children via a single callback function:

app.layout = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(html.Div("Row 0, Column 0")),
                dbc.Col(html.Div("Row 0, Column 1")),
                dbc.Col(html.Div("Row 0, Column: 2")),
            ]
        ),
        html.Div(
            id="rows",
        ),
    ]
)

@app.callback(
    Output('rows', 'children'),
    [Input('interval-component', 'n_intervals')],
)
def update_rows(n):
    div_children = []
    for r in range(<NUMBER-OF-ROWS>):  # the number of rows can be changed in between calls of the callback function
        row_children = generate_row_children_list()  # the's where the magic happens, has to return [dbc.Row(...), dbc.Row(...), ..., <LAST-ROW>]
        row = dbc.Row(
            row_children,
        ),
        div_children.extend(row)
    return div_children
3

The interval-component needs to be defined in the childrens of some html.Div (seems to be irrelevant which one) e.g.

import dash_bootstrap_components as dbc
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.GRID])

app.layout = html.Div(
    [
        dbc.Row(
            [
                dbc.Col(html.Div("Row 0, Column 0")),
                dbc.Col(html.Div("Row 0, Column 1")),
                dbc.Col(html.Div("Row 0, Column: 2")),
            ]
        ),
        html.Div(
            id="rows",
        ),
        dcc.Interval(
            id='interval-component',
            interval=100,  # in milliseconds
            n_intervals=-1,
        ),
    ]
)

# ... code of solution

The interval-component does not have to be defined in the parent html.Div in which the “to be updated” html.Div (id="rows) is located. However for a html.Div specific update rate it needs to be defined in the html.Divs parent childrens, with pseudo code as follows:

app.layout = html.Div([
    html.Div([
        html.Div(id="rows"),
        dcc.Interval(
            id='interval-component',
            interval=100,  # in milliseconds
            n_intervals=-1,
        ),
    ])