Multi tool use

PrimeNG: <p-table> custom sort issue for dates

I am using primeNg <p-table> to implement custom sort for "Quarterly Results" field.

<p-table>

"Quarterly Results"

The date in the "Quarterly Results" field is as below:

"Quarterly Results"

Q3-2017
2018
2017
Q1-2016
2000
Q3-2018
Q2-2012


Source : https://primefaces.org/primeng/#/table/sort

To sort the data I have done below code:

HTML:

<p-table [value]="documents" (sortFunction)="customSort($event)" [customSort]="true">
<ng-template pTemplate="header">
<tr>
<th [pSortableColumn]="quarter">
Quarterly Results
<p-sortIcon [field]="quarter"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-doc>
<tr>
<td>
{{doc.quarter}}
</td>
</tr>
</ng-template>
</p-table>


TS:

customSort(event: SortEvent) {
event.data.sort((data1, data2) => {
let value1 = data1[event.field];
let value2 = data2[event.field];
let result = null;

if (value1 == null && value2 != null)
result = -1;
else if (value1 != null && value2 == null)
result = 1;
else if (value1 == null && value2 == null)
result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string')
result = value1.localeCompare(value2);
else
result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;

return (event.order * result);
});
}


The problem I am facing is when I sort, the data is not coming is proper sorted order. In first sort click the data comes like (Q1-2016 is coming before Q2-2012):

Q1-2016

Q2-2012

2000
2017
2018
Q1-2016
Q2-2012
Q3-2017
Q3-2018


and in second sort click data come as below (Q2-2012 is coming before Q1-2016):

Q2-2012

Q1-2016

Q3-2018
Q3-2017
Q2-2012
Q1-2016
2018
2017
2000


I want the data to be sorted like

2000
2017
2018
Q2-2012
Q1-2016
Q3-2017
Q3-2018


and on second sort click like:

Q3-2018
Q3-2017
Q1-2016
Q2-2012
2018
2017
2000


Please guide me where did I go wrong that my data is not coming in proper sorted order, I also tried 'return value1 > value2 ? 1 : (value1 < value2 ? -1 : 0)'. Which logic am I missing on? Please suggest

return value1 > value2 ? 1 : (value1 < value2 ? -1 : 0)

I think the problem is in this line result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;

result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;

PS: I cannot use

1 Answer
1

If you are comparing strings, it's correct that Q2-2012 is greater than
Q1-2016.

You can try the following customSort function:

customSort(event: any) {
event.data.sort((data1, data2) => {

let value1 = data1[event.field];
let value2 = data2[event.field];
let result = null;

if (value1 == null && value2 != null)
result = -1;
else if (value1 != null && value2 == null)
result = 1;
else if (value1 == null && value2 == null)
result = 0;
else if (typeof value1 === 'string' && typeof value2 === 'string'){
if(event.field === "quarter"){
console.log("sort..."+event.field)
let o1 = value1.split('-')
let o2 = value2.split('-')
let value1Q = o1.length == 2 ? o1[0] : "";
let value1Y = o1.length == 2 ? o1[1] : o1[0];
let value2Q = o2.length == 2 ? o2[0] : "";
let value2Y = o2.length == 2 ? o2[1] : o2[0];
if(value1Y.localeCompare(value2Y)===0){
result = value1Q.localeCompare(value2Q)
} else {
result = value1Y.localeCompare(value2Y)
}
} else{
result = value1.localeCompare(value2);
}

}
else
result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;

return (event.order * result);
});
}


You can find below a working sample:

stackblitz

app

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.