[Fixed] Angular material sorting based on two values in one column

Issue

So I have material table column with RatioA: RatioB

<ng-container matColumnDef="ratioA">
 <th mat-header-cell *matHeaderCellDef mat-sort-header>RatioA; RatioB</th>
 <td mat-cell *matCellDef="let element">
  {{element.ratioA ? element.ratioA : 0}}: {{element.ratioB}}
 </td>
</ng-container>

The sorting should combine ratioA and ratioB.

ratioA 1; ratioB 8 should come before ratioA 1; ratioB 18 (asc sort) and vice versa

DEMO

Solution

I would suggest to add another property called "sortCol" in your interface

export interface PeriodicElement {
     name: string;
     position: number;
     weight: number;
     symbol: string;
     ratioA: number;
     ratioB: number;
     sortCol?: number;
 }

add new column header

 displayedColumns: string[] = [
  "position",
  "name",
  "weight",
  "symbol",
  "sortCol"
];

then populate the value using map and assign the "newData" as datasource

newData = ELEMENT_DATA.map(x => {     
   return {
     ...x,
     sortCol: Number(`${x.ratioA}${x.ratioB}`)
   };
})

dataSource = new MatTableDataSource(this.newData);

then update your html like this

 <ng-container matColumnDef="sortCol">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>RatioA; RatioB</th>
     <td mat-cell *matCellDef="let element">
     {{element.ratioA ? element.ratioA : 0}}{{element.ratioB}}
    </td>
 </ng-container>