DataTable - Reorder

Both columns and rows can be reordered using dragdrop.

Draggable Columns
IdYearBrandColor
f14690e51991HondaYellow
a757ed952009RenaultBlack
d2ba1c862006VolvoBrown
25f7d1b61977HondaBlack
68990f012005AudiRed
876788eb2008HondaMaroon
9fa7b0c82003BMWMaroon
14d041e21999JaguarBlack
d8658ecc2000AudiRed
b4b7c7561964BMWGreen
Draggable Rows
IdYearBrandColor
d33415252004HondaYellow
2806a5642003MercedesRed
2b37e28d1988JaguarOrange
d29c40021974JaguarGreen
2f03fdb01977VolkswagenRed
1b237fc71978FiatWhite
6f7725bb2008AudiMaroon
8f7924d91960FiatBrown
c49f31992008FordBlue
a7a4d5771999JaguarOrange
<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>