Vaadin Treetable Example

If you need to show rows of data in a Hierarchical structure, Vaadin offers the TreeTable widget that can arrange these kind of data for you without much effort. In this example I am going to build a TreeTable to show these kind of data visualization.

1. The tools

• Java JDK 8
• Latest Eclipse Mars
• Vaadin 7.6.3
• Tomcat Server 8

2. Introduction

The TreeTable widget is an extension of the Table widget, and the rows of the table have a parent-children relationship with each other. If you have rows with no parent the TreeTable put those items on the root of the tree otherwise you need to explicit declare the parent of the row.

3. Prerequisites

• JDK installed
• Eclipse Mars installed and working
• Vaadin 7.6.3 plugin installed
• Tomcat 8 installed and running

4. Set up the project

In the file menu choose File -> New -> Other:

Now from the list choose Vaadin 7 project:

Hit next and name your project then hit finish.

5. Coding the example

Inside the init method.

Layout

		final VerticalLayout layout = new VerticalLayout();
		layout.setMargin(true);
		setContent(layout);

First I create the Layout, in this case a vertical layout to put the TreeTable.

Create the TreeTable

		TreeTable tt = new TreeTable("Some Linux Distros ...");
		tt.setWidth("100%");
		tt.addContainerProperty("Name", String.class, null);
		tt.addContainerProperty("Year", String.class, null);

Create the TreeTable, set it’s width to 100% to make it looks better for the example, add two columns, the “Name” and Year columns of String type with a default value of null.

First root

                tt.addItem(new Object[] {"Debian", "1993"}, 0);

Add the “Debian” node with ID 0 with no parent so it’s show in the root of the tree.

First child

		tt.addItem(new Object[] {"Knoppix", "2000"}, 1);
		tt.setParent(1, 0);

The item “Knoppix”, have an ID of 1 and with the call to the method tt.setParent(1, 0); I am telling to Vaadin that make the item with ID 1 a child of the item with the ID 0.

Rest of the first branch of the first root

		tt.addItem(new Object[] {"Knotix", "2003"}, 2);
		tt.setParent(2, 1);
		tt.addItem(new Object[] {"Auditor Security Linux", "2004"}, 3);
		tt.setParent(3, 2);
		tt.addItem(new Object[] {"Backtrack", "2006"}, 4);
		tt.setParent(4, 3);
		tt.addItem(new Object[] {"Kali Linux", "2013"}, 5);
		tt.setParent(5, 4);

I added “Kali Linux” as a child of “Backtrack”, “Backtrack” as a child of “Auditor Security Linux”, “Auditor Security Linux” as a child of “Knotix” and Knotix as a child of “Knoppix”, the relationship is controlled with the ID’s and the setParent method.

Second branch of the first root

		tt.addItem(new Object[] {"Ubuntu", "2004"}, 20);
		tt.setParent(20, 0);
		tt.addItem(new Object[] {"Mint", "2006"}, 21);
		tt.setParent(21, 20);
		tt.addItem(new Object[] {"Lubuntu", "2009"}, 22);
		tt.setParent(22, 20);
		tt.addItem(new Object[] {"Elementary OS", "2011"}, 23);
		tt.setParent(23, 20);

In this branch we have a single node with 3 children, note the id, these must be unique without collisions, the node with the id 20 is the parent and the nodes with the id’s 21, 22, 23 are it’s children in the same level.

Second root branch

		tt.addItem(new Object[] {"SLS", "1992"}, 30);
		tt.addItem(new Object[] {"Slackware", "1993"}, 31);
		tt.setParent(31, 30);
		tt.addItem(new Object[] {"S.u.S.E", "1994"}, 32);
		tt.setParent(32, 31);
		tt.addItem(new Object[] {"SuSE", "1998"}, 33);
		tt.setParent(33, 32);
		tt.addItem(new Object[] {"SUSE", "2003"}, 34);
		tt.setParent(34, 33);
		tt.addItem(new Object[] {"openSUSE", "2006"}, 35);
		tt.setParent(35, 34);

In this branch we have a linear relationship with each item, the root have one children and each subsequent node have only one children to the bottom of the branch.

Third root branch

		tt.addItem(new Object[] {"Red Hat", "1994"}, 40);

This root node have a single item without children and is added in order behind the two other root nodes.

Row click listener

		final Label current = new Label("Selected: NONE");
		tt.addValueChangeListener(new ValueChangeListener() {
			
			@Override
			public void valueChange(ValueChangeEvent event) {
				
				if(tt.getValue() != null){
					current.setValue("Selected: " + tt.getItem(tt.getValue()).toString());
				}else{
					current.setValue("Selected: NONE");
				}
			}
		});

Create a Label to show when a row is selected and if a row is selected show the value of the row. Using the value change listener is possible to capture when a row is selected or unselected and do whatever we want when this action is performed.

Header click listener

		tt.addHeaderClickListener(new HeaderClickListener() {
			
			@Override
			public void headerClick(HeaderClickEvent event) {
				String column = (String) event.getPropertyId();
		        Notification.show("Column: " + column + " Mouse Button: " + event.getButtonName());
			}
		});

With a header click listener we can capture if the user click in the header of the column and also with the getButtonName() method is possible to get the button used to click in the header of the column. When you click with the left button of the mouse in the header of the TreeTable, you can order the rows of the tree table and this functionality is build in into the widget.

Want to master Vaadin?

Subscribe to our newsletter and download the Vaadin Programming Cookbook right now!

In order to get you prepared for your Vaadin development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

Download NOW!

Thank you!

We will contact you soon.

Add widgets to the layout

		layout.addComponent(current);
		layout.addComponent(tt);

Add the Label and the TreeTable to the layout.

6. The complete source code

java

package com.example.vaadintreetable;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.data.Property.ValueChangeListener;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.Table.HeaderClickEvent;
import com.vaadin.ui.Table.HeaderClickListener;
import com.vaadin.ui.TreeTable;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@SuppressWarnings("serial")
@Theme("vaadintreetable")
public class VaadintreetableUI extends UI {

	@WebServlet(value = "/*", asyncSupported = true)
	@VaadinServletConfiguration(productionMode = false, ui = VaadintreetableUI.class)
	public static class Servlet extends VaadinServlet {
	}

	@Override
	protected void init(VaadinRequest request) {
		final VerticalLayout layout = new VerticalLayout();
		layout.setMargin(true);
		setContent(layout);
		
		TreeTable tt = new TreeTable("Some Linux Distros ...");
		tt.setWidth("100%");
		tt.addContainerProperty("Name", String.class, null);
		tt.addContainerProperty("Year", String.class, null);
		
		tt.addItem(new Object[] {"Debian", "1993"}, 0);
		
		tt.addItem(new Object[] {"Knoppix", "2000"}, 1);
		tt.setParent(1, 0);
		tt.addItem(new Object[] {"Knotix", "2003"}, 2);
		tt.setParent(2, 1);
		tt.addItem(new Object[] {"Auditor Security Linux", "2004"}, 3);
		tt.setParent(3, 2);
		tt.addItem(new Object[] {"Backtrack", "2006"}, 4);
		tt.setParent(4, 3);
		tt.addItem(new Object[] {"Kali Linux", "2013"}, 5);
		tt.setParent(5, 4);

		
		tt.addItem(new Object[] {"Ubuntu", "2004"}, 20);
		tt.setParent(20, 0);
		tt.addItem(new Object[] {"Mint", "2006"}, 21);
		tt.setParent(21, 20);
		tt.addItem(new Object[] {"Lubuntu", "2009"}, 22);
		tt.setParent(22, 20);
		tt.addItem(new Object[] {"Elementary OS", "2011"}, 23);
		tt.setParent(23, 20);
		
		tt.addItem(new Object[] {"SLS", "1992"}, 30);
		tt.addItem(new Object[] {"Slackware", "1993"}, 31);
		tt.setParent(31, 30);
		tt.addItem(new Object[] {"S.u.S.E", "1994"}, 32);
		tt.setParent(32, 31);
		tt.addItem(new Object[] {"SuSE", "1998"}, 33);
		tt.setParent(33, 32);
		tt.addItem(new Object[] {"SUSE", "2003"}, 34);
		tt.setParent(34, 33);
		tt.addItem(new Object[] {"openSUSE", "2006"}, 35);
		tt.setParent(35, 34);
		
		tt.addItem(new Object[] {"Red Hat", "1994"}, 40);
		
		final Label current = new Label("Selected: NONE");
		tt.addValueChangeListener(new ValueChangeListener() {
			
			@Override
			public void valueChange(ValueChangeEvent event) {
				
				if(tt.getValue() != null){
					current.setValue("Selected: " + tt.getItem(tt.getValue()).toString());
				}else{
					current.setValue("Selected: NONE");
				}
			}
		});
		
		tt.addHeaderClickListener(new HeaderClickListener() {
			
			@Override
			public void headerClick(HeaderClickEvent event) {
				String column = (String) event.getPropertyId();
		        Notification.show("Column: " + column + " Mouse Button: " + event.getButtonName());
			}
		});
		
		layout.addComponent(current);
		layout.addComponent(tt);

	}

}

7. Running the example

Right click on the project folder and choose Run as -> Run on server choose Tomcat 8 server and hit finish.

8. Results

The results of the example, you can see the TreeTable in action.

9. Download the Source Code

This was an example about Vaadin Treetable.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

and many more ....

I agree to the Terms and Privacy Policy

Sign up

Thank you!

We will contact you soon.