Close

PrimeFaces - TreeTable Example

[Last Updated: Jun 29, 2017]

Following example shows how to use PrimeFaces's TreeTable component to display hierarchical data in tabular format.

JSF page

src/main/webapp/index.xhtml

<h:form>
    <p:treeTable value="#{tradeBean.rootNode}" var="rowInfo">
        <p:column headerText="Module/Project/Role">
            <h:outputText value="#{rowInfo.desc}" />
        </p:column>
        <p:column headerText="Name">
            <h:outputText value="#{rowInfo.name}" />
        </p:column>
        <p:column headerText="Phone">
            <h:outputText value="#{rowInfo.phone}" />
        </p:column>
    </p:treeTable>
</h:form>

The manage bean

@ManagedBean
@ViewScoped
public class TradeBean {
  private TreeNode rootNode;

  @PostConstruct
  public void init() {
      rootNode = new DefaultTreeNode(
              RowInfo.forProjectModule("Project Modules"), null);

      for (ProjectModule pm : DataService.Instance.getProjectModules()) {
          addNode(pm);
      }
  }

  private void addNode(ProjectModule pm) {
      TreeNode moduleNode = new DefaultTreeNode(
              RowInfo.forProjectModule(pm.getModuleName()), rootNode);
      moduleNode.setExpanded(true);

      for (Map.Entry<String, List<Employee>> entry : pm.getProjects().entrySet()) {
          TreeNode projectNode = new DefaultTreeNode(
                  RowInfo.forProjectModule(entry.getKey()), moduleNode);
          for (Employee employee : entry.getValue()) {
              new DefaultTreeNode(RowInfo.forEmployee(employee), projectNode);
          }
      }
  }

  public TreeNode getRootNode() {
      return rootNode;
  }
}
public class ProjectModule {
  private String moduleName;
  private Map<String, List<Employee>> projects = new HashMap<>();
    .............
}
public class Employee {
  private String name;
  private String role;
  private String phone;
  private String project;
    .............
}
public class RowInfo {
  private String desc;
  private String name;
  private String phone;

  public RowInfo(String desc, String name, String phone) {
      this.desc = desc;
      this.name = name;
      this.phone = phone;
  }
    .............
  public static RowInfo forProjectModule(String projectModule) {
      return new RowInfo(projectModule, "", "");
  }

  public static RowInfo forEmployee(Employee e) {
      return new RowInfo(e.getRole(), e.getName(), e.getPhone());
  }
}

To try examples, run embedded tomcat (configured in pom.xml of example project below):

mvn tomcat7:run-war

Output

Example Project

Dependencies and Technologies Used:

  • primefaces 6.1 primefaces
  • jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
  • jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
  • datafactory 0.8: Library to generate data for testing.
  • JDK 1.8
  • Maven 3.3.9

Tree Table Example Select All Download
  • tree-table-example
    • src
      • main
        • java
          • com
            • logicbig
              • example
        • webapp
          • index.xhtml

    See Also