PrimeFaces 5 ColumnToggler Example
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" /> </f:facet> </p:dataTable>
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.students.xhtml
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"> <h:head> <title> PrimeFaces 5 ColumnToggler Example </title> </h:head> <h:body> <h3> PrimeFaces 5 ColumnToggler Example </h3> <h:form> <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" /> </f:facet> <p:column headerText="Id"> <h:outputText value="#{student.id}" /> </p:column> <p:column headerText="Name"> <h:outputText value="#{student.name}" /> </p:column> <p:column headerText="Location"> <h:outputText value="#{student.location}" /> </p:column> <p:column headerText="Age"> <h:outputText value="#{student.age}" /> </p:column> </p:dataTable> </h:form> </h:body> </html>
Managed Bean
Find the managed bean for the example.ColumnTogglerView.java
package com.concretepage; import java.io.Serializable; 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") @ViewScoped public class ColumnTogglerView implements Serializable { private static final long serialVersionUID = 1L; private List<Student> studentList = new ArrayList<Student>(); @PostConstruct 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) { this.id = id; this.name = 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; } } }
Output
To test the application download source code and deploy the war file into tomcat and access the URL http://localhost:8080/primefaces5-1/students.xhtmlClick on the button as "Add Delete Student Columns" and select or deselect columns to display.