What is a Tree Table?

One of the most advanced GUI Components is the treetable. It looks really fancy, but what exactly is it and what scenarios can it be used with?

As the name suggests a treetable is a melding of a table and tree. The left side behaves like a tree component, nodes can be expanded or collapsed, and the right side behaves somewhat like a table with columns and rows of data.

To understand a treetable lets first have a look at a standard tree component.


A tree component is probably most famously known from Windows Explorer. Visually it is a series of indented nodes that may or may not be expandable.

There are two main ways of using a tree to represent a data structure, and then there is everything in between.

(1) Hierarchy

First it can represent a hierarchical structure. This is very evident in Windows Explorer. A folder can contain many folders, which can also contain many folders, and so on.

As a class diagram it would look like this:



This is a classic Composite Pattern. Each object instance can contain a number of instances of itself.

(2) One-to-Many

A tree component can be used to represent a one to many relationship. For example the Devices Manager in Windows lists a number of devices for a computer:



This model will only expand to one level.

More than one one-to-many relationships can also be represented. Each entity that contains a further entity can be expanded:




(Make sure to use icons judiciously to clearly illustrate to the end user the different entities. In the above example the device nodes should use a different icon).

(3) Combination

The previous two structures can be combined :



As you can see each folder can contain an instance of itself, however a file cannot, and can only be a leaf node.


A treetable supplies extra columns to the right of the tree. The intention is to illustrate that all the nodes and leafs in the tree share properties represented by the columns.

The below example shows how things might look using the ‘combined structure’ example above.


The property ‘type’ is common across all entities. However the property ‘size’ is common only to the file entity. Notice the empty space in the ‘size’ column for the folders.


A disadvantage of a treetable is that you can’t sort over all rows like in a normal table.

If you were to sort all the rows, then you would break the tree.

In Treetables you can only sort groups of children in nodes. For example in our previous example performing a sort on ‘size’ would only have an effect on a group of children belonging to a node like so :



Filtering a treetable presents the same issues as filtering a standard tree.

In a traditional table, performing a filter operation simply removes rows from the table. However when filtering a tree, the structure needs to be maintained all the way down to the root.

This maintaining of nodes in a filtering operation can create a lot of visual fluff.

For example :

Final Points

When to use:

· Hierarchical relationship with properties that need to be shown
· One-To-Many or Combination where the entities share a lot of properties.

When not to use:

· A full sort is required of rows.
· Small number of leafs, of which properties to be shown do not exist in the hierarchy entity. Ie A lot of real estate on the widget is not used. See below:



Framework Examples:

Posted in Usability | Tagged , , | Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">