DataTable - Reorder

Both columns and rows can be reordered using dragdrop.

Documentation
Draggable Columns
IdYearBrandColor
a1e73d671988BMWGreen
ee8b85e71983MercedesBlack
4adeef0e1999FordBlack
c0437fdf2008VolvoMaroon
6aa455d71980MercedesBlack
9a1431101963FordMaroon
ddc4b8811996HondaBlue
0c5b38001980BMWRed
135ba6701971HondaOrange
ae0536951984FiatBlack
Draggable Rows
IdYearBrandColor
bce534a02006FordSilver
dbc6c9971985BMWBlack
b5f42e391968MercedesBrown
5910479d2007AudiBlue
731500971978VolkswagenBlack
b65d39642000FordBlue
f834a52c1967FiatYellow
9653b3d71988MercedesBlue
50cc07021969VolvoBlack
1abc883a1981AudiBlack
<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.