DataTable - Reorder

Both columns and rows can be reordered using dragdrop.

Draggable Columns
IdYearBrandColor
1457d70f1986VolkswagenWhite
30cf13381981HondaMaroon
ba407f631965AudiBlack
70d8b47c1963FiatYellow
c6de26c92007FordRed
f42ca2421984FiatMaroon
b1bdd1762004AudiBrown
433519681982HondaBrown
80d13d1c1991JaguarWhite
43bf50511982RenaultMaroon
Draggable Rows
IdYearBrandColor
aa16c45e2007FordYellow
2207c3752004AudiOrange
f58f014b1967FiatMaroon
82fbf9b31971JaguarWhite
7e88c2571994HondaRed
7e6ede911988AudiBlack
0d3f678f1963AudiBlack
5d2764811979FordSilver
9ba8c90d1965HondaBlack
993fad911968BMWBlue
<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>