JARCH SHOWCASE
JARCH SHOWCASE
DataTable - Reorder Both columns and rows can be reordered using dragdrop.
Draggable Columns
IdYearBrandColor
d4eb04d51995HondaBlue
8d6c605b1985FiatBrown
c77f8ff61990FiatWhite
2c4e5fab1983VolkswagenBlue
9a445c181961MercedesWhite
3fae91fe1995VolvoBlue
392c40b82003FiatSilver
f77ff9d21984RenaultMaroon
e3083a9b1986HondaBlack
005207d62006RenaultBlue
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.