JARCH SHOWCASE
JARCH SHOWCASE
DataTable - Reorder Both columns and rows can be reordered using dragdrop.
Draggable Columns
IdYearBrandColor
81c4f0cd2006FiatSilver
2b5452081997BMWYellow
9bea78691967FordMaroon
3736d4901990HondaGreen
1502a5db1966AudiYellow
cf21e5f01964MercedesMaroon
8b1bfa7b1982AudiMaroon
8704f7bc1988JaguarGreen
70de4fd61989FiatBlue
cebea67a1999AudiOrange
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.