I have been developing an Angular application that displays data in a table format. Currently, when I click on any column header, the data gets sorted in either ascending or descending order.
However, I want to implement a feature where initially no sorting classes are set on page load. Instead, when a column is clicked, a down arrow should indicate descending order and an up arrow for ascending order. Also, clicking on a different column should remove the sorting class from the previous one.
The issue I am facing is that by default, all columns have a down arrow displayed on page load, which is not the intended behavior. The sorting classes should only be applied when a specific column is clicked, and should be removed when another column is selected.
You can see a demonstration of the desired functionality here: reference demo link
Below is a snippet of my code:
data.html
<tr>
<th (click)="sortAscending(sortedData)"
[ngClass]="status ? 'down-arrow' : 'up-arrow'"> State </th>
<th (click)="sortAscendingActive(sortedData)"
[ngClass]="status ? 'down-arrow' : 'up-arrow'"> Active Cases </th>
<th (click)="sortAscendingConfirmed(sortedData)"
[ngClass]="status ? 'down-arrow' : 'up-arrow'"> Confirmed Cases </th>
<th (click)="sortAscendingDeath(sortedData)"
[ngClass]="status ? 'down-arrow' : 'up-arrow'"> Death </th>
</tr>
data.ts
status =false
sortByMaxCases(sortedDataBasedOnDate) {
this.isAscendingSort = !this.isAscendingSort;
this.status=true
sortedDataBasedOnDate.forEach(item => item.statewise.sort(function (a, b) {
if (b.confirmed < a.confirmed) {
return -1;
}
if (b.confirmed > a.confirmed) {
return 1;
}
return 0;
}))
this.calculateDiff(this.sortedDataBasedOnDate)
if (!this.isAscendingSort) {
this.status=!this.status
sortedDataBasedOnDate.forEach(item => item.statewise.sort(function (a, b) {
if (a.confirmed < b.confirmed) {
return -1;
}
if (a.confirmed > b.confirmed) {
return 1;
}
return 0;
}))
this.calculateDiff(this.sortedDataBasedOnDate)
}
}
Any assistance with this issue would be greatly appreciated.