PrimeFaces 5 DataTable with Dynamic Columns Example
January 31, 2015
On this page, we will learn PrimeFaces 5 datatable with dynamic columns. To create dynamic column, PrimeFaces provides columns tag with different attribute to perform sorting, filter etc. Datatable and columns both tag iterates on managed bean property to produce result with the attribute var and value.. Columns tag will looks as below.
<p:columns value="" var="" columnIndexVar="" sortBy="" filterBy="">
Project Structure in Eclipse
Find the project structure in eclipse.Create UI using p:dataTable and p:columns
To create DataTable with dynamic column, PrimeFaces provides p:columns tag which attributes as given below.value: Access managed bean property for dynamic columns.
var: After iteration, object for column is assigned.
sortBy: Property to sort the column
filterBy: Property to filter the column.
Find the UI 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 DataTable with Dynamic Columns Example</title> </h:head> <h:body> <h3>PrimeFaces 5 DataTable with Dynamic Columns Example</h3> <h:form> <p:dataTable value="#{dataTableView.studentList}" var="student"> <p:columns value="#{dataTableView.dataTableColumns}" var="column" sortBy="#{student[column.property]}"> <f:facet name="header"> <h:outputText value="#{column.header}" /> </f:facet> <h:outputText value="#{student[column.property]}" /> </p:columns> </p:dataTable> </h:form> </h:body> </html>
Create Managed Bean for View
Create the managed bean to be used in view.DataTableView.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 = "dataTableView") @ViewScoped public class DataTableView implements Serializable { private static final long serialVersionUID = 1L; private List<Student> studentList = new ArrayList<Student>(); private List<DataTableColumn> dataTableColumns = new ArrayList<DataTableColumn>(); @PostConstruct public void init() { //add students studentList.add(new Student(111, "Ram", "Ayodhya")); studentList.add(new Student(222, "Mahesh", "Varanasi")); studentList.add(new Student(333, "Krishna", "Mathura")); // prepare dynamic columns dataTableColumns.add(new DataTableColumn("ID","id")); dataTableColumns.add(new DataTableColumn("Name","name")); dataTableColumns.add(new DataTableColumn("Location","location")); } public List<Student> getStudentList() { return studentList; } public List<DataTableColumn> getDataTableColumns() { return dataTableColumns; } }
Student.java
package com.concretepage; public class Student { private Integer id; private String name; private String location; public Student(Integer id, String name, String location){ this.id = id; this.name = name; this.location = location; } public Integer getId() { return id; } public String getName() { return name; } public String getLocation() { return location; } }
DataTableColumn.java
package com.concretepage; public class DataTableColumn { private String header; private String property; public DataTableColumn(String header, String property) { this.header = header; this.property = property; } public String getHeader() { return header; } public String getProperty() { return property; } }
Output
Deploy the war file in tomcat and access the URL as http://localhost:8080/primefaces5-1/students.xhtmlWe will find below webpage.