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)
ee9cfff92002MercedesSilver
2e19a9db1983VolvoRed
a764a6a31979AudiBlue
96e143d72001MercedesYellow
7793eed71971HondaOrange
ecc2e64f2007VolkswagenWhite
f5849d781973HondaMaroon
94e10b2b1985JaguarBlack
9fd08bd31981VolkswagenBrown
b84496ba1977FordYellow

Reflow

IdYearBrandColor
ee9cfff92002MercedesSilver
2e19a9db1983VolvoRed
a764a6a31979AudiBlue
96e143d72001MercedesYellow
7793eed71971HondaOrange
<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>