Editable Row Issue on primeNG table

2
votes

In my angular project, I use primeNG library I'm trying to make the rows editable in the data table so I follow the documentation [https://www.primefaces.org/primeng/#/table/edit] to do that but I face issue I tried to solve it but I failed.

when I click in the edit button all rows become editable and supposed to be only the row was clicked on?

so how can I do it and send new data to the server

my code in stackpiltz [https://stackblitz.com/edit/angular-1suual?file=src%2Fapp%2Fsuppliers-info%2Fsuppliers-info.component.ts]

For clarification

when I click modify button it will be like that it will be like that

thanks in advance for any cooperation

1
angulartypescriptprimeng
Stackblitz demo is not working , can you check – Allabakash
Yes is it, excuse me I use it for the first time, I think the problem in import service and model, can you help me? – Mohamed Elkast
I have fixed the import errors, still some functions are missing - you need to fix them by copying the local code correctly- stackblitz.com/edit/angular-tq7rmc – Allabakash

1 Answers

2
votes

Issue is with the dataKey you added, It should be UNIQUE existing property name in the data. Since col.field is not existing and null always , it is editing all rows.

It should be changed from 

<p-table [value]="suppliers" [columns]="cols" editMode="row" dataKey="col.field">

to 

<p-table [value]="suppliers" [columns]="cols" editMode="row" dataKey="id">

Here is the demo - https://stackblitz.com/edit/angular-tq7rmc