Angular sorter not working on specific column

Question

I am trying to implement a sorting method in my angular project and I am having some really weird issues. There is 3 columns, 2 string columns and one number with an Id in the beginning. The string columns seems to be working fine with the implemented sorter but the Id is not sorting itself in numerous order.

What I have testet is to move one of the working columns to be in the first column to see if it is because its the first column in line. I have also tried to change the value of the column with id to one of the values working and it worked fine so what I wonder is.

Does anyone have any idea of what could be causing this, is it because it is a number and not a string? feels like numbers should be easier for the sorter to work with but idk.

I will leave the code down below.

//Typescript:

@ViewChild(MatSort) sort: MatSort;

ngAfterViewInit() {
  this.dataSource.sort = this.sort;
}

<table [hidden]="loading || !this.dataSource.data.length" mat-table #table [@tableRow] [@fadeIn] [@fadeOut] [dataSource]="dataSource" matSort>
<ng-container sticky matColumnDef="id">
<th mat-header-cell class="small-width64 nowrap-text text-right pl-1 pr-1" mat-sort-header sortActionDescription="Sort by id" arrowPosition='before' *matHeaderCellDef>{{ 'Id' | translate }}</th>
<td mat-cell class="small-width64 nowrap-text text-right pl-1 pr-1" *matCellDef="let message">{{ message.messageId }}</td>
</ng-container>
<ng-container matColumnDef="message">
<th mat-header-cell class="nowrap-text pl-1 pr-1 " mat-sort-header sortActionDescription="Sort by message" *matHeaderCellDef>{{ 'Message_administration.Message' | translate }}</th>
<td mat-cell class="nowrap-text pl-1 pr-1" *matCellDef="let message">{{ message.message }}</td>
</ng-container>
<ng-container matColumnDef="description">
<th mat-header-cell class="nowrap-text pl-1 pr-1 " mat-sort-header sortActionDescription="Sort by description" *matHeaderCellDef>{{ 'Message_administration.Description' | translate }}</th>
<td mat-cell class="nowrap-text pl-1 pr-1" *matCellDef="let message">{{ message.description }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Could you please try to provide a minimal reproducible example that clearly demonstrates the issue you are facing. Ideally into a standalone IDE like Stackblitz [(link here!)](https://stackblitz.com/fork/angular-ivy). — smtaha512, Jun 01 '22 at 08:24
please add your sorting code also, I suspect you are not implementing it currently. — dt170, Jun 01 '22 at 08:29
Check if really your "id" is a number. In the example in docs you can see that work with numbers.NOTE: If your data is a string you can easy transform using some like `data.forEach(x=>x.id=+x.id)` — Eliseo, Jun 01 '22 at 09:05

score 0 · Answer 1 · answered Jun 01 '22 at 09:04

As you're saying the "id" column has data in form of strings, formatted as Id 1, Id 20, Id 100. This means they are strings, and hence will be sorted as strings. So with the above examples, correct sorting would order would be:

Id 1, Id 100, Id 20.

I assume you would like to sort those as numbers. To do that, you would have to implement custom sorting logic where you strip the Id part, pars those as number and sort them as numbers.

To do that, you can override the sortData predicate on the datasource:

this.dataSource.sortData = (data: YourObjectType[], sort: MatSort) => {
 return data.sort((a: YourObjectType, b: YourObjectType => {
   //Your custom sorting logic here
 });
}

You can look at the default implementation in the material code on github: https://github.com/angular/components/blob/c2a20c4a035ef57bf598fd78bc7284c180b34c78/src/material/table/table-data-source.ts#L168 for some guidance.

It's easer add a new property and sort by this new property, like this [SO](https://stackoverflow.com/questions/64968027/angular-material-table-sorting-list-of-ips/64968344#64968344) — Eliseo, Jun 01 '22 at 09:06

Angular sorter not working on specific column

1 Answers1