MatSort by language iso codes

Question

I'm trying to sort api-derived data in a mat-table, but the data is sent as ISO codes that I can translate using the library like:

https://www.npmjs.com/package/iso-639-1

this.dataSource = new MatTableDataSource(response);

<ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>NAME</mat-header-cell>
        <mat-cell *matCellDef="let element">
            {{ getNameByCode(element.code) }}
        </mat-cell>
</ng-container>

With this method call, the displayed names in the table are correct, but the dataSource doesn't change, so it sorts by ISO but not by names. I can translate names before submitting them to dataSource, but I want to avoid it because the ISO code is an identifier that I use later for PUT operations.

Any suggestions on how to solve this problem?

Answer 1

Add/Replace a new property to your response and show/sort this one

I imagine you has some like:

this.dataService.getData().subscribe(response)=>{
    this.dataSource = new MatTableDataSource(response);
}

You can use pipe(map) to trasform the response

this.dataService.getData().pipe(
  //to add a new property "codeFormatted"
  map((res:any[])=>{
     res.forEach(x=>x.codeFormatted=this.getNameByCode(x.code)
     return res;
  })
  //or to replace
  //  map((res:any[])=>{
  //   res.forEach(x=>x.code=this.getNameByCode(x.code)
  //   return res;
  //})
).subscribe(response)=>{
    this.dataSource = new MatTableDataSource(response);
}