title: primeng tree table with checkbox not working as expected if a page contains more than one tree table
body: <p>I am working on angular app. I am using tree table</p>
  <pre><code>   &lt;p-toast&gt;&lt;/p-toast&gt;
  
  &lt;h5&gt;Checkbox Selection&lt;/h5&gt;
  &lt;p-treeTable
    [value]=&quot;files5&quot;
    [columns]=&quot;cols&quot;
    selectionMode=&quot;checkbox&quot;
    [(selection)]=&quot;selectedNodes3&quot;
    dataKey=&quot;name&quot;
  &gt;
    &lt;ng-template pTemplate=&quot;caption&quot;&gt;
      &lt;div class=&quot;p-d-flex&quot;&gt;
        &lt;p-treeTableHeaderCheckbox&gt;&lt;/p-treeTableHeaderCheckbox&gt;
        &lt;span class=&quot;p-ml-2&quot;&gt;Toggle All&lt;/span&gt;
      &lt;/div&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate=&quot;header&quot; let-columns&gt;
      &lt;tr&gt;
        &lt;th *ngFor=&quot;let col of columns&quot;&gt;
          {{ col.header }}
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template
      pTemplate=&quot;body&quot;
      let-rowNode
      let-rowData=&quot;rowData&quot;
      let-columns=&quot;columns&quot;
    &gt;
      &lt;tr&gt;
        &lt;td *ngFor=&quot;let col of columns; let i = index&quot;&gt;
          &lt;p-treeTableToggler
            id=&quot;{{ i }}&quot;
            [rowNode]=&quot;rowNode&quot;
            *ngIf=&quot;i == 0&quot;
          &gt;&lt;/p-treeTableToggler&gt;
          &lt;p-treeTableCheckbox
            [value]=&quot;rowNode&quot;
            *ngIf=&quot;i == 0&quot;
          &gt;&lt;/p-treeTableCheckbox&gt;
          {{ rowData[col.field] }}
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/ng-template&gt;
  &lt;/p-treeTable&gt;
  
  ............................................................................................................................................................................................................
  &lt;p-treeTable
    [value]=&quot;files5&quot;
    [columns]=&quot;cols&quot;
    selectionMode=&quot;checkbox&quot;
    [(selection)]=&quot;selectedNodes3&quot;
    dataKey=&quot;name&quot;
  &gt;
    &lt;ng-template pTemplate=&quot;caption&quot;&gt;
      &lt;div class=&quot;p-d-flex&quot;&gt;
        &lt;p-treeTableHeaderCheckbox&gt;&lt;/p-treeTableHeaderCheckbox&gt;
        &lt;span class=&quot;p-ml-2&quot;&gt;Toggle All&lt;/span&gt;
      &lt;/div&gt;
    &lt;/ng-template&gt;
    &lt;ng-template pTemplate=&quot;header&quot; let-columns&gt;
      &lt;tr&gt;
        &lt;th *ngFor=&quot;let col of columns&quot;&gt;
          {{ col.header }}
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/ng-template&gt;
    &lt;ng-template
      pTemplate=&quot;body&quot;
      let-rowNode
      let-rowData=&quot;rowData&quot;
      let-columns=&quot;columns&quot;
    &gt;
      &lt;tr&gt;
        &lt;td *ngFor=&quot;let col of columns; let i = index&quot;&gt;
          &lt;p-treeTableToggler
            id=&quot;{{ i }}&quot;
            [rowNode]=&quot;rowNode&quot;
            *ngIf=&quot;i == 0&quot;
          &gt;&lt;/p-treeTableToggler&gt;
          &lt;p-treeTableCheckbox
            [value]=&quot;rowNode&quot;
            *ngIf=&quot;i == 0&quot;
          &gt;&lt;/p-treeTableCheckbox&gt;
          {{ rowData[col.field] }}
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/ng-template&gt;
  &lt;/p-treeTable&gt;
  </code></pre>
  <p>Stackblitz::</p>
  <p><a href="https://stackblitz.com/edit/primeng-treetableselection-demo-py68pi?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/primeng-treetableselection-demo-py68pi?file=src%2Fapp%2Fapp.component.html</a></p>
  <p>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?</p>