PrimeFaces - DataTable Selection Event Example

This example demonstrates how to utilize DataTable's selection event to update a part of the page based on the selection.

Example

JSF page

src/main/webapp/index.xhtml

<h:form id="mainForm">
    <table>
        <tr>
            <td style="width:300px;border:solid 1px gray;">
                <p:dataTable var="employee"
                             value="#{employeeBean.employeeList}"
                             selectionMode="single"
                             rowKey="#{employee.id}"
                             selection="#{employeeBean.selectedEmployee}"
                             scrollable="true" scrollHeight="400">
                    <p:ajax event="rowSelect"
                            update="mainForm:detailsPanel"/>
                    <p:column headerText="Id">
                        <h:outputText value="#{employee.id}"/>
                    </p:column>

                    <p:column headerText="Name">
                        <h:outputText value="#{employee.name}"/>
                    </p:column>
                </p:dataTable>
            </td>
            <td style="vertical-align:top;padding: 50px; ">
                <p:outputPanel id="detailsPanel" style="display:block">
                    <h3>Details:</h3>
                    <table>
                        <tr>
                            <td>Name</td>
                            <td>#{employeeBean.selectedEmployee.name}</td>
                        </tr>
                        <tr>
                            <td style="width:200px;">Phone Number</td>
                            <td>#{employeeBean.selectedEmployee.details.phoneNumber}</td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>#{employeeBean.selectedEmployee.details.address}</td>
                        </tr>
                        <tr>
                            <td>Department</td>
                            <td>#{employeeBean.selectedEmployee.details.dept}</td>
                        </tr>
                        <tr>
                            <td>Email</td>
                            <td>#{employeeBean.selectedEmployee.details.email}</td>
                        </tr>
                        <tr>
                            <td>Employed Since</td>
                            <td>#{employeeBean.selectedEmployee.details.employedSince}</td>
                        </tr>
                    </table>
                </p:outputPanel>
            </td>
        </tr>
    </table>
</h:form>

Creating managed bean

@ManagedBean
@ViewScoped
public class EmployeeBean {
  private List<Employee> employeeList = new ArrayList<>();
  private Employee selectedEmployee;
    .............
  public void setSelectedEmployee(Employee selectedEmployee) {
      this.selectedEmployee = selectedEmployee;
  }

  public Employee getSelectedEmployee() {
      return selectedEmployee;
  }

  public List<Employee> getEmployeeList() {
      return employeeList;
  }
}

public class Employee {
  private long id;
  private String name;
  private EmployeeDetails details;
    .............
}

public class EmployeeDetails {
  private String phoneNumber;
  private String address;
  private String email;
  private Date employedSince;
  private String dept;
    .............
}

mvn tomcat7:run-war

Output

Example Project

Dependencies and Technologies Used:

• primefaces 6.1 primefaces
• jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• datafactory 0.8: Library to generate data for testing.
• JDK 1.8
• Maven 3.3.9