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

Tree structure

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.

enter image description here

  • I don't understand what you want exactly.
    – citizen81
    Mar 9, 2017 at 12:28
  • Sotty, I was not able to comment, because I don't have enough 'reputation'. So wbit winy to get downvoted, but ok. My business is about building 'document trees', so I wast trying to understand what you meant in more detail. Indeed if it should be within a table. And if so: why?
    – citizen81
    Mar 10, 2017 at 11:41
  • @citizen81 I understand, but I am sure that you will find to be upvoted again! It should be within a table because our user mostly uses tables in their work in order to keep a overview of what is happening. The best design solution has 2 representations: 1 tree representation in a table & 1 tree representation probably in a bigger window. Is it more clear now? Mar 10, 2017 at 11:57
  • Hi Dimitra, I'm really trying to understand it, but unfortunately I still don't. The image you use in your post is the tree representation? The argument that a table is needed to keep an overview I don't understand. But if this is the criteria Dominik did a good effort to make it more clear.
    – citizen81
    Mar 13, 2017 at 10:22
  • @citizen81 You are right about the image. I decided to edit the question to make it more clear :) Mar 13, 2017 at 12:05

1 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:

enter image description 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


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.

  • This is a very good idea, but I don't want to create another row for each element. I have edited my question. The problem is that there can be 2 or more trees in my data-grid structure Mar 13, 2017 at 12:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.