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

Question

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

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

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):

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):

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

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

PS: I cannot use

Answer 1

(Note that dates are in dd/mm/yyyy format and in my case the fields in date format are "fec_ini" "fec_fin" and "fec").

customSort(event: SortEvent) {

    // console.log('SortEvent=', event);
    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 === 'fec_ini') || (event.field === 'fec_fin') || (event.field === 'fecha')) {
                const x = value1.split('/');
                const y = value2.split('/');
                value1 = x[2] + x[1] + x[0];
                value2 = y[2] + y[1] + y[0];
                // console.log('x=', value1, x);
                // console.log('y=', value2, y);
            }

            result = value1.localeCompare(value2);
        }  

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

        return (event.order * result);

    });

}

Answer 2

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