Angular table-sort and drag and drop table row conflict

7
votes

I am using angular table-sort and angular drag-drop in my project. When I am dragging a row and trying to drop it to another row, then table sort forcefully sort the rows to their previous position.

If I remove the table sort directive ts-repeat, then drag and drop works perfectly. I also need default table column sorting "Age" ascending. I have made an example on plunker for better understanding. https://plnkr.co/edit/pHlTufpayFAB4he8bN6y

So, how to prevent table-sort when drag and dropping a row?

Can anyone help me solving this issue? I would really appreciate this. Thanks in advance.

3
javascriptangularjsdrag-and-droptablesort

3 Answers

6
votes

I think you should just get rid of ts-repeat, and only sort the data initially (in your service/controller). It's not a bug, it's a feature. Imagine, that you remove and then re-add an element to a table, which is sorted. You want it to keep sorted, right?

2
votes

You can try by using Angular ui-sortable instead of angular drag-drop. I think it will work for you.

0
votes

PrimeNG Table offers row reordering with drag drop, you need upcoming 5.2.1 though.

https://www.primefaces.org/primeng/#/table/reorder