Primefaces Cookbook Second Edition

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 ...