JARCH SHOWCASE
JARCH SHOWCASE
DataTable - Reorder Both columns and rows can be reordered using dragdrop.
Draggable Columns
IdYearBrandColor
8c226a4b2008JaguarRed
0c5e5b081977FordRed
00e7290c1973VolkswagenGreen
4630800e1990RenaultMaroon
93df56632002HondaBrown
6e1435182007RenaultRed
25df794a1979VolvoOrange
b78d41de1998MercedesOrange
457c985b1970HondaBlack
ba5edc122001VolkswagenBrown
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.