I have a reasonably complex multi-tab dash app. One tab is composed of ten discrete dash datatables. Depending on a dropdown selection, each datatable can have from three to eleven data columns (each datatable will have the same number of columns). I am using the grid system from the dash oil and gas example ( https://github.com/plotly/dash-oil-and-gas-demo/blob/master/assets/s1.css). Currently, each datatable is hardcoded to be six columns wide, two tables to a row. e.g.:
html.Div( [ html.Div( [ html.Label('Table 16a', style=label_style), html.Div(id='table-16a') ], className = "pretty_container six columns" ), html.Div( [ html.Label('Table 16b', style=label_style), html.Div(id='table-16b') ], className = "pretty_container six columns" ), ], className = "bare_container twelve columns", id = "table-container-16ab", ),
While this is acceptable with 3 data column or even 5 data column datatables, it starts to get squished at 7, 9, and 11 data columns. What I would like to do is to be able to do something like adjust the ‘className’ dynamically depending on the number of columns in each datatable dataframe. Something like:
- 3 columns in dataframe - className = “pretty_container five columns” [two tables per row]
- 5-7 columns in dataframe - className = “pretty_container six columns” [two tables per row]
- 9-11 columns in dataframe - className = “pretty_container ten columns” [ONE table per row]
Although I realize that it’s a little more complicated than simply dynamically adjusting className as we are now talking about dynamically adjusting the number of tables on a row. I attempted to do this by making className a global variable (className = class_name) and adjusting it in the callback, but the layout would only read the variable classname on initial load of the app, it would not adjust the className variable based on the callback output.
I am not married to my current system and would happily try a different method entirely if I could get this functionality. Any suggestions? CSS is not my strong suit.