DataTable - Reorder

Both columns and rows can be reordered using dragdrop.

Documentation
Draggable Columns
IdYearBrandColor
19c3ee041973FiatYellow
f97aa5221990FiatBrown
ffc4af151993AudiOrange
d724b50e1970VolvoRed
71f3cfbc1990MercedesBrown
6970f4091969HondaMaroon
5e29555e1966BMWMaroon
cdf2edf41961JaguarBlue
64c52faa1986HondaBrown
4a44b0921977JaguarYellow
Draggable Rows
IdYearBrandColor
04fda6c21991RenaultRed
7742722d1979HondaSilver
c97e28391971VolkswagenGreen
1809eec01999JaguarWhite
5672c4021964FordSilver
6bf5d7472006FordWhite
4c6c65cf1994MercedesRed
63d84e3c2007JaguarYellow
efd5826b1971VolvoBlack
ce2b5b6c1962FordMaroon
<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.