CODEWITHSUNDEEP
htmlangular
user5769212
user5769212

Reputation: 27

table sorting in angular 6 application

I am developing angular 6 application, wherein I have one table with few columns into it, now I need to sort the table column when the user clicks on upward or downward arrow there, I don't want to use angular material in this case. any help on this?

Data would be an array and will bind to HTML 

  <div class='table_row' *ngFor="let data of myOrder; let i=index">

and finally, data coming from the array is being bound to each cell or column.

<div class='table_small'>
        <div class='table_cell'>Order</div>
        <div class='table_cell'>
          <p>{{data.executionDate | date: 'dd/MM/yy hh:mm'}}</p>
</div>
</div>

The table column above is just for demonstration purpose the actual values are of string and number only not the date.

Upvotes: 0

Views: 6303

Answers (1)

Jamie Rees
Jamie Rees

Reputation: 8183

You need to handle the onClick event on your up and down arrows and implement your own custom sorting.

for example HTML:

<table>
    <tr>
        <th (onClick)="sortNumberColumn()>Number Column</th>
    </tr>
</table>

Component:

public ascNumberSort = true;
public sortNumberColumn() {
    this.ascNumberSort = !this.ascNumberSort;
    if(this.ascNumberSort) {
        this.numberColumn.sort((a, b) => a - b); // For ascending sort
    } else {
        this.numberColumn.sort((a, b) => b - a); // For descending sort
    }
}

The above is just an example, I have not compiled this code. It's just to give you an understanding.

Upvotes: 1

Related Questions