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)
0b10ac561966MercedesMaroon
8596faa21961HondaWhite
1b03ee382002MercedesRed
aa69b2862002MercedesWhite
7ff2ae572009AudiOrange
066f83b31995BMWYellow
4c23697f1975FiatWhite
4a6f172d1986BMWOrange
3d5236041985FordGreen
c3b8b68c1977RenaultYellow

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.