DataTable - Reorder

Both columns and rows can be reordered using dragdrop.

Documentation
Draggable Columns
IdYearBrandColor
7645ab872000BMWMaroon
b78067a81991JaguarWhite
6fc5d8832001FordMaroon
e6c8ba7f1987AudiMaroon
56f7e24d1966JaguarSilver
f547b30b1982VolvoRed
1872fd5b1966MercedesBlack
379d46c61970VolkswagenYellow
180190281992FiatMaroon
df1a26601966FordBrown
Draggable Rows
IdYearBrandColor
a404fc671962FordGreen
81cc4fcf1965AudiWhite
431f9e401968VolkswagenWhite
f6dbecb31964RenaultBrown
c99f2de31971HondaBlack
de47f3591979RenaultBrown
0452cbd91960FiatBlack
026611171976VolvoGreen
223f3c1e1997AudiBlack
e717472b1971VolkswagenMaroon
<h:form id="form">
    <p:growl id="msgs" showDetail="true" skipDetailIfEqualsSummary="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>

FREE THEMES

Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.