JSF2: Prime faces data table row selection

In this blog I’m going to show how to build a page with a table with selectable rows .
First of all create a managed bean, in view scope, with selectedRow and selectedRows fields

package com.biancama.test.ejb.jsf2.web;

import java.io.Serializable;
import java.util.List;

import javax.ejb.EJB;
import javax.faces.model.SelectItem;

import com.biancama.ejb.service.EmployeeService;
import com.biancama.test.ejb.dto.EmployeeDTO;

@SuppressWarnings("serial")
public class TableBean implements Serializable {
	@EJB
	private EmployeeService employeeService;

	private List employees;

	private SelectItem[] salaryOptions;

	private EmployeeDTO employeeSelected;

	private EmployeeDTO[] employeesSelected;

	public SelectItem[] getSalaryOptions() {
		return salaryOptions;
	}

	public void setSalaryOptions(SelectItem[] salaryOptions) {
		this.salaryOptions = salaryOptions;
	}

	public TableBean() {
		salaryOptions = new SelectItem[3 + 1];

		salaryOptions[0] = new SelectItem("", "Select");
		salaryOptions[1] = new SelectItem("1500", "1500");
		salaryOptions[2] = new SelectItem("3000", "3000");
		salaryOptions[3] = new SelectItem("4000", "4000");

	}

	public void setEmployees(List employees) {

		this.employees = employees;
	}

	public List getEmployees() {
		if (this.employees == null) {
			this.employees = employeeService.getAllEmployees();
		}
		return employees;
	}

	public void setEmployeeSelected(EmployeeDTO employeeSelected) {
		this.employeeSelected = employeeSelected;
	}

	public EmployeeDTO getEmployeeSelected() {
		return employeeSelected;
	}

	public void setEmployeesSelected(EmployeeDTO[] employeesSelected) {
		this.employeesSelected = employeesSelected;
	}

	public EmployeeDTO[] getEmployeesSelected() {
		return employeesSelected;
	}

}

The simplest page could be

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                template="../templates/ui.xhtml">
	<ui:define name="content">
	<h1 class="title ui-widget-header ui-corner-all">Simple Selection DataTable</h1>
		<div class="entry">
		<h:form prependId="false">
		<p:dataTable var="employee" value="#{tableBean.employees}">

        <f:facet name="header">
            List of Employees 
        </f:facet>

        <p:column>
            <f:facet name="header">
                First Name
            </f:facet>

            <h:outputText value="#{employee.firstName}" />

           
        </p:column>

        <p:column headerText="Last Name">
            <h:outputText value="#{employee.lastName}" />
        </p:column>

        <p:column headerText="Email">
            <h:outputText value="#{employee.email}" />
        </p:column>

        <p:column headerText="Phone" >
            <h:outputText value="#{employee.phoneNumber}" />
             <f:facet name="footer">
                Internal Phone
            </f:facet>
        </p:column>

 		<p:column headerText="Hire Date" >
            <h:outputText value="#{employee.hireDate}" >
            	<f:convertDateTime type="date" dateStyle="medium"/>
            </h:outputText>
        </p:column>
 		<p:column headerText="Salary" >
            <h:outputText value="#{employee.salary}" />
        </p:column>
        <p:column style="width:32px">
            <p:commandButton update="display" oncomplete="employeeDialog.show()"
                    image="ui-icon ui-icon-search">
                <f:setPropertyActionListener value="#{employee}"
                    target="#{tableBean.employeeSelected}" />
            </p:commandButton>
  
        </p:column>
       <f:facet name="footer">
            In total there are #{fn:length(tableBean.employees)} employees.
        </f:facet>

    </p:dataTable>
	 <p:dialog header="Employee Detail" widgetVar="employeeDialog" resizable="false"
              width="200" showEffect="explode" hideEffect="explode">

        <h:panelGrid id="display" columns="2" cellpadding="4">

            

            <h:outputText value="Name:" />
            <h:outputText value="#{tableBean.employeeSelected.firstName}" />

            <h:outputText value="Last Name:" />
            <h:outputText value="#{tableBean.employeeSelected.lastName}" />

        </h:panelGrid>
    </p:dialog>
		</h:form>
		</div>
</ui:define>
</ui:composition>

The default single row selection is

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                template="../templates/ui.xhtml">
	<ui:define name="content">
	<h1 class="title ui-widget-header ui-corner-all">Simple DataTable</h1>
		<div class="entry">
		<h:form prependId="false">
		<p:dataTable var="employee" value="#{tableBean.employees}" selection="#{tableBean.employeeSelected}">

        <f:facet name="header">
            List of Employees 
        </f:facet>
		
		<p:column selectionMode="single" /> 
        
        <p:column>
            <f:facet name="header">
                First Name
            </f:facet>

            <h:outputText value="#{employee.firstName}" />

           
        </p:column>

        <p:column headerText="Last Name">
            <h:outputText value="#{employee.lastName}" />
        </p:column>

        <p:column headerText="Email">
            <h:outputText value="#{employee.email}" />
        </p:column>

        <p:column headerText="Phone" >
            <h:outputText value="#{employee.phoneNumber}" />
             <f:facet name="footer">
                Internal Phone
            </f:facet>
        </p:column>

 		<p:column headerText="Hire Date" >
            <h:outputText value="#{employee.hireDate}" >
            	<f:convertDateTime type="date" dateStyle="medium"/>
            </h:outputText>
        </p:column>
 		<p:column headerText="Salary" >
            <h:outputText value="#{employee.salary}" />
        </p:column>
       <f:facet name="footer">
       		<p:commandButton value="View" update="display" oncomplete="employeeDialog.show()"
                    image="ui-icon ui-icon-search" />
                           
            In total there are #{fn:length(tableBean.employees)} employees.
        </f:facet>

    </p:dataTable>
			 <p:dialog header="Employee Detail" widgetVar="employeeDialog" resizable="false"
              width="200" showEffect="explode" hideEffect="explode">

        <h:panelGrid id="display" columns="2" cellpadding="4">

            

            <h:outputText value="Name:" />
            <h:outputText value="#{tableBean.employeeSelected.firstName}" />

            <h:outputText value="Last Name:" />
            <h:outputText value="#{tableBean.employeeSelected.lastName}" />

        </h:panelGrid>
    </p:dialog>
		</h:form>
		</div>
</ui:define>
</ui:composition>

The default multiple rows selection is

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                template="../templates/ui.xhtml">
	<ui:define name="content">
	<h1 class="title ui-widget-header ui-corner-all">Simple DataTable</h1>
		<div class="entry">
		<h:form prependId="false">
		<p:dataTable var="employee" value="#{tableBean.employees}" selection="#{tableBean.employeesSelected}">

        <f:facet name="header">
            List of Employees 
        </f:facet>
		
		<p:column selectionMode="multiple" /> 
        
        <p:column>
            <f:facet name="header">
                First Name
            </f:facet>

            <h:outputText value="#{employee.firstName}" />

           
        </p:column>

        <p:column headerText="Last Name">
            <h:outputText value="#{employee.lastName}" />
        </p:column>

        <p:column headerText="Email">
            <h:outputText value="#{employee.email}" />
        </p:column>

        <p:column headerText="Phone" >
            <h:outputText value="#{employee.phoneNumber}" />
             <f:facet name="footer">
                Internal Phone
            </f:facet>
        </p:column>

 		<p:column headerText="Hire Date" >
            <h:outputText value="#{employee.hireDate}" >
            	<f:convertDateTime type="date" dateStyle="medium"/>
            </h:outputText>
        </p:column>
 		<p:column headerText="Salary" >
            <h:outputText value="#{employee.salary}" />
        </p:column>
       <f:facet name="footer">
       		<p:commandButton value="View" update="display" oncomplete="employeeDialog.show()"
                    image="ui-icon ui-icon-search" />
                           
            In total there are #{fn:length(tableBean.employees)} employees.
        </f:facet>

    </p:dataTable>
			 <p:dialog header="Employee Detail" widgetVar="employeeDialog" resizable="false"
              width="250" height="300"  showEffect="explode" hideEffect="explode">
		
				<p:dataList id="display"  
                value="#{tableBean.employeesSelected}" var="selectedEmployee">  	             
                Name: #{selectedEmployee.firstName}, Last Name: #{selectedEmployee.lastName}  
	         </p:dataList>  
        
    		</p:dialog>
		</h:form>
		</div>
</ui:define>
</ui:composition>