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)
78578ce61980MercedesYellow
005d55261968HondaYellow
2fdb50ec2009FordYellow
495a3d171991AudiWhite
8d3e5d292005FiatMaroon
10183ca72005AudiYellow
5969e6c41978AudiBlack
2623d9411963AudiSilver
dcd61e8c2006MercedesBlack
2128e3b91994AudiSilver

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.