How do I reorder rows in DataTable using drag drop?

Question

I am using PrimeFaces and JSF. Can anyone tell me how do I reorder rows of a DataTable using Primefaces drag and drop component?

Answer 1

Currently with in the PrimeFaces framework (v2.2.1 and 3.0) this is not possible with <p:dataTable>.

There is an open PrimeFaces Issue 511 <p:dataTable> draggable columns to add the Yahoo widget datatable draggableColumns attribute to the PrimeFaces <p:dataTable> but no target version is set yet.

If you would like to see this added to PrimeFaces star the issue to help give it higher priority.

Answer 2

This is definitely an older question, but the answer needs updating. This is now doable using the draggableColumns="true" attribute on your p:dataTable.

Your dataTable would then look as such :

<p:dataTable var="i" value="#{bean.data}" draggableColumns="true">

Sources :

• PrimeFaces Showcase : DataTable - Columns Reordering

Answer 3

This feature is now available from PrimeFaces 5.0:

Usage is very simple by just enabling draggableRows option and also an optional rowReorder ajax behavior is provided getting a ReorderEvent with index information for flexibility.

Source : http://blog.primefaces.org/?p=3026

You can also have a look at the showcase here: http://www.primefaces.org/showcase/ui/data/datatable/reorder.xhtml