Angular: Data Table - alphanumeric-sort with angular material mat-sort

Question

I have a problem sorting my columns with angular material mat-sort.

I have some codes called correlative_request which were assigned with letters, numbers and characters. Here the problem is that when I try to sort my table in ascending order I would expect it to start counting in the following way

B-23-3-01 B-23-3-02 B-23-3-03 .... B-23-3-029

But instead of doing it like this, it does it by taking the minors and then the majors something like this:

B-23-3-01 B-23-3-010 B-23-3-011 .... B-23-3-02 B-23-3-020 .... B-23-3-029

I made a small demo of how I have it in my project, to replicate my error, in my project I use component inheritance to pass the dataSource to my table but that does not interfere with the sort itself. Demo In Stackblitz

I tried the following function to order the correlatives or alphanumeric codes, but even so I did not achieve what I want because it returns ['B-23-3-0', 'B-23-3-02', 'B-23-3 -029', 'B-23-3-03'] and I expected it to return ['B-23-3-0', 'B-23-3-02', 'B-23-3-03' , 'B-23-3-029']

/* order array [B-23-3-0, B-23-3-02, B-23-3-03, B-23-3-029] from smallest to largest */
var array = ['B-23-3-0', 'B-23-3-02', 'B-23-3-03', 'B-23-3-029'];
array.sort(function(a, b) {
  return a.localeCompare(b);
});
console.log('array sort', array);

If someone helps me I would be grateful, I leave you some images of what the jump of the numbers looks like when I try to order them

I tried some of the solutions that I found in stack but they did not work for me, I attach the link of the question that I found and some of the answers I tried Angular Material Table Alphanumeric Sorting Behaviour

score 1 · Accepted Answer · answered Mar 10 '23 at 07:58

To order by correlative_request you need convert your string to a number. You can use

  requestToNumber(value: string) {
    const matchs = value.match(/[^-]+/g);
    return matchs.length == 4
      ? matchs[0].charCodeAt(0) * 1000000000 +
          +matchs[1] * 1000000 +
          +matchs[2] * 1000 +
          +matchs[3]
      : 0;
  }

So, e.g.

requestToNumber("B-23-3-0") //give you 66023003000

Now you have two options:

1.- change your function "sortData"

  sortData(sort: Sort) {
      ...
      switch (sort.active) {
        case 'correlative_request':
          return compare(this.requestToNumber(a?.correlative_request),
                         this.requestToNumber(b?.correlative_request), isAsc);
          ...
      }
    });
    ...
  }

The problem is that you call to the function "requestToNumber" several, several times

2.- Add a new property to teh elements of your "requestNumber" and sort by this property. That is the best way

  ngOnInit(): void {
    this.solicitud.forEach(x=>{
      x.requestNumber=this.requestToNumber(x.correlative_request)
    })
    this.dataSource.data = this.solicitud;
  }

And you use

  sortData(sort: Sort) {
      ...
      switch (sort.active) {
        case 'correlative_request':
          return compare(a?.requestNumber,
                         b?.requestNumber, isAsc);
          ...
      }
    });
    ...
  }

NOTE: You're sorting "manually" your table. Why not use MatTableDataSource. This sort, filter and paginate for you

this.dataSource.data = new MatTableDataSource<any>(this.solicitud);

NOTE: When use MatTableDataSource use to sort by requestNumber

<th mat-sort-header="requestNumber">

Hello! Thank you very much for answering and explaining. but I had a question: When iterating the data at the beginning of the component, won't I be returning the "correlative_request" converted to a number in my table? In other words, how would I format it at once, in the table it would show me already formatted from string to number — Izlia, Mar 10 '23 at 17:31
I did it! What I did was that I rebuilt the array and saved it in a new key where the new value of "correlative_request" would be stored, already converted from strings to numbers and in the table in the definition of this I call "correlative_request" and in the mat - sort-header calls the new value. Thank you very much @Eliseo without you I would not have succeeded and understood — Izlia, Mar 10 '23 at 18:08

Angular: Data Table - alphanumeric-sort with angular material mat-sort

1 Answers1