[email protected]

[4gDad]

I have a p-table that contain dates, the sorting does not seem to work. I'm guessing because the dates are strings. What is the work around for this issue. I am using PrimeNg 17

[4gDad]

[JIBIN-P]

It's working for me, I am also getting string but in an ISO format
eg -
createdDate: "2024-09-17T14:28:04.787"

In the frontend I also use the date pipe by angular to transform the date to the medium format, but yeah the sorting on date is working out of the box.

[4gDad]

Interesting my dates are just simple MM/DD/YYYY. I tried the data pipe but that didn't work either. The only way I could get it to sort correctly was implementing a custom sort routine but I don't like how it's implemented.

customSort(event: SortEvent) {
event.data?.sort((data1, data2) => {
let value1 = data1[event.field as keyof typeof data1];
let value2 = data2[event.field as keyof typeof data2];
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') {
    const date1 = new Date(value1);
    const date2 = new Date(value2);
    result = date1 > date2 ? 1 : date1 < date2 ? -1 : 0;

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

  return event.order! * result;
});

}

[JIBIN-P]

Did you try it with ISO format?

[4gDad]

Not yet, the dates are all stored in my database so I will need to do some work to convert them to ISO format on my webapi call to get the data.

[qwadrox]

@4gDad Hi. This is what happens internally: https://github.com/primefaces/primeng/blob/4d3337c6574b0ae48fdac7587c7c1d9f5a537eab/src/app/components/table/table.ts#L1601
When comparing string values, the table uses localeCompare.

For dates stored as strings (like '2020-08-02'), localeCompare() works as long as the string format is consistent (i.e., YYYY-MM-DD format). This is because in this format, the string comparison is naturally chronological:

'2020' < '2021' (because "2" comes before "3" in string comparison).
'2020-08-02' < '2021-01-10'

So, as long as dates are formatted in ISO 8601 (YYYY-MM-DD), localeCompare() will sort them correctly, because the string comparison will naturally order them by year first, then by month, then by day.

Demo:
https://stackblitz.com/edit/9tsks5?file=src%2Fapp%2Ftable-single-column-sort-demo.html

If you have a different date format, map the string to a Date object and use the mapped values. This is generally a better solution because you might run into problems when using timezones and other more complex values.

[qwadrox]

Here is an example of how you might map the values to date:

getCandidates(): Observable<Candidate[]> {
    return this.http.get<Candidate[]>('api/candidates').pipe(
      map((candidates) =>
        candidates.map((candidate) => ({
          ...candidate,
          dateOfApplication: new Date(candidate.dateOfApplication)
        }))
      )
    );
  }