UI Patterns and Techniques

Tree-Table


From Outlook Express's news reader

Use when:

The UI displays multivariate information, so a table works well to show the data (or allow them to be sorted, as in Sortable Table). But the items are primarily organized as a hierarchy, so you also want a tree, or outline, to display them.

Why:

Combining the two data-viewing approaches into one gives you the best of both worlds, at the cost of some visual and programming complexity. You can show the hierarchy of items, plus a matrix of additional data or item attributes, in one unified structure.

How:

The examples show what you need to do: put the tree (really an outline) in the first column, and the item attributes in the subsequent columns. The rows -- one item per row -- are usually selectable. Naturally, this can be combined with Sortable Table to produce a more browsable, interactive structure.

This technique seems to have found a home in email clients and news readers, where threads of discussion form treelike structures.