Mirage LIVE PREVIEW

DataTable - Reorder

Both columns and rows can be reordered using dragdrop.

Documentation
Draggable Columns
IdYearBrandColor
471b881b1971AudiBlack
07609d3a1993RenaultSilver
244875f41970HondaWhite
712067821976HondaSilver
d7c607dd1986MercedesRed
dcd9e2b72001BMWBlue
d44f86711968FordWhite
f46821bf1992JaguarSilver
28d2493c1969FordGreen
c91ae0491999BMWMaroon
Draggable Rows
IdYearBrandColor
d2f4c3832007FiatWhite
592816342005BMWBlue
f9960ff22005FordRed
824674b71977VolkswagenMaroon
590839901998FordBrown
0df5c3831966BMWBlack
01a2d8291972AudiSilver
de679e492006MercedesBlue
59c97f391980JaguarBlue
4c9e83b81982RenaultSilver
<h:form id="form">
    <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="true" />
    
    <p:dataTable var="car" value="#{dtReorderView.cars1}" draggableColumns="true" style="margin-bottom:20px">
        <f:facet name="header">
            Draggable Columns
        </f:facet>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>

        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>

        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>
    
    <p:dataTable var="car" value="#{dtReorderView.cars2}" draggableRows="true">
        <p:ajax event="rowReorder" listener="#{dtReorderView.onRowReorder}" update=":form:msgs" />
        <f:facet name="header">
            Draggable Rows
        </f:facet>
        <p:column headerText="Id">
            <h:outputText value="#{car.id}" />
        </p:column>

        <p:column headerText="Year">
            <h:outputText value="#{car.year}" />
        </p:column>

        <p:column headerText="Brand">
            <h:outputText value="#{car.brand}" />
        </p:column>

        <p:column headerText="Color">
            <h:outputText value="#{car.color}" />
        </p:column>
    </p:dataTable>
</h:form>