Home  >  JSF 2  >  PrimeFaces 5

PrimeFaces 5 DataTable with Dynamic Columns Example

By Arvind Rai, 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.
PrimeFaces 5  DataTable  with Dynamic  Columns  Example

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;
	}
} 
Find the bean for student data.
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;
	}
} 
Find the bean for column property.
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.xhtml
We will find below webpage.
PrimeFaces 5  DataTable  with Dynamic  Columns  Example

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI
FIND MORE TUTORILAS


©2019 concretepage.com | Privacy Policy | Contact Us