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