DataTable - Reorder

Both columns and rows can be reordered using dragdrop.

Draggable Columns
IdYearBrandColor
e309c7a11994MercedesRed
afb921512008RenaultSilver
86e847641969AudiBlack
ac5ac58b1981AudiYellow
ecc7f9d42009AudiWhite
0e4bb9ee1995JaguarRed
550445412007VolvoMaroon
4494a6bd1981VolvoBlack
e51f87252002BMWRed
ea4fad2b1983FiatBlack
Draggable Rows
IdYearBrandColor
73a316fa1982MercedesSilver
9207a6fe1981BMWBlack
fb9a8f121978FordBrown
3fd632bc1976HondaBlack
490236bb1993AudiBlue
d9668f881999VolkswagenBrown
ec9a91f82005MercedesBrown
b06814f81981MercedesWhite
fa4151141992VolkswagenOrange
33747f091991RenaultBlue
<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>