primeng tree table with checkbox not working as expected if a page contains more than one tree table

I am working on angular app. I am using tree table

   <p-toast></p-toast>

<h5>Checkbox Selection</h5>
<p-treeTable
  [value]="files5"
  [columns]="cols"
  selectionMode="checkbox"
  [(selection)]="selectedNodes3"
  dataKey="name"
>
  <ng-template pTemplate="caption">
    <div class="p-d-flex">
      <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>
      <span class="p-ml-2">Toggle All</span>
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{ col.header }}
      </th>
    </tr>
  </ng-template>
  <ng-template
    pTemplate="body"
    let-rowNode
    let-rowData="rowData"
    let-columns="columns"
  >
    <tr>
      <td *ngFor="let col of columns; let i = index">
        <p-treeTableToggler
          id="{{ i }}"
          [rowNode]="rowNode"
          *ngIf="i == 0"
        ></p-treeTableToggler>
        <p-treeTableCheckbox
          [value]="rowNode"
          *ngIf="i == 0"
        ></p-treeTableCheckbox>
        {{ rowData[col.field] }}
      </td>
    </tr>
  </ng-template>
</p-treeTable>

............................................................................................................................................................................................................
<p-treeTable
  [value]="files5"
  [columns]="cols"
  selectionMode="checkbox"
  [(selection)]="selectedNodes3"
  dataKey="name"
>
  <ng-template pTemplate="caption">
    <div class="p-d-flex">
      <p-treeTableHeaderCheckbox></p-treeTableHeaderCheckbox>
      <span class="p-ml-2">Toggle All</span>
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{ col.header }}
      </th>
    </tr>
  </ng-template>
  <ng-template
    pTemplate="body"
    let-rowNode
    let-rowData="rowData"
    let-columns="columns"
  >
    <tr>
      <td *ngFor="let col of columns; let i = index">
        <p-treeTableToggler
          id="{{ i }}"
          [rowNode]="rowNode"
          *ngIf="i == 0"
        ></p-treeTableToggler>
        <p-treeTableCheckbox
          [value]="rowNode"
          *ngIf="i == 0"
        ></p-treeTableCheckbox>
        {{ rowData[col.field] }}
      </td>
    </tr>
  </ng-template>
</p-treeTable>

Stackblitz::

https://stackblitz.com/edit/primeng-treetableselection-demo-py68pi?file=src%2Fapp%2Fapp.component.html

Code is working fine but the problem is in case if I have two tree table in my html page as shown in stackblitz and above example. If I check first element of first table, than first element of second table automatically gets checked and vice versa. Same for other elements as well. How can I resolve this?

>Solution :

Both tables selection are binded to the same variable [(selection)]="selectedNodes3" so once you select a node in one table the other will show the same selection thanks to the angular two-way data binding ( https://angular.io/guide/two-way-binding ).

So, in order to fix your issue you just have to use two different variables to store the selection.

First table:

p-treeTable
  [value]="files5"
  [columns]="cols"
  selectionMode="checkbox"
  [(selection)]="selectedNodes3"
  dataKey="name"
>
...

Second table:

p-treeTable
  [value]="files5"
  [columns]="cols"
  selectionMode="checkbox"
  [(selection)]="secondTableSelectedNodes3" // <-- This variable must be different from the first table
  dataKey="name"
>
...

Then in your component ts you must declare both variables:

...
public selectedNodes3: TreeNode[];
public secondTableSelectedNodes3: TreeNode[];
...