I am working on an interface that in similar in idea to the following:
The user selects a continent from a list (dash data grid with selectable rows)
The previous step initializes a callback that displays countries (again with selectable rows in a data grid) from that continent
Selection of one of the countries lists 5 major cities of the country
Selection of the country gives out its population
When the user selects Europe ==> Germany ==> Munich, the end result is 1.472 million.
Now when the user goes back to the first table and click on Asia, the second table changes to countries in Asia but the table with cities and the population is still from the last iteration (meaning there is still a table of German cities and population of Munich).
How can I make sure that selection from a previous table clears out all subsequent divisions before moving forward?
Is there any specific reason you use Dash Data Grid for selecting? Something like dcc or dbc Dropdown or dmc Select would be much more suitable for this task. You can then dynamically display this components.
When Continent callback is triggered it creates Countries component, Cities component don’t exist
When Countries callback is triggered it creates Cities components
When Cities callback is triggrred it display population
Hi @martin2097 ,
I used the example of countries to simplify what I am doing. I cannot use a dropdown menu as a selectable row in the Dash Data Grid contains more information than just the continent (or country) name. And the user also needs to be able to see what they selected + the options they had at the end when they save the webpage.
Is there no feasible way to do it whilst working with Data Grids?
Well you can always to the same I explained for dropdowns just with the tables If I understood you correctly you just need to target containers and send the whole tables in the output and errase the containers that should be empty.