Close

PrimeFaces - DataTable Filtering

[Last Updated: Jun 12, 2017]

The managed bean

@ManagedBean
@ViewScoped
public class EmployeeBean {
  private List<Employee> employeeList;
  private List<Employee> filteredEmployeeList;

  @PostConstruct
  public void postConstruct() {
      employeeList = DataService.INSTANCE.getEmployeeList();
  }

  public List<Employee> getEmployeeList() {
      return employeeList;
  }
    .............
}
public class Employee {
  private long id;
  private String name;
  private String phoneNumber;
  private String address;
  private String department;
  //getters/setters
    .............
}

The view

src/main/webapp/index.xhtml

<p:dataTable var="employee" value="#{employeeBean.employeeList}"
             filteredValue="#{employeeBean.filteredEmployeeList}"
             widgetVar="employeeWidget">

    <f:facet name="header">
        <p:outputPanel>
            <h:outputText value="Search all:"/>
            <p:inputText id="globalFilter"
                         onkeyup="PF('employeeWidget').filter()"
                         style="width:150px" placeholder="Search text"/>
        </p:outputPanel>
    </f:facet>

    <p:column headerText="Id" filterBy="#{employee.id}" filterMatchMode="contains">
        <h:outputText value="#{employee.id}"/>
    </p:column>

    <p:column headerText="Name" filterBy="#{employee.name}" filterMatchMode="contains">
        <h:outputText value="#{employee.name}"/>
    </p:column>

    <p:column headerText="Department" filterBy="#{employee.department}"
              filterMatchMode="exact">
        <f:facet name="filter">
            <p:selectOneMenu onchange="PF('employeeWidget').filter()" >
                <f:selectItem itemLabel="Select dept" itemValue="#{null}" noSelectionOption="true" />
                <f:selectItems value="#{employeeBean.deptList}" />
            </p:selectOneMenu>
        </f:facet>
        <h:outputText value="#{employee.department}"/>
    </p:column>

    <p:column headerText="Phone Number" filterBy="#{employee.phoneNumber}"
              filterMatchMode="contains">
        <h:outputText value="#{employee.phoneNumber}"/>
    </p:column>

    <p:column headerText="Address" filterBy="#{employee.address}"
              filterMatchMode="contains">
        <h:outputText value="#{employee.address}"/>
    </p:column>
</p:dataTable>

To try examples, run embedded tomcat (configured in pom.xml of example project below):

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

Primefaces DataTable Filtering Example Select All Download
  • data-table-filtering
    • src
      • main
        • java
          • com
            • logicbig
              • example
        • webapp
          • index.xhtml

    See Also