PrimeFaces 5 DataTable with Dynamic Columns Example
January 31, 2015
<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.
