Eсть таблица, при клике на его header-ы(name, surname, age или gender) нужно отсортировать по нажатым названиям
<table class="table table-bordered table-dark">
<tr>
<th (click)="filtername(service.people)">Name</th>
<th (click)="filtersurname(service.people)">Surname</th>
<th (click)="filterage(service.people)">Age</th>
<th (click)="filtergender(service.people)">Gender</th>
<th>Photo</th>
</tr>
<tr *ngFor="let item of service.people | filters:gender">
<td>{{item.name.first}}</td>
<td>{{item.name.last}}</td>
<td>{{item.dob.age}} </td>
<td>{{item.gender}} </td>
<td>
<img src="{{item.picture.large}}" alt="">
</td>
</tr>
</table>
filtername(name){
let frname=this.service.people.map(itm=>itm['name'].first)
frname.sort()
}
filtersurname(surname){}
filterage(age){
// return age.map(itm=>itm.dob.age).sort((a,b)=>a-b)
}
filtergender(gender){
}
в консоле всё нормально сортируется, но не получается реализовать в таблице
база людей взята из https://randomuser.me/api?results=20