Making dataTable responsive

Starting with PrimeFaces v5.2, it's possible to make the dataTable component act responsively according to the resizing of the browser.

How to do it…

The priority attribute of <p:column> should be set to a value between 1 to 6, from the highest priority to the lowest one. A definition of the priority attribute is given here:

<p:dataTable id="withPriority" var="car"
  value="#{dataTableBean.detailedCars}">
  <p:column headerText="Name">
    <h:outputText value="#{car.name}" />
  </p:column>
  <p:column headerText="Year" priority="1">
    <h:outputText value="#{car.year}" />
  </p:column>
  <p:column headerText="Color" priority="3">
    <h:outputText value="#{car.color}" />
  </p:column>
  <p:column headerText="Seat Number" priority="2">
    <h:outputText value="#{car.seatNumber}" />
  </p:column>
</p:dataTable>

Here, the color column has the lowest priority and will be dropped first when the browser is resized to a smaller size.

There's more…

By setting the reflow attribute of dataTable to true, it's possible to visualize the rows of the table in stacked mode when the browser is resized to a smaller size. A visual output of the table in default mode and in resized mode is given here:

There's more…

PrimeFaces Cookbook Showcase application

This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on application servers compatible with Servlet 3.x, such as JBoss WildFly and Apache TomEE.

The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter5/responsiveDataTable.jsf.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.18.101