Primeng: Row reordering with DragDrop for TurboTable

[luking4]

Hi,
One of the important functionality of datatable could be dragging and dropping rows within table.

Even though draggable and dropable component is available and example shows how to drag and drop from outside into datatable as below,

http://www.primefaces.org/primeng/#/dragdrop

There is no example or feature telling about dragging and reordering row within datatable like below example.

http://blog.primefaces.org/?p=3026
http://www.guriddo.net/demo/guriddojs/integrations/drag_drop_rows/index.html

Is it possible? if so, could you please provide code for it?

[reach4thelasers]

I would love to see this feature also

[zibeeze]

+1

[skdhir]

+1

[rklempert]

We need this functionality as well. We are currently combining ng2-dnd with p-datatable. However, it doesn't work as nice because as you drag [value] keeps getting updated nonstop and all the rows flicker back and forth. The only way to control it is to specify [rowTrackBy] function to be () => {}. This was present in 1.1.1, but was removed in 1.1.3.

[ashishjain16]

+1

[cyberrranger]

+1

[phoenixchinar]

+1

[taivu]

would beer someone to add this.

[gabrielalack]

+1

[vatsalpande]

+1

[a-kolybelnikov]

+1
any update on this request? maybe an estimated release date? need it badly.

[mgudesblatart]

+1

[guntram]

@taivu how much beer?? :beers:

[domantasjurkus]

+1

[GuzzoLM]

My issue was similar, I had to drag a row from table A and drop into a row of table B.
Managed to do this with ng-template, but it would be really nice to see an out-of-the-box funcionality doing this.

[jrotondo-madaket]

Upvoted. Need this.

[israelkozitz]

+1

[arwindgao]

+1

[akolybelnikov]

I needed user to be able to reorder rows in the datatable by dragging. I have implemented it with ng2-dragula directive:
https://alligator.io/angular/drag-drop-ng2-dragula/
It has worked out-of-the-box and even the transition graphics are looking fine. Perhaps this can help somone out.

[arwindgao]

@akolybelnikov hi, ur post is really helpful for pure html tag situation, but i want to know if i can integrate dragula with primeng's data-table scenario, just like this post(https://github.com/primefaces/primeng/issues/2209), would you like to help on this? thanks in advance.

[akolybelnikov]

@arwindgao check this plunkr out:
https://embed.plnkr.co/Mivcv5/
I'm applying the dragular directive on the primeng pDatatable element and the rows can be reordered by drag and drop in the same table. Hope this helps.

[arwindgao]

It's works!!! Thanks!!! @akolybelnikov

[lasimone]

+1

[jrotondo-madaket]

Thanks so much @akolybelnikov! Your Plunker is genius!

[jrotondo-madaket]

One quick note about @akolybelnikov's plunker, after I implemented the solution, my app failed it's aot build. The "bag" declared in the primeNG table doesn't have a value within the typescript file, and Angular didn't like that.

For me, the solution was just to not pass the bag into primeDragula. It doesn't seem to need it:
<p-dataTable [value]="rows" [tableStyle]="{ 'table-layout': 'auto' }" primeDragula [dragulaModel]="rows" [dragulaOptions]="{ childContainerSelector: 'tbody', initAfterView: true }" #datatable>

I hope that helps someone.

[jdashcode]

+1

[tony-scialo]

+1

[healydwya]

+1

[andregodasi]

+1

[tburger]

+1

[rich4756]

+1

[Guttz]

+1

[cagataycivici]

We'll try this for new TurboTable targeting 5.2.0-RC2

[cagataycivici]

Moved to RC3 as we need to release RC2 asap.

[cagataycivici]

Checkmate!

[jdashcode]

Niiiiiiice

[alexwiese]

For those who are interested you can make the entire row draggable (not just the handle) by applying the handle directive to the actual cell.

      <td *ngFor="let col of columns" pReorderableRowHandle>
        {{rowData[col.field]}}
      </td>

[shorstki]

Any hook for handling reorder like onDragEnd? Can't find anything in the docs

Also is it possible to pass item property as pReordableRow? Tried multiple combinations but with no luck.