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
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>