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>

It's hard with this much information (you may want to provide more), but it looks like both tables could be using the same this.reverse property. If you create separate reverse flags does it work? — Scott Sword
– Scott Sword, Commented May 4, 2018 at 17:50
@ScottSword this is the only code I'm using for sorting. please tell me particular part of code you are looking for — yer
– yer, Commented May 4, 2018 at 17:59
all the code for this component would help. Also, did you see my reverse comment? If both tables are referencing the same reverse property and you toggle it, its going to reverse both. — Scott Sword
– Scott Sword, Commented May 4, 2018 at 19:12

John · Accepted Answer · 2018-05-04 18:01:40Z

1

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.

answered May 4, 2018 at 18:01

John

10.2k7 gold badges51 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ali Adravi · Accepted Answer · 2018-05-04 20:40:49Z

0

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

answered May 4, 2018 at 20:40

Ali Adravi

23k9 gold badges93 silver badges97 bronze badges

Collectives™ on Stack Overflow

multiple tables sorting angular 4

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related