Mirage LIVE PREVIEW

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.

Documentation

Column Priority

IdYear (p3)Brand (p2)Color (p4)
09baf5231979VolvoMaroon
a2ec48f71999VolkswagenRed
ddf4a5d91979VolvoMaroon
9ad52b581990FordRed
2f347f3f1988HondaRed
f8c7a3a81971RenaultBrown
725c70602005VolvoWhite
f37aed162001MercedesBlue
3e973bf71981FordRed
ccaf82f62003VolkswagenMaroon

Reflow

IdYearBrandColor
09baf5231979VolvoMaroon
a2ec48f71999VolkswagenRed
ddf4a5d91979VolvoMaroon
9ad52b581990FordRed
2f347f3f1988HondaRed
<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>