multiple tables sorting angular 4

Question

I would like to have sorting on multiple tables which are in same page. I tried to follow this package. https://github.com/VadimDez/ngx-order-pipe

When I'm sorting the table 1, table 2 is also getting sorted.How do I implement this on multiple tables separately. ?

order: any;
reverse: boolean = false;
  setOrder(value: string) {
    if (this.order === value) {
      console.log(this.order)
      this.reverse = !this.reverse;
    }
    this.order = value;
  }


 <table>
             <thead>
                  <tr>
                    <th (click)="setOrder('Data.name')">Name</th>
                    <th (click)="setOrder('Data.age')">Age</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let Data of collection1 | orderBy: order:reverse:'case-insensitive'">
                    <td class="text-truncate">{{Data.name}}</td>
                    <td class="text-truncate">{{Data.age}}</td>
                  </tr>
                </tbody>
              </table>

  <table>
            <thead>
              <tr>
                <th (click)="setOrder('PersonData.id')">Id</th>
                <th (click)="setOrder('PersonData.sport')">Sport</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let PersonData of collection2 | orderBy: order:reverse:'case-insensitive'">
                <td class="text-truncate">{{PersonData.id}}</td>
                <td class="text-truncate">{{PersonData.sport}}</td>
              </tr>
            </tbody>
          </table>

Answer 1

Whatever the code you share, it have only one table.

You don't need to use any third party library but create your own sort filter like this

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;
        }
    });
};

See the full post in detail

Answer 2

I'm not familiar with the package you are using, but the best way to achieve your goal really depends on your use case. One way is to refactor your code so that each table is its own component, and handles its own sorting. That way sorting data isn't shared between the tables.