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:

enter image description here

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?

Tags: