JARCH SHOWCASE
JARCH SHOWCASE
DataTable - Reorder Both columns and rows can be reordered using dragdrop.
Draggable Columns
IdYearBrandColor
62eadbbd1983VolkswagenBrown
c8d1cc7f1976AudiMaroon
301b06871968MercedesSilver
dbfc589c1984VolvoMaroon
0474718f1990VolkswagenBrown
e87a5e231987VolvoMaroon
a91e238b2004VolvoBlack
9041a0521984VolvoOrange
f0b05d6f1982FordOrange
788cd2e41964BMWSilver
Draggable Rows
IdYearBrandColor
<a:form id="form">
    <a:growl id="msgs" showDetail="true" />

    <a:dataTable var="car" value="#{dtReorderView.cars1}" draggableColumns="true" style="margin-bottom:20px">
        <f:facet name="header">
            Draggable Columns
        </f:facet>
        <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>

    <a:dataTable var="car" value="#{dtReorderView.cars2}" draggableRows="true">
        <a:ajax event="rowReorder" listener="#{dtReorderView.onRowReorder}" update=":form:msgs" />
        <f:facet name="header">
            Draggable Rows
        </f:facet>
        <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>
</a:form>
                
JARCH, Copyright © 2022 All rights reserved. Running JARCH 24.3.0-SNAPSHOT on PrimeFaces-12.0.0 on Mojarra-2.3.13.