JARCH SHOWCASE
JARCH SHOWCASE
DataTable - Reorder Both columns and rows can be reordered using dragdrop.
Draggable Columns
IdYearBrandColor
d0a433081974JaguarOrange
c162342b1979FordBlue
89b506f72006FiatRed
b69254341988AudiBrown
19131eac2002JaguarBrown
f878cc121968HondaOrange
7b31c1ba1962FordYellow
3b19438d2004FordBrown
2ba8cee01966BMWSilver
c46fb6232006JaguarMaroon
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.