Sorting direction and order in Angular table (ascending, descending)

Question

I am using Lodash to sort data in a table by column. When I click an arrow in the table column header, that specific table column will then sort in ascending or descending order. However, I would like each column to sort in ascending order first regardless of the current order of other columns. Right now, my function only toggles ascending and descending dependent on the current direction regardless of column. How do I fix this function?

export class TableComponent {
  @Input() data
  direction: string = ''

  sort(val) {
    if (this.direction === '' || this.direction === 'asc') {
      this.data = _.orderBy(this.data, [val], ['desc'])
      this.direction = 'desc'
    } else {
      this.data = _.orderBy(this.data, [val], ['asc'])
      this.direction = 'asc'
    }
    console.log(this.direction)
  }

}

table.component.ts

<table>
    <thead>
        <tr>
            <th *ngFor="let col of cols">
                {{col.header}}
                <input type="text" 
                [(ngModel)]=fields[col.value] 
                (ngModelChange)="handleFilterChange()" 
                (click)="selectCol(col.value)"
                *ngIf=col.enableFilter/>
                <img 
                class="arrow" 
                (click)="sort(col.value)"/>
            </th>
        </tr>
    </thead>
    <tbody *ngFor="let row of data | filter: filters:selectedCol">
        <tr>
            <td *ngFor="let col of cols">{{row[col.value]}}</td>
        </tr>
    </tbody>
</table>

Kindly provide some plunker. And it is not clear fir me what is 'each column to sort in ascending order first regardless of the current order of other columns.' Do you mean information in colums of each specific row is not related and you want to sort only the specific colums values regardless other columns values? — Alexander Poshtaruk
Actually, if you want independent sorting for each column - then just use separate array for each column — Alexander Poshtaruk
I meant I want to sort only the specific columns values regardless of whether the other columns are currently in ascending or descending order. Right now it is just toggling between the two. — FakeEmpire
Also, I am fetching my data from one endpoint so I do not think separating out each column into their own array is the best approach here. — FakeEmpire

Chanaka Weerasinghe Chanaka Weerasinghe · Accepted Answer · 2019-06-27T03:47:08

Problem: Lets say you have to render a list of customer details that include Customer Name, Join Date, Address, Phone etc. And Join Date comes as String in JSON response.

Since its not possible to sort this ‘Join Date’ (joinDate) column as date and assume there is another hidden column that gives this ‘Join Date’ (joinDateInMs) in milliseconds.

Solution: Use ‘cellRenderer’ and ‘comparator’ combination for this column. Below code snippet is self explanatory.

columnDefs: [{
 headerName: “Join Date”, field: “joinDateInMs”,  
 cellRenderer: function (params) {
                return params.data.joinDate;
             }, 
comparator: self.createDateComparator
},
]
......
//
createDateComparator(date1, date2) {
        return date2 - date1;
    }

Sorting direction and order in Angular table (ascending, descending)

1 Answers