JARCH SHOWCASE
JARCH SHOWCASE
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)
2c110d111973BMWBlack
d2abbaa21982HondaMaroon
a4f0ddc61989VolvoMaroon
a08e39151962FiatRed
372e9e112008FordOrange
c02820231996FiatYellow
efad19d41989MercedesRed
a709cbd01981AudiSilver
c7c7541a1977VolkswagenBlue
312e866d2001FordBrown

Reflow

<h3 style="margin-top:0">Column Priority</h3>
<a:dataTable var="car" value="#{dtBasicView.cars}">
    <a:column headerText="Id">
        <h:outputText value="#{car.id}" />
    </a:column>

    <a:column headerText="Year (p3)" priority="3">
        <h:outputText value="#{car.year}" />
    </a:column>

    <a:column headerText="Brand (p2)" priority="2">
        <h:outputText value="#{car.brand}" />
    </a:column>

    <a:column headerText="Color (p4)" priority="4">
        <h:outputText value="#{car.color}" />
    </a:column>
</a:dataTable>

<h3>Reflow</h3>
<a:dataTable var="car" value="#{dtBasicView.cars}" reflow="true" rows="5" paginator="true">
    <a:column headerText="Id">
        <h:outputText value="#{car.id}" />
    </a:column>

    <a:column headerText="Year">
        <h:outputText value="#{car.year}" />
    </a:column>

    <a:column headerText="Brand">
        <h:outputText value="#{car.brand}" />
    </a:column>

    <a:column headerText="Color">
        <h:outputText value="#{car.color}" />
    </a:column>
</a:dataTable>
                
JARCH, Copyright © 2022 All rights reserved. Running JARCH 24.3.0-SNAPSHOT on PrimeFaces-12.0.0 on Mojarra-2.3.13.