DataTable - Reorder

Both columns and rows can be reordered using dragdrop.

Draggable Columns
IdYearBrandColor
52d56cd41988RenaultBrown
ef61a1cf1967BMWBlack
005d6d561977FordYellow
6e73d9ee1977FiatBlack
eea42c4f2003FordYellow
882a8c941970JaguarWhite
3adcf6032004BMWRed
c28853fd2009RenaultSilver
d50e2aa11985RenaultBlack
945832832009VolkswagenBlack
Draggable Rows
IdYearBrandColor
883892721962BMWBlue
03cb16751971VolkswagenSilver
f172b5f61980VolvoSilver
28eed8072004RenaultSilver
e6896e441969FordWhite
160c6e042004BMWMaroon
3601438e1982MercedesBlack
5cb59b4f2005MercedesBlack
1ae241fd1974VolvoYellow
1addfb3c1979RenaultRed
<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>