Starting with PrimeFaces v5.2, it's possible to make the dataTable
component act responsively according to the resizing of the browser.
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.
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:
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
.