DataTable - Reorder

Both columns and rows can be reordered using dragdrop.

Documentation
Draggable Columns
IdYearBrandColor
45fc29ea1992RenaultWhite
ed87c8fa1986HondaBrown
360e4d9c1989BMWBlue
4a6bbfe21984BMWBlue
061c12af1967BMWWhite
9f4f28351977FiatYellow
174310d01972FordGreen
fdd9e8d91968AudiGreen
3ab4ab7b1984MercedesBrown
7b8ffa001970RenaultBrown
Draggable Rows
IdYearBrandColor
d83d69921996VolkswagenSilver
22a0c0e81986JaguarMaroon
6f6cd6581961HondaMaroon
e1fc33361993MercedesMaroon
c11eaa441970JaguarBlack
d586d3431992AudiBrown
68e5e1671968JaguarWhite
10884b801965FiatOrange
e369a24f1994FordRed
87b74ef81986RenaultMaroon
<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.