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)
4d26e4341968FordMaroon
6aea98731985AudiBlack
79f5a21b1996BMWYellow
029986672009VolvoYellow
29f4d4671996RenaultOrange
5f7c920f1981VolvoWhite
52568d352000JaguarMaroon
f4a5f4942005FordSilver
84c21d872003VolkswagenMaroon
13f9a8321978AudiBlack

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.