Close

PrimeFaces - Responsive DataTable Example

[Last Updated: Sep 6, 2017]

This example demonstrates how to create responsive DataTable so that it can be displayable on all screen sizes. We just need to use reflow="true" with <p:dataTable /> tag.

Creating managed bean

@ManagedBean
@ViewScoped
public class EmployeeBean {
  private List<Employee> employeeList = new ArrayList<>();
    .............
  public List<Employee> getEmployeeList () {
      return employeeList;
  }
}
public class Employee {
  private long id;
  private String name;
  private String phoneNumber;
  private String address;
    .............
}

JSF page

src/main/webapp/index.xhtml

<p:dataTable var="employee"
             value="#{employeeBean.employeeList}"
             reflow="true">
    <p:column headerText="Id">
        <h:outputText value="#{employee.id}"/>
    </p:column>

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

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

    <p:column headerText="Address">
        <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

Resizing to smaller size:

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 Responsive Example Select All Download
  • data-table-responsive
    • src
      • main
        • java
          • com
            • logicbig
              • example
        • webapp
          • index.xhtml

    See Also