A table within a table - Table Inception

Here is a little UX problem I'm working on right now and I'm posting it here because after a lot of research, there are not many good examples of this out there.

The context: Consider this as a web app which is aimed at administrative staff (people who are very much used to spreadsheets). We have a table and we can assume that, depending on the row, you are able to expand the row onClick and get a more detailed breakdown of information.

However, in this particular case the expanded information actually must contain a new set of data which does not correlate exactly to the data of the parent table i.e. the data types in the columns of the parent and child tables are different.

This means we're looking at a table within a table.

Now I have been exploring different things such as:

• Indenting the child table so that it is not inline with the parent columns.



• Changing the shade of background of the table to highlight the contrast in data type.

It still doesn't feel right. The only thing I've come across that looks remotely acceptable is this:

Question: Are there any guidelines or examples of nested tables with different data types that you have come across that simply and clearly solves the problem without creating a mess of an interface?

Answer

When I was on a team working on a similar issue in a data table, the option we ended up with was actually using an overlay (we called it a drawer) that was full height, on the right hand side of the screen. That way the space available for the expanded data was less limited and didn't cause as many visual issues, like pushing content off the screen or having the user lose context. We also made sure that the content in the table that the overlay covered was the least critical. For our users (experts used to dealing with data tables) this concept tested very well.

A similar alternative would a split view, where clicking on a row condenses the original table horizontally and opens a detail view to the right of the table.

Here are some great, general examples of data table interactions

In the above article, the overlay we ended up with is similar to the "Quick View" concept. The split view option is called "Row to details" but we felt it removed too much of the original table's information.