PrimeNg Table toggle cell editing

Question

I am using primeng table and want to make a column editable on a button click. However I am unable to do this. I don't know which property I have to set in order to toggle editing. Please help. Thanks in advance.

Here is my template:

<ng-template pTemplate="body" let-rowData let-state let-expanded="expanded" let-columns="columns" >
        <tr>
            <td pEditableColumn>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData.id">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{rowData.id}}
                    </ng-template>
                </p-cellEditor>
            </td>

        </tr>
    </ng-template>

Rameshkan B Rameshkan B · Accepted Answer · 2021-05-22T05:42:25

First option which I feel better to achieve this is, by disabling input controls as mentioned below.

<input [disabled]="!editable" pInputText type="text" [(ngModel)]="rowData.id">

you can make the editable property to true or false on button click. The control will be visible on cell click still it is ok as it is not editable.

Second option is to duplicating the cell with editable condition as mentioned below.

<td pEditableColumn *ngIf="editable" >
            <p-cellEditor>
                <ng-template pTemplate="input">
                    <input pInputText type="text" [(ngModel)]="rowData.id">
                </ng-template>
                <ng-template pTemplate="output">
                    {{rowData.id}}
                </ng-template>
            </p-cellEditor>
 </td>

<td *ngIf="!editable">{{rowData.id}}</td>

PrimeNg Table toggle cell editing

1 Answers