DataTable - Responsive DataTable has two responsive modes. In priority mode, visibility of columns are toggled based on the screen size and their priority (1-6). On the other hand in reflow mode, columns are displayed as stacked on smaller screens.

Column Priority

IdYear (p3)Brand (p2)Color (p4)
58d3c3e81993BMWMaroon
830c68451996VolvoSilver
7704bde71962AudiBlack
22e0e6ad1966MercedesBlack
f2c1481a1987RenaultGreen
5078edf52000HondaRed
1c329ecb1987VolkswagenGreen
9193171b1966HondaBrown
e94b97e91995FordGreen
4adf95501993HondaBlue

Reflow

IdYearBrandColor
58d3c3e81993BMWMaroon
830c68451996VolvoSilver
7704bde71962AudiBlack
22e0e6ad1966MercedesBlack
f2c1481a1987RenaultGreen
<h3 style="margin-top:0">Column Priority</h3>
<p:dataTable var="car" value="#{dtBasicView.cars}">
    <p:column headerText="Id">
        <h:outputText value="#{car.id}" />
    </p:column>

    <p:column headerText="Year (p3)" priority="3">
        <h:outputText value="#{car.year}" />
    </p:column>

    <p:column headerText="Brand (p2)" priority="2">
        <h:outputText value="#{car.brand}" />
    </p:column>

    <p:column headerText="Color (p4)" priority="4">
        <h:outputText value="#{car.color}" />
    </p:column>
</p:dataTable>

<h3>Reflow</h3>
<p:dataTable var="car" value="#{dtBasicView.cars}" reflow="true" rows="5" paginator="true">
    <p:column headerText="Id">
        <h:outputText value="#{car.id}" />
    </p:column>

    <p:column headerText="Year">
        <h:outputText value="#{car.year}" />
    </p:column>

    <p:column headerText="Brand">
        <h:outputText value="#{car.brand}" />
    </p:column>

    <p:column headerText="Color">
        <h:outputText value="#{car.color}" />
    </p:column>
</p:dataTable>
                
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.1.4 on Mojarra-2.2.10.