p-table with pEditableColumn is replacing value for second table

Issue

I have two tables (p-table) with editing rows. But, when I update the row value in the first table, it updates the second table too. How could I set this tables rows as unique?

-> Table component:

<p-table [value]="coberturas" dataKey="id" editMode="row">
<ng-template pTemplate="header">
  <tr>
    <th class="width-20rem">
      {{ t("coberturas.dadosCobertura.tabela.cobertura") }}
    </th>
    <th>{{ t("layout.topicosComuns.capitalIndividual") }}</th>
    <th>{{ t("coberturas.dadosCobertura.tabela.vlrMin") }}</th>
    <th>{{ t("coberturas.dadosCobertura.tabela.vlrMax") }}</th>
    <th>{{ t("layout.topicosComuns.capitalGlobal") }}</th>
  </tr>
</ng-template>
<ng-template pTemplate="body" let-cobertura>
  <tr>
    <td>
      {{ cobertura.nomeMatrizCobertura }}
    </td>
    <td pEditableColumn>
      <p-cellEditor>
        <ng-template pTemplate="input">
          <p-dropdown
            *ngIf="cobertura.codigoMatrizCobertura == 819"
            [(ngModel)]="auxilioFuneral"
            [options]="auxiliosFunerais"
            optionLabel="valor"
            [style]="{ width: '100%' }"
          ></p-dropdown>
          <input
            *ngIf="cobertura.codigoMatrizCobertura != 819"
            [(ngModel)]="cobertura.capitalIndividual"
            pInputText
            type="text"
            required
          />
        </ng-template>
        <ng-template pTemplate="output">
          {{ cobertura.capitalIndividual }}
        </ng-template>
      </p-cellEditor>
    </td>
    <td pEditableColumn>
      <p-cellEditor>
        <ng-template pTemplate="input">
          {{ cobertura.valorMatrizMinimoImportancia | realPipe }}
        </ng-template>
        <ng-template pTemplate="output">
          {{ cobertura.valorMatrizMinimoImportancia | realPipe }}
        </ng-template>
      </p-cellEditor>
    </td>
    <td pEditableColumn>
      <p-cellEditor>
        <ng-template pTemplate="input">
          {{ cobertura.valorMatrizMaximoImportancia | realPipe }}
        </ng-template>
        <ng-template pTemplate="output">
          {{ cobertura.valorMatrizMaximoImportancia | realPipe }}
        </ng-template>
      </p-cellEditor>
    </td>
    <td pEditableColumn></td>
  </tr>
</ng-template>

I'm setting two tables with two different values, each 'als-tabela-cotacao' is the component above

    <als-tabela-cotacao
  *ngIf="!tabelaSocio"
  [coberturas]="listaCoberturasEmpregados"
></als-tabela-cotacao>

<als-tabela-cotacao
  *ngIf="tabelaSocio"
  [coberturas]="listaCoberturasSocios"
></als-tabela-cotacao>

Solution

So what you're doing is you're assigning same thing (res.data.listaOcorrenciaMatrizCobertura) to both variables listaCoberturasEmpregados and listaCoberturasSocios. For javascript it's still the same, since it's refers to the same original variable. What I'd recommend is to use a destruct operator to create a copy of the array = this.listaCoberturasSocios = [...res.data.listaOcorrenciaMatrizCobertura]

Here you can check a working example how to do it, uncomment the code to see proper solution:

https://stackblitz.com/edit/angular-ivy-ih6bod?file=src%2Fapp%2Fapp.component.ts

Answered By - akkonrad