I have a table that lists network switches. The headers are Model, Stack Size, and Modules. If the stack size is greater than 1, I want to be able to add the additional stack members under the lead member and select different models and modules for each stack member. I also want to be able to add rows to the table to add additional lead switches (and their subsequent stack members). In the end, when I hit submit, I need to be able to pull data on the lead switch as well as all the members.

I already have this coded to configure a single lead device and add additional lead devices with a button. I just don't know what is the best way to add the member devices and distinguish between lead and member devices.

What is the best way to accomplish this? Nested tables? Tree grids? Something else? Would want it to look something like this:

Lead Switch Model          Stack Size         Module
---> Stack Member                             Module
---> Stack Member                             Module
Lead Switch Model          Stack Size         Module
---> Stack Member                             Module

This is what I have now...

enter image description here

  • My first thought is to just create additional rows in the table for stack members but not populate the stack size column. If a new stack lead needs to be created, have the Add device button use javascript to create a new table. Just don't know if there is a better/easier way to do this.
    – Netman
    Jun 11, 2020 at 15:43
  • Hey there, welcome to the UX forum on StackExchange :) To get a better understanding: What is the purpose of this table? Why do you want to display these parent-child data? Jun 11, 2020 at 17:08
  • @Constantina, I am trying to build a GUI for provisioning network switches. The first thing to do is find out from the user what model switches they want to deploy. Some switch models are stackable meaning they appear as a single logical unit. You can mix and match models in a stack as long as they are from the same series of switches. So the user picks the primary switch in the stack, decides how many switches are in the stack, and what module the lead switch has if any. If there are multiple stack members, they need to pick a compatible model to add to the stack as well as what module
    – Netman
    Jun 11, 2020 at 17:55
  • In what I have there, I have 1 form with a single table. If I select a stack size greater than 1, I want there to be a new row below it, probably indented slightly, skip the stack size column for that row since it is not the lead switch, but then have the 3rd column to select module. If we click the "Add Device" button, i would want to add another lead switch which that could allow the user to configure another stack of switches.
    – Netman
    Jun 11, 2020 at 18:00
  • Is there a limit as to how many stack elements a lead switch could have? What would an average number be, based on user demand? Jun 11, 2020 at 20:01

1 Answer 1


The way you described them above it sounds more like choosing a lead model among other equal-level models (siblings), in this case called "stack members". The lead and stack members do not share a parent-child relationship. Is that correct?

Based on the 'sibling' understanding, my suggestion is displayed in the mockup below:

  • Considering your table is fairly short on columns, you could potentially have two side-by-side contents (equal width - importance)
  • The content on the left contains a list of all the lead switch models only. An assumed natural approach would be that the user scans the list from the top and if they don't find a model they want they'll reach the bottom of the list where they can choose to add a new model.
    When they add a new model, the stack-size is by default one (1) - you don't have to set it manually.

  • When they click on a pre-existing lead model or a newly added lead model in the list, the details of the lead and its stack-members shall appear on the content panel on the right-hand side of the list.

  • The content panel on the right allows the user to view the lead model with its stack members. The user can then either remove them, add a new stack member, or re-assign the 'lead' role to one of the other stack members. The stack-size is treated as a counter, and its counter-number is automatically adjusted based on the stack members added/removed.

P.S. this idea is based on email-apps desktop-layout, which can be flexible enough for different screen sizes, and also flexible in case of displaying large numbers of stack members.

I'm not saying this is the most appropriate option, but it is one of the options you could potentially test remotely with users and other colleagues. My concern with nested tables in this instance (considering the number of different actions a user can take), is that they might appear unecessarily complex and/or cluttered.


download bmml source – Wireframes created with Balsamiq Mockups

  • Thank you so much for this. I am going to explore something like this. Thanks again.
    – Netman
    Jun 18, 2020 at 14:51

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.