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)
60fcdf492003FordYellow
6f09064a1978AudiGreen
e68808ca1971JaguarBlue
dbd7be821987FiatSilver
f2aff4ad2004RenaultYellow
0173c7b51970RenaultGreen
c39fafbe1998VolkswagenRed
1dcffc631981VolvoRed
a5dd89e82009RenaultOrange
41de9b1d2003VolkswagenSilver

Reflow

IdYearBrandColor
60fcdf492003FordYellow
6f09064a1978AudiGreen
e68808ca1971JaguarBlue
dbd7be821987FiatSilver
f2aff4ad2004RenaultYellow
<h:form>
<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>
</h:form>