Primeng: Custom sorting breaks pagination

[svideau]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
https://plnkr.co/edit/5JyODfQTrASf6VR3iRfC

Current behavior

The first dataTable use a custom sort method : when called, the data is sorted but the dataTable is not refreshed.

Expected behavior

The same behavior as the 2sd datatable.
(As a sidenote, the resizableColumns="true" seems to break the display)

Minimal reproduction of the problem with instructions
Click on sort on the first column of the first table and compare the debug shown with the datatable.

• Angular version: 4.1.0

• PrimeNG version: 4.0.0

• Browser: [all]

[arossi90]

Same issue is happening to me now. I had a few tables working with customSort but when I upgraded I started to see the same error as you.
Is there anyworkaround ?

[svideau]

This problem seems to come from the immutable data management in the datatable. I managed to make the custom sorting work by using :
let old = this.dataSet;
old.sort(sorting);
this.dataSet = [...old];
to set the values in the dataTable, but even if the table is sorted, items with the same value will constantly change places whenever the mouse is moving.

[arossi90]

Your workaround is indeed working, but I noticed the paginator stops working as soon as I follow your method. Seems that I'll have to either wait or downgrade to a rc version.
I hope the primeng team is aware of this bug

[svideau]

I created this plunker to underline the new problems :
https://plnkr.co/edit/J4Kov6lxZsoVsEWTkv98
-custom sort is called each time the mouse is moving, changing the order of row with the same values (on Chrome 58.0, seems to work fine on edge and firefox...)
-paginator breaks when sorting using custom sort (on all browsers)

[fritteli]

We've got a similar problem: Sorting doesn't work with PrimeNG 4.0.0. It works with 4.0.0-rc.4, though. That includes standard and custom sorting.

We have implemented jumping to the next and previous element in the table with keyup/keydown. That exposes the erroneous behavior as follows:

• Standard sorting: When clicking on a table header, the table UI gets updated. But upon pressing keyup/keydown, a seemingly random element is selected in the UI --> I conclude: The displayed list in the UI is sorted, but not the array backing it. Thus, the positions and therefore the element indices of the UI list and the backing array diverge.
• Custom sorting: In the UI, nothing happens upon clicking the table header. But when navigating with the keyboard, also a seemingly random element is chosen. --> I conclude: The behavior is exactly inverse as in the standard case: The backing array is sorted correctly, but the UI is not updated accordingly.

I hope I've made myself clear.

[svideau]

For the custom sorting not updating the UI, the problem comes from the management of the backing array :
The following has been added to the primeng websites :

Managing Data
DataTable uses setter based checking to realize if the underlying data has changed to update the UI so your data changes such as adding or removing a record should always create a new array reference instead of manipulating an existing array. For example, use slice instead of splice when removing an item or use spread operator instead of push method when adding an item.

To deal with this, you have to use a syntax like this.dataSet = [...this.dataSet.sort(sorting)]; which create a new array, sorted as you want, and put it in the correct variable.

However, even if the display is correct, some features like the paginator still seems to be broken (can't paginate on an array sorted by a custom sorting method).

[fritteli]

Thanks for the hint, I now remember reading this ...
It works for custom sorting, but the standard sort is still broken. We're sticking with 4.0.0-rc.4 for now.

[svideau]

update : adding " sortMode="multiple"" in the datatable declaration seems to fix the paginator behavior with custom sorting.
No idea why.

[arossi90]

Adding sortMode="multiple" does fix the paginator, however I can't get it to enter the actual custom sort function when I added that. It seems it was using the default sorting function no matter the declaration.
In my case I'm sorting dates (dd/mm/yyyy format) and that column is the only one with a custom sorting function declaration. When I try to order it, it goes smooth but breaks the paginator. If I add sortMode=multiple, the paginator works but my function is no longer called.
I guess we're still kinda stuck

[omkarmjoshi]

Hi @arossi90 ,
we had same issue. Finally found the solution.
Instead of making custom sort for date use default sort i.e. make sortable true and field value should be in 'yyyy-mm-dd' format. If you want to display it any other format use ng-template

I tried it on latest version as well as 4.0.0-rc.3. i think this will work on any version which support numeric sort.
Hope this will help you

[arossi90]

@omkarmjoshi thanks for your suggestion!. I hadn't thought of it. Fortunately, one of the following updates (iirc 4.0.1) fixed the paginator going crazy and by adding sortMode=multiple did solve the main sorting issue. The same approach works for 4.0.2 btw.

[St3S0f]

@arossi90 I can confirm, a custom sort function reassigning the array + sortMode="multiple" seems to do the trick. What does not work for me with this setup are the table header sorting visuals hints. Can you confirm on your end? Thanks

[svideau]

@1uc4 I have the same problem with the table headers. as soon as the [sortMode]="multiple" is set, the visual hints seem broken, even without custom sorting.

[arossi90]

@1uc4 My bad. Upon further inspection, the custom sort mode was not being called (when using sortMode=multiple). But, when I used sortMode=Single or just avoided the sortMode attribute, the function was indeed being accessed. However, the rows star to break and the rows "order" themselves when you hover the mouse. Really weird behavior.
(Nice profile pic btw).
According to the last post update from primeng team (4.0.2), they were planning to release 4.03 with mainly bug fixes in 2 weeks. Hope this bug can make it there.

[svideau]

With the last release, using [sortMode]=multiple correctly call the custom sort function (2sd table in this example)
https://plnkr.co/edit/JAwbb7R9mm9ACCoMQfCL

The row breaking phenomenon is visible on chrome in the first table, ands comes from a spam of the calling of the sorting function triggered when the mouse is moving

[arossi90]

Even in the plunkr the function is not being called. (2nd table).
I deleted the function and it didn't complain at all and the sorting was still viable (it uses primeng internal sorting function).

[svideau]

The 2sd function print a "sorting 2" in the js console (F12) when called and i have the correct print when I sort the table.
(my bad, i forgot to froze the plnkr, now the ocrrect behavior is visible)

[arossi90]

Turns out I didn't declare [sortMode] but sortMode.
Now everything works properly :)

[vanroda]

[sortMode]="{'multiple':''}" to make it work in production mode ;-)

[ekuusi]

When using sortMode multiple, I can no longer highlight the column I am sorting by. Or is there a workaround for this with sortMode multiple? All headers are shown as unselected no matter how I sort.

Without sortMode multiple, the issue with the sortFunction being called constantly when moving the mouse if you clone the array (the workaround this.dataSet = [...old];) creates a huge performance issue in our app.

This really needs to be fixed quick, it's breaking things.

[bomberblue07]

I don't have a custom search on any of my fields, but I did have this error on 4.0.3- when I paged my table, the table display wouldn't update. Adding sortMode="multiple" (without the square brackets) to my table made it work properly. I have no idea why, though.

[SchneMa]

Anyone got updates on this?

I tryed to unset and set the array to make the table refresh the items but seems not to work. Tryed it with sortMode single and multiple.

this.list = []
this.list = sortedList

to refresh the table i need to do it like this:

this.list = []
setTimeout(function () {
that.list = sortedList;
}, null);

but this leads to a endless loop of calling the customSortFunction and throws continuous ChangeDetectionErrors.

Would be great to hear if some of you solved this.

INFO: Tryed it with 4.1.0-RC.2

[ekuusi]

The workaround I'm using is:

• In p-datatable have [sortMode]="{'multiple':''}"

• After sorting, clone the object:
  this[table].sort(comparer);
  this[table] = JSON.parse(JSON.stringify(this[table]));

Side effect of sortMode multiple is that the header that I sort by does not show as selected / highlighted

[SchneMa]

@ekuusi thx for that workaround!!!
its working for me but a bit weird.
Because my object got a getter method for an attribute i need to loop through the whole list and generate new objects to get the getter working...

i hope there will come a fix for this.

[cagataycivici]

Can someone provide a plunkr please for us to review? Would like this to be resolved.

http://plnkr.co/edit/Wj39h1?p=preview

[svideau]

Here is a plunkr which shows the broken pagination and the broken indicator for custom sorting http://plnkr.co/edit/6EYIDSqGd8OAzOrREJXX

[cagataycivici]

Thanks.

[wesray]

It's calling the custom sort function when you change the page, so it's reassigning the array in your custom sort to that page, starting from the beginning. Page 1 is life.

[cagataycivici]

Original issue (https://plnkr.co/edit/5JyODfQTrASf6VR3iRfC) is resolved by;

this.sales.sort(sorting)

to

this.sales = [...this.sales.sort(sorting)];

Working on new plunkr (http://plnkr.co/edit/6EYIDSqGd8OAzOrREJXX) with broken paginator.

[emsedano]

The workaround that worked for me was to put [resetPageOnSort] to false