We have table setup like below. Before you click the plus table looks like enter image description here

Once you click on the plus next to any row, it opens up like this enter image description here

So as you can imagine if the user opens up too many tables page looks cluttered. Also as you see it's not entirely possible to not have entire new table and line up fields because not all columns are identical.

What would be best way of displaying this kind of tabular data without getting user experience hard?


3 Answers 3


I tend to do master/detail pairings. In this case a card with the highlights and a detail table that is populated based on selection.

enter image description here

  • Thank you @RCburn, It's a neat way to do it.. Though, you can't open up multiple options on the left to load on the right. It's like one at a time. And many times our users want to see all of them open so this approach won't really work I don't believe.. : / Commented Jun 3, 2019 at 20:02
  • 1
    Well that would be in how you choose to implement the master select list. Since the subtables seem to use the same columns you could use the master list as a multi-select all the contracts could be loaded to the right.
    – RCburn
    Commented Jun 12, 2019 at 15:22

In order to aide in readability/reduce friction between competing column headers, I tend to use horizontal columns in nested tables, like this: https://datatables.net/examples/api/row_details.html

If your nested data is more than a few rows, though, I recommend creating a navigable "drill-down" system, wherein clicking a row opens an entirely new table view, like this: https://support.klipfolio.com/hc/en-us/community/posts/115004673274-Drill-Down-Tables-from-Basic-to-Advanced

  • Thank you Elliot, interesting approaches. Since it's tend to be so many rows of data horizontal not going to work I don't think. About opening up whole new table, that's what we have currently. It works but when you open so many rows it becomes confusing which column names is for which data.. you know.. Such a weird puzzle haha Commented Jun 3, 2019 at 20:00

Expand only one row with details if you think is too cluttered, collapse the other opened rows (the developer will know how to do this, but check here), but in my opinion, the expected behavior is to see the details for all the row you expand and you don't close.

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.