Sorting on multiple tables in same page

[SrideviYerneni]

I would like to have sorting on multiple tables which are in same page. I tried to follow this documentation. 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 1 :

Name	Age
{{Data.name}}	{{Data.age}}

Table 2 :

Id	Sport
{{PersonData.id}}	{{PersonData.sport}}

[VadimDez]

Can you provide more code?

[SrideviYerneni]

 <thead>
              <tr>
                <th (click)="setOrder('Data.name')">Name</th>
                <th (click)="setOrder('Data.age')">Age</th>
              </tr>
            </thead>

Which particular part of code are you looking for?

[VadimDez]

To help you i need to see how you're sorting both tables. Provide code for both tables (html) and the part where you set order for both collections as well (ts).

[SrideviYerneni]

 <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>

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

[SrideviYerneni]

@VadimDez Hi. Is there any update on this ? Please let me know if you need anything more information.

[mauriciogracia]

In my case I have to ng-fors that are not nested but they share the same sorting options and settings

Here you can see my case with code and with my "solution" which is not ideal

https://stackoverflow.com/questions/55927690/sort-pipe-is-always-sorting-casesensitive-ngx-order-pipe/55957416#55957416

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.