DataTable - Reorder

Both columns and rows can be reordered using dragdrop.

Draggable Columns
IdYearBrandColor
ff2cd6b11969JaguarBrown
365799cf1990VolkswagenBlack
1cf116341979VolvoSilver
409bbf8f1997FordOrange
2ed315d11986BMWGreen
9de2a1fb1999JaguarSilver
7c0260141961VolvoYellow
d7e5e1691977AudiBlack
b37098951963HondaBrown
5751afa81979VolvoSilver
Draggable Rows
IdYearBrandColor
07c576fa1983AudiBrown
ca8658512007VolkswagenBlack
898c098a1981AudiWhite
137f921f1960VolvoBlue
cdfdfee51989MercedesRed
ea0704c81978HondaRed
23c69a2b1983VolvoYellow
a5d971121999VolvoYellow
952ed1f71972HondaMaroon
0228d2681965AudiWhite
<h:form id="form">
    <p:growl id="msgs" showDetail="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>