Live Demo

TreeTable is an extension of the Table component with support for a tree-like hierarchy in the first column. As with Tree, the hierarchy is determined by the parent-children relationships defined in the Container.Hierarchical interface. The default container is HierarchicalContainer, but you can bind TreeTable to any container implementing the interface.

The TreeTable component

As with Tree, you can define the parent-child relationships with setParent(), as is shown in the following example with numeric item IDs:

TreeTable ttable = new TreeTable("My TreeTable");
ttable.addContainerProperty("Name", String.class, null);
ttable.addContainerProperty("Number", Integer.class, null);

// Create the tree nodes and set the hierarchy
ttable.addItem(new Object[]{"Menu", null}, 0);
ttable.addItem(new Object[]{"Beverages", null}, 1);
ttable.setParent(1, 0);
ttable.addItem(new Object[]{"Foods", null}, 2);
ttable.setParent(2, 0);
ttable.addItem(new Object[]{"Coffee", 23}, 3);
ttable.addItem(new Object[]{"Tea", 42}, 4);
ttable.setParent(3, 1);
ttable.setParent(4, 1);
ttable.addItem(new Object[]{"Bread", 13}, 5);
ttable.addItem(new Object[]{"Cake", 11}, 6);
ttable.setParent(5, 2);
ttable.setParent(6, 2);

Some container types may allow defining hierarchies if the container data itself, without explicitly setting the parent-child relationships with setParent(). These containers should be used if there is going to be a lot of data. Setting up a Container.Hierarchical before setting it to the TreeTable will improve the initial performance.

Unlike Tree, a TreeTable can have components in the hierarchical column, both when the property type is a component type and when the tree table is in editable mode.

For other features, we refer you to documentation for Table in "Table" and Tree in "Tree".

Expanding and Collapsing Items

As in Tree, you can set the expanded/collapsed state of an item programmatically with setCollapsed(). Note that if you want to expand all items, there is no expandItemsRecursively() like in Tree. Moreover, the getItemIds() only returns the IDs of the currently visible items for ordinary Hierarchical (not Collapsible) containers. Hence you can not use that to iterate over all the items, but you need to get the IDs from the underlying container.

// Expand the tree
for (Object itemId: ttable.getContainerDataSource()
                          .getItemIds()) {
    ttable.setCollapsed(itemId, false);

    // As we're at it, also disallow children from
    // the current leaves
    if (! ttable.hasChildren(itemId))
        ttable.setChildrenAllowed(itemId, false);

In large tables, this explicit setting becomes infeasible, as it needs to be stored in the TreeTable (more exactly, in the HierarchicalStrategy object) for all the contained items. You can use a Collapsible container to store the collapsed states in the container, thereby avoiding the explicit settings and memory overhead. There are no built-in collapsible containers in the Vaadin core framework, so you either need to use an add-on container or implement it yourself.