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)
319d77142002VolkswagenRed
c45c692c1972RenaultRed
787bac941974BMWSilver
d3d350b51991RenaultMaroon
de25511f1994FordSilver
4da8d56a1960VolkswagenBlack
b52dec921972FiatOrange
481ebfeb1966BMWGreen
4f8f11961983FordWhite
25192dc91972FordBlack

Reflow

IdYearBrandColor
319d77142002VolkswagenRed
c45c692c1972RenaultRed
787bac941974BMWSilver
d3d350b51991RenaultMaroon
de25511f1994FordSilver
<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>