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)
ac13a8d61989FiatMaroon
c7c6e1c61998JaguarGreen
523117f61992FordBlue
116297b82004AudiBlue
45f4c7321982FiatBlack
8cf425e21975RenaultRed
4b76e38b1993VolvoOrange
40a0c0151983MercedesMaroon
d3f456661963HondaWhite
7ec5ae831985FiatMaroon

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.