DataTable - Reorder

Both columns and rows can be reordered using dragdrop.

Draggable Columns
IdYearBrandColor
3cc23b4f2007FordWhite
d087da231978VolkswagenYellow
e9f48a451966FiatGreen
11ece6ec1995BMWBrown
f9f13e141995AudiBlue
bc7192901991FordOrange
18fc68561979FiatGreen
7ee853e81982AudiGreen
dc428d031997FordGreen
3403ae6b1996VolvoGreen
Draggable Rows
IdYearBrandColor
90aa05bd1981AudiGreen
b0de461f1994RenaultOrange
525c7cea1978HondaBlue
76dc54e21991JaguarRed
4952083a2005MercedesOrange
e52b558a2005VolkswagenBlack
c4a06bef1974JaguarOrange
78c917831997MercedesOrange
1aaae1de1966BMWYellow
4525dcd31972BMWSilver
<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>