How to make a specific cell not editable in inline editable row in primeNG

Question

I am using PrimeNG DataTable with Angular and the rows are inline editable like the example in documentation[https://www.primefaces.org/primeng/#/table/edit] and I try to except one cell form this editable rows but the problem I use *ngFor to view data in TD element

My HTML :

<ng-template pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex" let-columns="columns">
    <tr [pSelectableRow]="rowData" [pEditableRow]="rowData">
        <ng-container>
            <td class="ui-resizable-column" *ngFor="let col of columns">
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input pInputText type="text" [(ngModel)]="rowData[col.field]"style="width:100%"/>
            </ng-template>
                        <ng-template pTemplate="output">
                            {{ rowData[col.field] }}
                        </ng-template>
                </p-cellEditor>
            </td>

        </ng-container>
    </tr>
</ng-template>

In order to envision the required see this image

Thanks in advance for any help

Answer 1

you can just add a property to columns data and base of that property show the p-cellEditor or just static data

this.cols=[
  { field: 'id', header: '#'  },
  { field: 'name', header: 'الاسم' },
  { field: 'phone', header: 'الهاتف' },
  { field: 'address', header: 'العنوان' },
  { field: 'account', header: 'الحساب' , isStatic :true }, // 👈
  { field: 'nots', header: 'ملاحظات', isStatic :true }, // 👈,
];

template

<td *ngFor="let col of columns">
    <p-cellEditor *ngIf="!col.isStatic;else staticTemplate">
       <ng-template pTemplate="input">
        <input pInputText type="text" [(ngModel)]="rowData[col.field]" style="width:100%" />
       </ng-template>
       <ng-template pTemplate="output">
            {{ rowData[col.field] }}
       </ng-template>
    </p-cellEditor>

    <ng-template #staticTemplate>
        {{ rowData[col.field] }}
    </ng-template>
</td>

demo 🚀

Answer 2

You can use ngContainer with *ngIf to choose what template should be shown:

<td *ngFor="let col of columns">
    <ng-container *ngIf="col.header != 'ملاحظات'; else noEdit">
        <p-cellEditor>
            <ng-template pTemplate="input">                  
                <input pInputText type="text" 
                    [(ngModel)]="rowData[col.field]"style="width:100%"/>
            </ng-template>
            <ng-template pTemplate="output">
                {{ rowData[col.field] }}
            </ng-template>
        </p-cellEditor>
    </ng-container>

    <ng-template #noEdit>
         {{ rowData[col.field] }}
    </ng-template>
</td>

A complete example can be seen here.