How can I add arrow class on table sort header?

user_7341002 0
Viewed 2406

I am trying to have sorting on table header. I am able to utilize this https://stackblitz.com/edit/angular-sort-filter but I wanted to add arrows on click on header (asc/desc) or maybe a class to toggle which I can do it from css.

sort(property) {
    this.isDesc = !this.isDesc; //change the direction    
    this.column = property;
    let direction = this.isDesc ? 1 : -1;

    this.records.sort(function (a, b) {
      if (a[property] < b[property]) {
        return -1 * direction;
      }
      else if (a[property] > b[property]) {
        return 1 * direction;
      }
      else {
        return 0;
      }
    });
  };

Thanks for your help.

Happy New Year!

angular typescript toggle javascript
2 Answers

In css:

.pointer.active.desc:after {
  content: "▲";
}
.pointer.active.asc:after {
  content: "▼";
}

In template:

<div class="form-group">
    <div class="col-md-6">
        <input type="text" [(ngModel)]="searchText"
           class="form-control" placeholder="Search By Category" />
  </div>
    </div>

    <div class="col-md-12">
        <table class="table table-responsive table-hover">
            <tr>
                <th [ngClass]="{pointer: true, active:column=='CategoryID',desc:isDesc, asc:!isDesc}"
                    (click)="sort('CategoryID')">
                    Category ID</th>
                <th [ngClass]="{pointer: true, active:column=='CategoryName',desc:isDesc, asc:!isDesc}"
                    (click)="sort('CategoryName')">
                    Category</th>
                <th [ngClass]="{pointer: true, active:column=='Description',desc:isDesc, asc:!isDesc}"
                    (click)="sort('Description')">
                    Description</th>
            </tr>
            <tr *ngFor="let item of records | category : searchText">
                <td>{{item.CategoryID}}</td>
                <td>{{item.CategoryName}}</td>
                <td>{{item.Description}}</td>
            </tr>
        </table>
    </div>

try

user_67504220

You can create a method to get the right symbol for your headers

In your class, create this method:

arrow(columnName) {
  if (this.column === columnName) {
    return this.isDesc ? '&#8593;' : '&#8595;';
  }
  return '';
}

In you template, change each header to be like:

<th class="pointer" (click)="sort('CategoryID')">
    Category ID
    <span [innerHTML]="arrow('CategoryID')"></span>
</th>

same on each header

user_99971480
Related