Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Dynamic layout with unknown number of divs for tables and graphs

I am sure there is a topic out there for this, but I couldn’t find one. How do I set up a layout when I don’t know the number of divs? For context, I want to read in a json with data to create tables and graphs. I wouldn’t know the order of them.

You should be able to output to a Div’s children, which would allow for dynamic creation of the layout. If you are planning on referencing components which are dynamically generated, there’s a check you have to disable. I can’t remember the name of it, but it should tell you in the error message when you try to run.

app.layout = html.Div(
	[
   		dcc.Dropdown(
   			id='div_num_dropdown',
   			options=[{'label':i, 'value':i} for i in range (5)],
   			value=1
   		),
   		html.Div(id='div_variable')
   	]
)

@app.callback(
	Output('div_variable', 'children'),
  	[Input('div_num_dropdown', 'value')]
)
def update_div(num_div):
   	return [html.Div(children=f'Div #{i}') for i in range (num_div)]

I believe this is the Dash config option you’re referring to, which you do indeed need to set if you want to either define callbacks before setting the layout, or create callbacks for elements that aren’t yet in the layout.

app.config['suppress_callback_exceptions'] = True

And yeah, Dash will give you an error with that instruction in it if you run up against it.

2 Likes