Tree values in a table

Question

In my team, we are working on a visualization of a tree structure on a table. The current design looks like in the picture:

The user can only see the closest tree branches but not the further ones. Is there any good advice on showing tree structure on a table?

The user has the option to open up the tree and then view the whole of it, but I am interested in the tree representation on the table.

Edit: Trying to make it more clear, imagine that I have 1 product with a specific ID. This product, in this case, ink cartridge can belong to different devices, which devices can belong to different to a higher level of devices and so on. I would like to show the dependencies on a table. So far with my design I am in the stage of the following image. I wouldn't like to create another row for each tree element because one entry can have 2 trees for example.

Answer 1

The picture is quite small but if I understand you correctly, you want to show a tree-like structure within a data table, something like e.g. here:

You can play around with it here, by the way: http://webix.com/demo/treetable/editing/

I believe the whole idea behind expanding and contracting the branches is to keep more detailed information hidden before diving into a particular context of a branch.

Seeing the whole tree, on the other hand, would allow getting some "bird overview" of how big it is, and how the data is structured within it. But, at the same time, it would cause a visual overload.

There are two ways out of it:

• using another visualisation of the structure,
• giving User some bits of information regarding how big the structure is within a branch.

For the latter, I believe you could do one or both of these:

Displaying a number of child elements for example like this:

[+] Parent element (42/342)

That would tell the user that there are 42 elements at the lower level, and 342 of all of all, at all the levels within the currently collapsed branch. Of course, this would need a convention for displaying this data, as these are not clear at the first glance. But having communicated it to the users, I believe it would be clear for them.

If the structure is big, though, I would suggest displaying the "richness" of the content of a branch in a more visual way. This means that branches at the same level would take different representation. For example:

• a branch containing zero elements at the lower levels would use a grey & tiny text,
• a branch containing an average number of elements would use normal text,
• a branch with an unusually high number of sub-elements would use heavier, or bigger font.

An example:

[+] Parent element with average number of subitems

[+] Parent element with unusually high number of subitems

etc.

You could tweak it to your needs, but I believe this way you would be able to at least visually indicate how the data is distributed at the lower levels, without expanding them.

Let me know if it helps.