I'm making a webapp, that will mostly be used on desktop, is not intended to be used in mobile (at least, the dashboard area) - so that's no problem for me...

Let's say I have some data-model that is like to "territoy subdivision" - Please forgive my way to write English.

To simplify, let's say I have some users and some countries, but countries have states and states have cities!

One user can have a relation with N countries (but not necessarily all).

One countries can have N states (but not necessarily all).

One state can have N cities (but not necessarily all).

So, when I display a user information I got a very big trouble, because, is probably to get that:


Phillip has two countries assigned The first country has only one state that has only one city. The second country has three (3) states and in mean, each state has 30 cities...

My first try was to display the information this way:


Country1 | State1 | City1
Country2 | State2 | City2
Country2 | State2 | City3
Country2 | State2 | ...
Country2 | State2 | City32
Country2 | State3 | City33
Country2 | State3 | City34
Country2 | State3 | ...
Country2 | State3 | City63
Country2 | State4 | City64
Country2 | State4 | City65
Country2 | State4 | ...
Country2 | State4 | City94

But this is horrible, in matters of "redundancy" and "order", btw the title says "Countries assigned and instead of showing 2 records, I'm showing almost 100...

My second try was to make nested tables, I will try to ASCCIfy my idea below:

Please note that this one is another example, not related to previes example, to simplify...

|           |          |        |
| COUNTRY1  |  STATE1  |  CITY1 |
|           |          |        |
|           |          |  CITY2 |
|           |  STATE2  |--------|
|           |          |  CITY3 |
| COUNTRY2  |----------|--------|
|           |          |  CITY4 |
|           |  STATE3  |--------|
|           |          |  CITY5 |

Here looks very pretty, but the problem goes when you got more a considerable number of cities, so you will get lost in which state or country belongs to.

My last try (not implemented) was thinking about accordeon, but I really don't know. I would love to hear the recommendations of expert designers as the people of this community.


Note: Please feel free of re-tag this question.

1 Answer 1


How about using Expand(+) and Collapse(-) signs to show the records in a tree such that in the start user can only see Countries and then as he keeps going down a level he can see the relevant state and cities.


  • is a good idea, actually I found a disjunction in my model, is more complex than I described, is differently, but anyway this will work. Did you know some Expand/Collpase tree control for Bootstrap 4?
    – alessadro
    Jan 18, 2018 at 6:13
  • This seems OK: gijgo.com/tree/demos/bootstrap-4-treeview
    – alessadro
    Jan 18, 2018 at 6:25
  • I will accept this answer, but I'm open to hear another alternatives.
    – alessadro
    Jan 18, 2018 at 6:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.