PrimeFaces ColumnToggler

By Arvind Rai, February 02, 2015
This page will provide PrimeFaces 5 ColumnToggler example. ColumnToggler component is used with dataTable. The use of ColumnToggler is selecting and deselecting columns to display and hide. The attributes of ColumnToggler are datasource and trigger. datasource refers to dataTable id and trigger refers the id of the component where it will be displayed. Find the code snippet.
<p:dataTable id="studentDetail">
    <f:facet name="header">
        <p:commandButton id="toggler" />
        <p:columnToggler datasource="studentDetail" trigger="toggler" />
columnToggler component is used with dataTable . Within the dataTable, create a commandButton and columnToggler component. The attributes of columnToggler component are

datasource : Assign the dataTable id to this columnToggler attribute.
trigger : Assign the commandButton id to this attribute.

Complete Example for ColumnToggler

Now find the complete example of ColumnToggler component. We are creating a datatable for student with some columns.

Create View for ColumnToggler

Find the XHTML for the demo.
<html lang="en"
      xmlns="" xmlns:h=""
	  xmlns:f="" xmlns:p="">
        <title> PrimeFaces 5 ColumnToggler Example </title>
     <h3> PrimeFaces 5 ColumnToggler Example </h3>
      <p:dataTable value="#{columnTogglerView.studentList}" var="student" id="studentDetail">
        <f:facet name="header">
	  <p:commandButton id="toggler" type="button" value="Add Delete Student Columns" style="float:center" icon="ui-icon-circle-arrow-s" />
	  <p:columnToggler datasource="studentDetail" trigger="toggler" />
	<p:column headerText="Id">
           <h:outputText value="#{}" />
	<p:column headerText="Name">
	   <h:outputText value="#{}" />
	<p:column headerText="Location">
	   <h:outputText value="#{student.location}" />
	<p:column headerText="Age">
	   <h:outputText value="#{student.age}" />

Managed Bean

Find the managed bean for the example.
package com.concretepage;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
@ManagedBean(name = "columnTogglerView")
public class ColumnTogglerView implements Serializable {
	private static final long serialVersionUID = 1L;
	private  List<Student> studentList = new ArrayList<Student>();
        public void init() {
            studentList.add(new Student(111, "Ram", "Ayodhya", 22));
            studentList.add(new Student(222, "Mahesh", "Varanasi", 24));
            studentList.add(new Student(333, "Krishna", "Mathura", 23));
	public List<Student> getStudentList() {
	   return studentList;
	static public class Student implements Serializable {
        private Integer id;
        private String name;
        private String location;
        private Integer age;
        public Student(Integer id,String name, String location, Integer age) {
   = id;
   = name;
            this.location = location;
            this.age = age;
	public Integer getId() {
	    return id;
	public String getName() {
	    return name;
	public String getLocation() {
	    return location;
	public Integer getAge() {
	    return age;


To test the application download source code and deploy the war file into tomcat and access the URL http://localhost:8080/primefaces5-1/students.xhtml
Click on the button as "Add Delete Student Columns" and select or deselect columns to display.
PrimeFaces 5 ColumnToggler Example

Download Source Code


©2024 | Privacy Policy | Contact Us