DataTable - Reorder

Both columns and rows can be reordered using dragdrop.

Draggable Columns
IdYearBrandColor
78714d541988VolvoRed
05d80cbe1996VolvoWhite
5fe4c4e51991BMWRed
e08aaf3a1983FiatMaroon
8c5246701976BMWOrange
462688721969FiatYellow
602d02c21967RenaultBlack
c5c2f39c1973JaguarMaroon
aa8b55371965MercedesSilver
504fa1421996FordBlack
Draggable Rows
IdYearBrandColor
f0324c321964JaguarBrown
72aee05f1976FiatBlack
f1ed64ca1995FordRed
de7689701998VolkswagenMaroon
23827be01977RenaultOrange
3f5b77411985MercedesBlack
a81d54111992HondaBrown
5dcd14981973JaguarSilver
7adfdd911965JaguarOrange
e2661eb11990HondaSilver
<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>