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)
57cabc4e2007MercedesBlack
12c328881993AudiRed
8d959c6d1992VolvoBrown
5758e25f1991RenaultRed
b5547b191986RenaultMaroon
f90b3cad1988MercedesBlue
e734a3581977MercedesMaroon
f7a8255f1979MercedesBrown
288c002d1993FiatBlue
cbac330e1999FiatWhite

Reflow

IdYearBrandColor
57cabc4e2007MercedesBlack
12c328881993AudiRed
8d959c6d1992VolvoBrown
5758e25f1991RenaultRed
b5547b191986RenaultMaroon
<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.2-SNAPSHOT on Mojarra-2.3.2.