Has anyone come across data table UI design/patterns that also show some form of hierarchy? I am trying to think of examples similar to Excel, but used in web applications or mobile apps because it seems to be more prevalent in traditional desktop applications but not web applications, as many designs tend to favor flatter and simpler ways to present information.

Are there any clear usability issues/concerns with using data tables to present hierarchical information compared to traditional tree view or even the accordion UI component?

Are there also technical constraints that prevent it from being used more often?

enter image description here

4 Answers 4


I think what you are looking for is a treetable pattern http://quince.infragistics.com/Patterns/Tree-Table.aspx

The advantage of tree tables is that it can show the same information that a table can show in addition to hierarchy of elements. Usually users with technical background like using tree tables because it gives them more visibility than a tree or a table alone.

It's definitely more common in desktop applications that on the web.


ExtJs Toolkit offers two of these. You can see them in action here.

Other than that these are not easy to implement and thus not part of many toolkits, I don't see any technical constraints.


The ExtJS Treegrid

Which is essentially a tree with extra columns.

Good when parents and children are all the same type.

Group Feature on Grid

A screenshot of an ExtJS Grid with grouping raws.

This is good when there's a two-level depth relationship (like Category -> Items).


A usability concerns I saw are:

  • lack of direct manipulation in Excel-like grouping (besides Excel creates headers below the group by default, summary-like, but it's beyond the question)
    enter image description here
  • for some users relationships between header and + button are unobvious as they located rather distantly

Treeview and accordion are the direct manipulation controls, as content and functionality are in one place. Triangles or + signs near the content are clues of their interactiveness.


There is an application called Treesheets. It is not beautiful, and the presentation cannot be used 1:1 for web, but if you spend some time playing around with it, you will get the hang of what it feels like to work with such data in a UI designed specifically for it (as opposed to the clunky Excel solution) and where the problems are. Note that the user has to go through a very short tutorial (took me 10 or 15 minutes the first time) before starting to use it efficiently, so you will probably need some simplifications if you are allowing editing. Non-editing is much easier, as the tutorial mostly covered shortcuts for navigating and creating a new hierarchy level, or deleting the previous one.

On the side, it is also a very useful application for writing down information whose structure you don't know before you start writing (e.g. taking notes or creating an outline from scratch).

  • +1 for a very interesting program. Definitely would like to see something like this incorporated into Microsoft OneNote.
    – Michael Lai
    Sep 10, 2013 at 22:31

Your Answer

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

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