DataTable - Reorder

Both columns and rows can be reordered using dragdrop.

Draggable Columns
IdYearBrandColor
649604402008VolkswagenRed
9b6d3f581971FordGreen
bdba2f271985VolkswagenBlue
3641cfef1982FordBrown
a3f2c5a41970FordBlack
b45dd1041994FiatBlack
6e7267bd1994RenaultYellow
1fc1551c1985FordGreen
89b7a75f1967RenaultRed
dda16f081976FordBlue
Draggable Rows
IdYearBrandColor
9b68ac1d1988FiatMaroon
a78efb6c1988FordBlack
c2349b951994JaguarBrown
d3cc9c1e1964VolkswagenGreen
d63302041962MercedesSilver
3140f1b32008BMWBrown
fd63bf8f2008FiatSilver
04fd9f3b1996MercedesGreen
c81147171973MercedesGreen
8f96bdb42008RenaultYellow
<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>