DataTable - Reorder

Both columns and rows can be reordered using dragdrop.

Draggable Columns
IdYearBrandColor
ad86c3fb1973BMWBlack
3db342ea1990BMWMaroon
7795fba02008FiatYellow
b8ec560b1967FiatYellow
249f94c21975FiatBrown
1285aef31997MercedesYellow
edc331f31992JaguarWhite
1327fc4a1983FordBrown
cbb53b061978HondaBrown
13049ab81962HondaYellow
Draggable Rows
IdYearBrandColor
08f035851974HondaBrown
467a064d1982VolvoMaroon
f57907f72000VolvoGreen
9458d9fd2005FiatBlack
5453ccae2006BMWSilver
518815ab1981JaguarBlue
605fa14e1992HondaBrown
bb4724d71996FiatRed
e9483f471993VolvoWhite
c1a381e61996VolvoBrown
<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>