I am tasked with designing a modal screen where data scientists and business analysts should select different tables from database and then if necessary narrow down the selection by (optional) choosing specific table columns.

There can be up to hundred of columns per table. This is why Im considering splitting the views into 2 boxes where the first one is for tables and then the other one dynamically loads columns and has a search capability instead of Version B, where everything is together.

My question is whether you know of any other possible solution (modal window with limited space friendly) than this or whether you would have any design feedback for this.

I also intend doing some usability session, but since i am very limited with time. I wanted to seek comments from this community as well.

enter image description here

2 Answers 2


I think I would go with Version A.

Disadvantages of version B

  • Users will have to expand/close a lot of groups
  • It is a bit weird that the search only works on tables

I think you should use the indeterminate state for the checkbox "Enrollment_..." in both versions. Or is this a deliberate decision?

checkboxes in different states

  • to be honest, im not that familiar with an indeterminate state of the checkbox and his usage.
    – Jakub
    Nov 10, 2020 at 10:49
  • The indeterminate state shows that of the child checkboxes (columns in your case) not all, only some of them have been selected. Gmail also uses it for its batch actions.
    – Nash
    Nov 10, 2020 at 12:02

If I understand your solution right the columns list is not filled with all the columns of the selected (checked) tables but only if a table has focus. Otherwise I do not understand the first screen in Version A.

But this solution would give you some problems: the expected behavior on click on a label of e checkbox would be that the checkbox value is toggled. The state of the checkbox on the second screen of version A does not exist. I would read this state as having focused this checkbox by keyboard and hitting space would toggle the selection state of the checkbox.

What I would suggest is to show all the columns of all selected (checked) tables. But then it would be necessary to extend the column names with the table name since it is not unlikely that the same column name appears in several tables an might not represent the same value. The user needs the info of column name AND table name to choose the right column.

  • thank you for this feedback, you are right this would have been expected default behaviour of checkboxes i guess, my logic was maybe i could make ticking checkboxes only with the icon and the name would select the table to show columns. I like your solution too, what i am afraid of is that this will result in have 200+ columns to select from since tables can be really big
    – Jakub
    Nov 16, 2020 at 13:47

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.