Re-order list based on value

hi guys need a help,
i have created list based on

<div style="text-align:center; color:rgb(0, 153, 255)" padding>
        <div style="width: 20%; float: left" (click)="shortId">Student ID</div>  <!-- onclick=> re-order ascending/ descending-->
        <div style="width: 60%; float: left" (click)="shortName()"> Name </div>      <!--onclick=> re-order by a-z/ z-a-->
        <div style="width: 20%; float: left" (click)="shortStatus()">Present %</div>   <!-- onclick=> re-order by high-low/ low to high-->
      </div>
  </div>

now i want to re-order it based on:
1. id on clicking Student ID div (ascending or descending)
2. Name on clicking Name div (a-z or z-a)
3. Present % on clicking on Present % div (low to high or high to low)
i have created some function for that bt those r note working accordingly
any idea how to do that
here is my code:

  classAgregateList() {
    console.log('subject clicked');
    this.storage.get('token').then((value) => {
      console.log('subtoken: ' + JSON.parse(value).AuthToken);
      this.teacherProvider.GetStudentWiseClassAggregateList(JSON.parse(value).AuthToken, this.subjectId.toString()).then(data => {
        console.log('list2: ' + JSON.stringify(data))
        this.attendenceList = data; // <--list data
      });
    });
  }
  shortStatus(){
    this.shortRemarkList = this.attendenceList.sort(function(a, b){return a - b});
    return this.shortRemarkList;
  }

  shortName(){
    this.shortNameList = this.attendenceList.sort();
    return this.shortNameList;
  }

  shortid(){
    this.shortIdList = this.attendenceList.sort(function(a, b){return a - b});
    return this.shortIdList;
  }

i found and like

https://www.npmjs.com/package/sort-by

import sortBy from 'sort-by/index';

you can multi column sort and array of objects