Tutorial

Primefaces Tree, TreeNode, TreeTable Example Tutorial

Published on August 4, 2022

Pankaj

Primefaces Tree, TreeNode, TreeTable Example Tutorial

For displaying hierarchical data and create site navigation, Primefaces provides you Tree & TreeTable components. Leveraging these components aren’t so easy and it needs a lot of technical details. Some of those technical issues are covered randomly along spread published technical documents on the internet while others aren’t. This tutorial intended to provide you full explanations of how you can benefit from these components.

Primefaces Tree Basic Info

Info	Tree
Component Class	org.primefaces.component.tree.Tree
Component Type	org.primefaces.component.Tree
Component Family	org.primefaces.component
Renderer Type	org.primefaces.component.TreeRenderer
Renderer Class	org.primefaces.component.tree.TreeRenderer

Primefaces Tree Attributes

Name	Default	Type	Description
id	null	String	Unique identifier of the component
rendered	true	Boolean	Boolean value to specify the rendering of the component, when set to false component will not be rendered
binding	null	Object	An el expression that maps to a server side UIComponent instance in a backing bean
widgetVar	null	String	Name of the client side widget
value	null	Object	A TreeNode instance as the backing model
var	null	String	Name of the request-scoped variable that’ll be usedto refer each treenode data.
dynamic	false	Boolean	Specifies the ajax/client toggleMode
cache	true	Boolean	Specifies caching on dynamically loaded nodes.When set to true expanded nodes will be kept in memory.
onNodeClick	null	String	Javascript event to process when a tree node isclicked.
selection	null	Object	TreeNode array to reference the selections.
style	null	String	Style of the main container element of tree
styleClass	null	String	Style class of the main container element of tree
selectionMode	null	String	Defines the selectionMode
highlight	true	Boolean	Highlights nodes on hover when selection is enabled.
datakey	null	Object	Unique key of the data presented by nodes.
animate	false	Boolean	When enabled, displays slide effect on toggle.
orientation	vertical	String	Orientation of layout, vertical or horizontal.
propagateSelectionUp	true	Boolean	Defines upwards selection propagation forcheckbox mode.
propagateSelectionDown	true	Boolean	Defines downwards selection propagation forcheckbox mode.
dir	ltr	String	Defines text direction, valid values are ltr and rtl.
draggable	false	Boolean	Makes tree nodes draggable.
droppable	false	Boolean	Makes tree droppable.
dragdropScope	null	String	Scope key to group a set of tree components fortransferring nodes using drag and drop.
dragMode	self	String	Defines parent-child relationship when a node isdragged, valid values are self (default), parent andancestor.
dropRestrict	none	String	Defines parent-child restrictions when a node isdropped valid values are none (default) and sibling.
required	false	Boolean	Validation constraint for selection.
requiredMessage	null	String	Message for required selection validation.

Getting Started with Primefaces Tree

Tree is populated with an org.primefaces.model.TreeNode instance which corresponds to the root. Following below simple example that you may develop in which a Tree component had used. index.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node">
		<p:treeNode>
			<h:outputText value="#{node}"/>
		</p:treeNode>
	</p:tree>
</h:form>
</html>

package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

@ManagedBean
@SessionScoped
public class TreeManagedBean {
	// TreeNode instance
	private TreeNode root;

	public TreeManagedBean(){
		// This is the root node, so it's data is root and its parent is null
		this.root = new DefaultTreeNode("Root Node", null);
		// Create child node
		TreeNode child = new DefaultTreeNode("Child Node", this.root);
		// Reference the parent of child node
		child.setParent(this.root);
		// Create descendent nodes
		TreeNode descendent = new DefaultTreeNode("Descendent Node", child);
		// Reference the parent of descendent node
		descendent.setParent(child);
	}

	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}
}

Here are additional explanations beside those commented above:

Tree component has associated with a TreeNode instance called root.
Root instance has also a child as a TreeNode instance which also refers its child.
This hierarchical view is displayed by referencing the root node directly using value attribute.
Attributue var has used by the Tree component for referencing the Request-Scoped variable that’ll be used to refer each treenode data.
Each TreeNode has been created by passing two arguments; encapsulated data object instance and parent reference.
Properties of every TreeNode are: type, data, children, parent and expanded boolean indicator. All of those properties has to be explored in the next coming sections.

Primefaces Dynamic Tree

Tree component isn’t dynamic by default, dynamic mode uses ajax to fetch the tree nodes from the server side on demand. When node is expanded, tree loads the children of the particular expanded node and send to the client for display. Unlike what is happened originally, when toggling is set to client all the tree nodes in model are rendered to the client and tree is created. For large scale of data the dynamic mode is suitable than using the default behavior. Following below the way in which dynamic attribute can be identified. index.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true">
		<p:treeNode>
			<h:outputText value="#{node}"/>
		</p:treeNode>
	</p:tree>
</h:form>
</html>

Primefaces Multiple TreeNode Types

It’s a common requirement that you want different TreeNode types and icons inside your hierarchy. For implementing this, you should follow below simple steps:

Define/Place more than one <p:treeNode/> components, each having a different type.
Use that defined type to bind TreeNodes in your model.

Following below simple example demonstration for using different TreeNode for showing that type varieties. The files have affected by are both files index.xhtml view and TreeManagedBean.java. index.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
	</p:tree>
</h:form>
</html>

package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

@ManagedBean
@SessionScoped
public class TreeManagedBean {
	// TreeNode instance
	private TreeNode root;

	public TreeManagedBean(){
		// This is the root node, so it's data is root and its parent is null
		this.root = new DefaultTreeNode("Root Node", null);
		// Create documents node
		TreeNode documents = new DefaultTreeNode("Documents", this.root);
		// Create document node
		TreeNode document01 = new DefaultTreeNode("document","Expenses.doc", documents);
		// Create images node
		TreeNode images = new DefaultTreeNode("Images", this.root);
		// Create image node
		TreeNode image01 = new DefaultTreeNode("image","Travel.gif", images);
		// Create videos node
		TreeNode videos = new DefaultTreeNode("Videos", this.root);
		// Create video node
		TreeNode video01 = new DefaultTreeNode("video","Play.avi", videos);
	}

	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}
}

As obvious from provided demo, the integration between TreeNode instance and p:treeNode component is the type attribute.

Primefaces Tree Ajax Behavior Events

Tree provides various ajax behavior events:

Event	Listener Parameter	Fired
expand	org.primefaces.event.NodeExpandEvent	When a node is expanded.
collapse	org.primefaces.event.NodeCollapseEvent	When a node is collapsed.
select	org.primefaces.event.NodeSelectEvent	When a node is selected.
unselect	org.primefaces.event.NodeUnselectEvent	When a node is unselected.

Following tree has three listeners: index2.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>
	</p:tree>
</h:form>
</html>

package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.event.NodeCollapseEvent;
import org.primefaces.event.NodeExpandEvent;
import org.primefaces.event.NodeSelectEvent;
import org.primefaces.event.NodeUnselectEvent;
import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

@ManagedBean
@SessionScoped
public class TreeManagedBean {
	// TreeNode instance
	private TreeNode root;

	public TreeManagedBean(){
		// This is the root node, so it's data is root and its parent is null
		this.root = new DefaultTreeNode("Root Node", null);
		// Create documents node
		TreeNode documents = new DefaultTreeNode("Documents", this.root);
		// Create document node
		TreeNode document01 = new DefaultTreeNode("document","Expenses.doc", documents);
		// Create images node
		TreeNode images = new DefaultTreeNode("Images", this.root);
		// Create image node
		TreeNode image01 = new DefaultTreeNode("image","Travel.gif", images);
		// Create videos node
		TreeNode videos = new DefaultTreeNode("Videos", this.root);
		// Create video node
		TreeNode video01 = new DefaultTreeNode("video","Play.avi", videos);
	}

	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}

	public void onNodeSelect(NodeSelectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Selected");
	}

	public void onNodeUnSelect(NodeUnselectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: UnSelected");
	}

	public void onNodeExpand(NodeExpandEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Expanded");
	}

	public void onNodeCollapse(NodeCollapseEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Collapsed");
	}
}

Once you’ve expanded TreeNode, an Ajax event has fired.
For each fired event, an ajax listener method has defined for handling purposes.
Event listeners are also useful when dealing with a huge amount of data. That is by providing the root and child nodes to the tree, use event listeners to get the selected node and add new nodes to that particular tree at runtime.
Select and UnSelect events haven’t produced now, issuing these events required SelectionMode to be set.

Primefaces Tree Selection & SelectionMode

Tree component provides a built-in functionality that help you identify those selected nodes. Node selection mechanism supports three modes, for each provided mode a TreeNode instance(s) has/have assigned as a selection reference.

Single Mode: One TreeNode can be selected at a time. Selection should be a TreeNode reference.
Multiple Mode: Multiple nodes can be selected. Selection should be a TreeNode array reference.
Checkbox Mode: Multiple nodes can be selected using a checkbox UI. Selection should be a TreeNode array reference.

index1.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true"
			selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>
	</p:tree>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true"
			selectionMode="multiple" selection="#{treeManagedBean.multipleSelectedTreeNodes}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>
	</p:tree>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true"
			selectionMode="checkbox" selection="#{treeManagedBean.checkboxSelectedTreeNodes}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>
	</p:tree>
	<h:commandButton value="Print Selected Nodes" action="#{treeManagedBean.printSelectedNodes}"></h:commandButton>
</h:form>
</html>

package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.event.NodeCollapseEvent;
import org.primefaces.event.NodeExpandEvent;
import org.primefaces.event.NodeSelectEvent;
import org.primefaces.event.NodeUnselectEvent;
import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

@ManagedBean
@SessionScoped
public class TreeManagedBean {
	// TreeNode instance
	private TreeNode root;
	private TreeNode singleSelectedTreeNode;
	private TreeNode [] multipleSelectedTreeNodes;
	private TreeNode [] checkboxSelectedTreeNodes;

	public TreeManagedBean(){
		// This is the root node, so it's data is root and its parent is null
		this.root = new DefaultTreeNode("Root Node", null);
		// Create documents node
		TreeNode documents = new DefaultTreeNode("Documents", this.root);
		// Create document node
		TreeNode document01 = new DefaultTreeNode("document","Expenses.doc", documents);
		// Create images node
		TreeNode images = new DefaultTreeNode("Images", this.root);
		// Create image node
		TreeNode image01 = new DefaultTreeNode("image","Travel.gif", images);
		// Create videos node
		TreeNode videos = new DefaultTreeNode("Videos", this.root);
		// Create video node
		TreeNode video01 = new DefaultTreeNode("video","Play.avi", videos);
	}

	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}

	public TreeNode getSingleSelectedTreeNode() {
		return singleSelectedTreeNode;
	}

	public void setSingleSelectedTreeNode(TreeNode singleSelectedTreeNode) {
		this.singleSelectedTreeNode = singleSelectedTreeNode;
	}

	public TreeNode[] getMultipleSelectedTreeNodes() {
		return multipleSelectedTreeNodes;
	}

	public void setMultipleSelectedTreeNodes(TreeNode[] multipleSelectedTreeNodes) {
		this.multipleSelectedTreeNodes = multipleSelectedTreeNodes;
	}

	public TreeNode[] getCheckboxSelectedTreeNodes() {
		return checkboxSelectedTreeNodes;
	}

	public void setCheckboxSelectedTreeNodes(TreeNode[] checkboxSelectedTreeNodes) {
		this.checkboxSelectedTreeNodes = checkboxSelectedTreeNodes;
	}

	public void onNodeSelect(NodeSelectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Selected");
	}

	public void onNodeUnSelect(NodeUnselectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: UnSelected");
	}

	public void onNodeExpand(NodeExpandEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Expanded");
	}

	public void onNodeCollapse(NodeCollapseEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Collapsed");
	}

	public String printSelectedNodes(){
		System.out.println("Single Selection Is :: "+this.singleSelectedTreeNode.getData());
		for(TreeNode n : this.multipleSelectedTreeNodes){
			System.out.println("Multiple Selection Are :: "+n.getData());
		}
		for(TreeNode n : this.checkboxSelectedTreeNodes){
			System.out.println("CheckBox Selection Are :: "+n.getData());
		}
		return "";
	}
}

One remaining notes should be mentioned for full detailed explanation:

TreeNode component has attributes like expandedIcon and collapsedIcon for specifying icons of both expand and collapsed behaviors.
TreeNode component has also icon attribute that used for specifying the icon of the node itself.

Primefaces Node Cache & OnNodeClick

By default cache attribute has turned on, nodes are loaded dynamically will be kept in memory so re expanding a node won’t trigger a server side request. In case you’ve set to false, collapsing the node will remove the children and expanding it later causes the children nodes to be fetched from the server again. It’s also applicable for you to execute a custom JavaScript in case certain node has clicked on. onNodeClick attribute used for this purpose, JavaScript method invoked with passing html clicked node and event elements. Following example is a log messages have displayed once onNodeClick has called. index3.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
	<script>
		function onNodeClick(node,event){
			console.log("nodeArg :: "+node);
			console.log("eventArg ::"+event);
		}
	</script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true" 
				onNodeClick="onNodeClick(node,event)"
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>
</h:form>
</html>

Primefaces DragDrop

Tree nodes can be reordered within a single tree and can even be transferred between multiple trees using dragdrop. Following example shows you how can make single tree draggable and droppable. index4.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true" droppable="true" draggable="true"
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>
</h:form>
</html>

Applying drag-drop concept against single tree is so easy, more complicated example can be noticed when it comes for dragging-dropping against multiple tree components. Following example shows you a simple example for that. This time a new attribute dragdropScope should be used for making trees’ nodes draggable and droppable between each others. index5.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true" droppable="true" draggable="true"
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}"
				dragdropScope="myScope">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>
	
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true" droppable="true" draggable="true"
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}"
				dragdropScope="myScope">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>	
</h:form>
</html>

Primefaces Horizontal Tree

Default orientation of tree is vertical, setting it to horizontal displays nodes in a horizontal layout. All features of vertical tree except dragdrop are available for horizontal tree as well. Attribute orientation is used for this purpose. index6.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:tree value="#{treeManagedBean.root}" var="node" dynamic="true" orientation="horizontal" 
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>
</h:form>
</html>

Primefaces ContextMenu

Primefaces provides you a special component that can serve you achieve some sort of contextual operations. ContextMenu component used for that, Tree component has even integrated with the context menu in order for applying those sorted operations against selected node and nodes in case you’ve developed multiple selections. ContextMenu’s for attribute should be used for referencing Tree component’s id attribute so that defined menu has been displayed at every time certain node within Tree component has selected. Use Right click for displaying context menu component. index6.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>
	<p:contextMenu for="tree">
		<p:menuitem value="View" actionListener="#{treeManagedBean.view}" icon="ui-icon-search"></p:menuitem>
	</p:contextMenu>
	<p:tree id="tree" value="#{treeManagedBean.root}" var="node" dynamic="true" orientation="horizontal" 
				selectionMode="single" selection="#{treeManagedBean.singleSelectedTreeNode}">
		<p:treeNode expandedIcon="ui-icon ui-icon-folder-open"
						collapsedIcon="ui-icon ui-icon-folder-collapsed">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="document" icon="ui-icon ui-icon-document">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:treeNode type="image" icon="ui-icon ui-icon-image">
			<h:outputText value="#{node}"/>
		</p:treeNode>					
		<p:treeNode type="video" icon="ui-icon ui-icon-video">
			<h:outputText value="#{node}"/>
		</p:treeNode>
		<p:ajax event="select" listener="#{treeManagedBean.onNodeSelect}"></p:ajax>
		<p:ajax event="unselect" listener="#{treeManagedBean.onNodeUnSelect}"></p:ajax>
		<p:ajax event="expand" listener="#{treeManagedBean.onNodeExpand}"></p:ajax>
		<p:ajax event="collapse" listener="#{treeManagedBean.onNodeCollapse}"></p:ajax>									
	</p:tree>
</h:form>
</html>

package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.event.ActionEvent;

import org.primefaces.event.NodeCollapseEvent;
import org.primefaces.event.NodeExpandEvent;
import org.primefaces.event.NodeSelectEvent;
import org.primefaces.event.NodeUnselectEvent;
import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

@ManagedBean
@SessionScoped
public class TreeManagedBean {
	// TreeNode instance
	private TreeNode root;
	private TreeNode singleSelectedTreeNode;
	private TreeNode [] multipleSelectedTreeNodes;
	private TreeNode [] checkboxSelectedTreeNodes;
	
	public TreeManagedBean(){
		// This is the root node, so it's data is root and its parent is null
		this.root = new DefaultTreeNode("Root Node", null);
		// Create documents node
		TreeNode documents = new DefaultTreeNode("Documents", this.root);
		// Create document node
		TreeNode document01 = new DefaultTreeNode("document","Expenses.doc", documents);
		// Create images node
		TreeNode images = new DefaultTreeNode("Images", this.root);
		// Create image node
		TreeNode image01 = new DefaultTreeNode("image","Travel.gif", images);
		// Create videos node
		TreeNode videos = new DefaultTreeNode("Videos", this.root);
		// Create video node
		TreeNode video01 = new DefaultTreeNode("video","Play.avi", videos);
	}

	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}
	
	public TreeNode getSingleSelectedTreeNode() {
		return singleSelectedTreeNode;
	}

	public void setSingleSelectedTreeNode(TreeNode singleSelectedTreeNode) {
		this.singleSelectedTreeNode = singleSelectedTreeNode;
	}

	public TreeNode[] getMultipleSelectedTreeNodes() {
		return multipleSelectedTreeNodes;
	}

	public void setMultipleSelectedTreeNodes(TreeNode[] multipleSelectedTreeNodes) {
		this.multipleSelectedTreeNodes = multipleSelectedTreeNodes;
	}

	public TreeNode[] getCheckboxSelectedTreeNodes() {
		return checkboxSelectedTreeNodes;
	}

	public void setCheckboxSelectedTreeNodes(TreeNode[] checkboxSelectedTreeNodes) {
		this.checkboxSelectedTreeNodes = checkboxSelectedTreeNodes;
	}

	public void onNodeSelect(NodeSelectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Selected");
	}
	
	public void onNodeUnSelect(NodeUnselectEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: UnSelected");
	}
	
	public void onNodeExpand(NodeExpandEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Expanded");
	}
	
	public void onNodeCollapse(NodeCollapseEvent event){
		System.out.println("Node Data ::"+event.getTreeNode().getData()+" :: Collapsed");
	}
	
	public String printSelectedNodes(){
		System.out.println("Single Selection Is :: "+this.singleSelectedTreeNode.getData());
		for(TreeNode n : this.multipleSelectedTreeNodes){
			System.out.println("Multiple Selection Are :: "+n.getData());	
		}
		for(TreeNode n : this.checkboxSelectedTreeNodes){
			System.out.println("CheckBox Selection Are :: "+n.getData());	
		}		
		return "";
	}
	
	public void view(ActionEvent e){
		System.out.println("View action has invoked against node :: "+this.singleSelectedTreeNode.getData());
	}	
}

Primefaces TreeTable

TreeTable is used for displaying hierarchical data in tabular format.

Getting Started With Primefaces TreeTable

It’s important before exploring TreeTable component to take a look at it’s basic information and attributes respectively.

Info	TreeTable
Component Class	org.primefaces.component.treetable.TreeTable
Component Type	org.primefaces.component.TreeTable
Component Family	org.primefaces.component
Renderer Type	org.primefaces.component.TreeTableRenderer
Renderer Class	org.primefaces.component.treetable.TreeTableRenderer

Name	Default	Type	Description
id	null	String	Unique identifier of the component
rendered	true	Boolean	Boolean value to specify the rendering of thecomponent, when set to false component willnot be rendered.
binding	null	Object	An el expression that maps to a server sideUIComponent instance in a backing bean
value	null	Object	A TreeNode instance as the backing model.
var	null	String	Name of the request-scoped variable used torefer each treenode.
widgetVar	null	String	Name of the client side widget
style	null	String	Inline style of the container element.
styleClass	null	String	Style class of the container element.
selection	null	Object	Selection reference.
selectionMode	null	String	Type of selection mode.
scrollable	false	Boolean	Whether or not the data should be scrollable.
scrollHeight	null	Integer	Height of scrollable data.
scrollWidth	null	Integer	Width of scrollable data.
tableStyle	null	String	Inline style of the table element.
tableStyleClass	null	String	Style class of the table element.
emptyMessage	No records found	String	Text to display when there is no data to display.
resizableColumns	false	Boolean	Defines if colums can be resized or not.
rowStyleClass	null	String	Style class for each row.
liveResize	false	Boolean	Columns are resized live in this mode withoutusing a resize helper.
required	false	Boolean	Validation constraint for selection.
requiredMessage	null	String	Message for required selection validation.
sortBy	null	ValueExpr	Expression for default sorting.
sortOrder	ascending	String	Defines default sorting order.
sortFunction	null	MethodExpr	Custom pluggable sortFunction for defaultsorting.
nativeElements	false	Boolean	In native mode, treetable uses nativecheckboxes.
dataLocale	null	Object	Locale to be used in features such as sorting,defaults to view locale.
caseSensitiveSort	false	Boolean	Case sensitivity for sorting, insensitive bydefault.

Similar to Tree, TreeTable is populating with a TreeNode instance that corresponds to the root node. TreeNode API has a hierarchical data structure and represents the data to be populated in tree. Following example shows you Plain Old Java Object (POJO) document instances that are displayed using TreeTable component. index7.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>							
	<p:treeTable value="#{treeTableManagedBean.root}" var="node">
		<p:column>
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
	</p:treeTable>
</h:form>
</html>

package com.journaldev.prime.faces.data;

public class Document {
	private String name;
	private String id;
	private String author;
	
	public Document(String name, String id,String author){
		this.name = name;
		this.id = id;
		this.author = author;
	}
	
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getAuthor() {
		return author;
	}
	public void setAuthor(String author) {
		this.author = author;
	}
}

package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

import com.journaldev.prime.faces.data.Document;

@ManagedBean
@SessionScoped
public class TreeTableManagedBean {
	
	private TreeNode root = new DefaultTreeNode("Root Node", null);

	public TreeTableManagedBean(){
		// Populate Document Instances
		Document doc01 = new Document("Primefaces Tutorial","1","Primefaces Company");
		
		Document doc02 = new Document("Hibernate Tutorial","2","JournalDev");
		
		// Create Documents TreeNode
		TreeNode documents = new DefaultTreeNode(new Document("Documents","0","Documents"), this.root);
		// Create Document TreeNode
		TreeNode document01 = new DefaultTreeNode(doc01, documents);
		TreeNode document02 = new DefaultTreeNode(doc02, documents);
	}
	
	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}
}

Primefaces TreeTable - Selection

Similar to Tree component, node selection is a built-in functionality by which you can determine the type of selection; Single, multiple and checkbox are the values that you might use. Single selection will bind your selected node into one instance of TreeNode, while others have used array of TreeNode. Following example shows you how you can enclose user selections by displaying Growl Message. This example uses p:commandButton provided by Primefaces which will be discussed later on. index8.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>			
	<p:growl id="message">
	</p:growl>				
	<p:treeTable value="#{treeTableManagedBean.root}" var="node" selectionMode="single"
		selection="#{treeTableManagedBean.singleSelectedNode}">
		<p:column>
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
	</p:treeTable>
	<p:treeTable value="#{treeTableManagedBean.root}" var="node" selectionMode="multiple"
		selection="#{treeTableManagedBean.multipleSelectedNodes}">
		<p:column>
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
	</p:treeTable>
	<p:treeTable value="#{treeTableManagedBean.root}" var="node" selectionMode="checkbox"
		selection="#{treeTableManagedBean.checkboxSelectedNodes}">
		<p:column>
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
	</p:treeTable>	
	<p:commandButton value="Show Selected Documents" action="#{treeTableManagedBean.viewSelectedNodes}" process="@form" update="message">
	</p:commandButton>	
</h:form>
</html>

package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.model.DefaultTreeNode;
import org.primefaces.model.TreeNode;

import com.journaldev.prime.faces.data.Document;

@ManagedBean
@SessionScoped
public class TreeTableManagedBean {
	
	private TreeNode root = new DefaultTreeNode("Root Node", null);
	private TreeNode singleSelectedNode;
	private TreeNode [] multipleSelectedNodes;
	private TreeNode [] checkboxSelectedNodes;

	public TreeTableManagedBean(){
		// Populate Document Instances
		Document doc01 = new Document("Primefaces Tutorial","1","Primefaces Company");	
		Document doc02 = new Document("Hibernate Tutorial","2","JournalDev");
		// Create Documents TreeNode
		TreeNode documents = new DefaultTreeNode(new Document("Documents","0","Documents"), this.root);
		// Create Document TreeNode
		TreeNode document01 = new DefaultTreeNode(doc01, documents);
		TreeNode document02 = new DefaultTreeNode(doc02, documents);
	}
	
	public TreeNode getRoot() {
		return root;
	}

	public void setRoot(TreeNode root) {
		this.root = root;
	}

	public TreeNode getSingleSelectedNode() {
		return singleSelectedNode;
	}

	public void setSingleSelectedNode(TreeNode singleSelectedNode) {
		this.singleSelectedNode = singleSelectedNode;
	}

	public TreeNode[] getMultipleSelectedNodes() {
		return multipleSelectedNodes;
	}

	public void setMultipleSelectedNodes(TreeNode[] multipleSelectedNodes) {
		this.multipleSelectedNodes = multipleSelectedNodes;
	}

	public TreeNode[] getCheckboxSelectedNodes() {
		return checkboxSelectedNodes;
	}

	public void setCheckboxSelectedNodes(TreeNode[] checkboxSelectedNodes) {
		this.checkboxSelectedNodes = checkboxSelectedNodes;
	}
	
	public String viewSelectedNodes(){
		String message = "You've selected documents :: ";
		message+="- "+((Document)this.singleSelectedNode.getData()).getName()+"\n";
		for(TreeNode node : this.multipleSelectedNodes){
			message+="- "+((Document)node.getData()).getName()+"\n";	
		}
		for(TreeNode node : this.checkboxSelectedNodes){
			message+="- "+((Document)node.getData()).getName()+"\n";	
		}		
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(message));
		return "";
	}
}

Primefaces TreeTable - Ajax Behavior Events & ContextMenu

TreeTable has supported the same Ajax behavior events that already Tree component come with. One exceptional event is that colResize that would be fired when a column is resized. Also, the using of ContextMenu doesn’t differ from that’s occurred in Tree component. Unfortunately, free version of Primefaces 5.0 that already used for now has a crucial issue prevents us from clarifying column re size event listening but for just knowing how such that event could be listening a simple example is provided below: index9.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>							
	<p:treeTable value="#{treeTableManagedBean.root}" var="node" resizableColumns="true">
		<p:column>
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column>
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
		<p:ajax event="colResize" listener="#{treeTableManagedBean.colResizeListener}"></p:ajax>
	</p:treeTable>
</h:form>
</html>

// .. Some Required Code
	public void colResizeListener(ColumnResizeEvent e){
		String message ="Column resize event is thrown";
		FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(message));
	}

Primefaces TreeTable - Sorting

Sorting is enabled by setting sortBy expressions at column level. index10.xhtml code:

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
<h:head>
	<script name="jquery/jquery.js" library="primefaces"></script>
</h:head>
<h:form>							
	<p:treeTable value="#{treeTableManagedBean.root}" var="node">
		<p:column sortBy="#{node.name}">
			<f:facet name="header">
				Name
			</f:facet>
			<h:outputText value="#{node.name}"></h:outputText>
		</p:column>
		<p:column sortBy="#{node.author}">
			<f:facet name="header">
				Author
			</f:facet>
			<h:outputText value="#{node.author}"></h:outputText>
		</p:column>
		<p:column sortBy="#{node.id}">
			<f:facet name="header">
				ID
			</f:facet>
			<h:outputText value="#{node.id}"></h:outputText>
		</p:column>				
	</p:treeTable>
</h:form>
</html>

In case you would like to display TreeTable as sorted on page load use sortBy attribute of TreeTable, optional sortOrder and sortFunction attributes are provided to define the default sort order (ascending or descending) and a Java method to the actual sorting respectively.

Primefaces Tree TreeNode TreeTable Summary

Tree and TreeTable components are used intensively for displaying structural hierarchical data. We learned how to use these components properly and what are the main attributes you should need. Contribute us by commenting below and for your use, download below source code.

Download PrimeFaces Tree Project

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors

Pankaj

author

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Ask a question Search for more help

Was this helpful?

JournalDev

DigitalOcean Employee

• June 4, 2019

how i can edit tree node (to change the name of the node) inline?

- manish baranwal

JournalDev

DigitalOcean Employee

• October 14, 2018

I tried primeng datatable with angular 6 for 4 hours to get it working but in vain, is it <p-table or <p-dataTable or <p:table or <p:dataTable ??? 1) I put “import {TableModule} from ‘primeng/table’;” in app.module.ts and 2) in import section I put imports: [ … TableModule, …] and i used in my html file but i got “Can’t bind to ‘value’ since it isn’t a known property of ‘p-table’.” 3) I want to thank Primeng for forcing me to use ag-grid and deleting everything related to primeng…

- th_hasan

JournalDev

DigitalOcean Employee

• August 27, 2018

Good Job, thank you for your great effort :)

- Mohammad Alzarai

JournalDev

DigitalOcean Employee

• February 13, 2018

Hey Amir, Thanks a tonne for the post! Could you also share an example of the “highlight” feature. Also is the sample code above available as a zip file to download. Regards!

- DIPAK

JournalDev

DigitalOcean Employee

• June 20, 2017

Hi, How to drag and drop the selected node from the tree?

- kiran

JournalDev

DigitalOcean Employee

• December 13, 2016

how to make dynamic tree table from json object?

- rohit

JournalDev

DigitalOcean Employee

• June 9, 2016

Hi this is nafeel, Am currently working in treetable in primefaces. I could use the treetable in a tab view. If the user may create multiple tabs. Each tab contain a tree table. Everything in the multiple tab is bean value. Which is list of bean is assigned to the tab value. The problem here is when I iterate the tree table its iterated. But I cant get the exact bean value. The tree table value and selection value are all bean value. I could get via active index. If I click the checkbox and perform action it prints null pointer exception on tree rendered components. Kindly help me over it…

- nafeel

JournalDev

DigitalOcean Employee

• January 5, 2016

Name Def Id Level max_occur Root Root 0 0 1 Root BBB 1 1 1 Root CCC 2 2 1 Root DDD 3 2 1 Root EEE 4 2 1 Root FFF 5 3 1 Root GGG 6 3 1 Root HHH 7 3 1 Root III 8 2 1 Root JJJ 9 2 3 Root KKK 10 2 1 Root LLL 11 3 1 Root MMM 12 3 2 Root NNN 13 3 1 Root PPP 15 3 1 Root QQQ 16 1 1 Root RRR 17 1 1 Root SSS 18 2 1 Id’s are always linear in nature 1)On Clicking (+)Root ------> (+)BBB ------> (-)QQQ ------> (+)RRR 2)On Clicking (+)BBB -----> (-)CCC -----> (-)DDD -----> (+)EEE 3)On Clicking (+)EEE -----> (-)FFF -----> (-)GGG -----> (+)HHH -----> (-)III -----> (+)JJJ -----> (-)JJJ1 -----> (-)JJJ2 -----> (-)JJJ3 -----> (-)KKK -----> (-)LLL -----> (+)MMM -----> (-)MMM1 -----> (-)MMM2 -----> (-)NNN -----> (-)PPP 4)On Clicking QQQ we dont get anything as it has no id inside it (inside its id 1) -----> (-)QQQ 5)On Clicking (+)RRR -----> (-)SSS

- Brindha

JournalDev

DigitalOcean Employee

• January 5, 2016

I am developing a site where I am getting the data from db, I have columns Name Def Id Level max_occur Root Root 0 0 1 Root BBB 1 1 1 Root CCC 2 2 1 Root DDD 3 2 1 Root EEE 4 2 1 Root FFF 5 3 1 Root GGG 6 3 1 Root HHH 7 3 1 Root III 8 2 1 Root JJJ 9 2 3 Root KKK 10 2 1 Root LLL 11 3 1 Root MMM 12 3 2 Root NNN 13 3 1 Root PPP 15 3 1 Root QQQ 16 1 1 Root RRR 17 1 1 Root SSS 18 2 1 Id’s are always linear in nature 1)On Clicking (+)Root ------> (+)BBB ------> (-)QQQ ------> (+)RRR 2)On Clicking (+)BBB -----> (-)CCC -----> (-)DDD -----> (+)EEE 3)On Clicking (+)EEE -----> (-)FFF -----> (-)GGG -----> (+)HHH -----> (-)III -----> (+)JJJ -----> (-)JJJ1 -----> (-)JJJ2 -----> (-)JJJ3 -----> (-)KKK -----> (-)LLL -----> (+)MMM -----> (-)MMM1 -----> (-)MMM2 -----> (-)NNN -----> (-)PPP 4)On Clicking QQQ we dont get anything as it has no id inside it (inside its id 1) -----> (-)QQQ 5)On Clicking (+)RRR -----> (-)SSS

- Brindha

JournalDev

DigitalOcean Employee

• March 17, 2015

“name” and “library” attribute of script tag not working in my eclipse. Please help. I even checked the attributes of tag. There are no attributes called “name” and “library” for it. Kindly help.

- Adish