Make dynamic PrimeNG table columns conditionally editable

The PrimeNG table component is a powerful data visualization tool and is a great free alternative to AG Grid.

Table columns can be defined dynamically using the *ngFor directive. However, if you do this there is no apparent way to conditionally mark a column as editable!

There is actually an undocumented pEditableColumnDisabled boolean directive that can be used to control if a cell is editable or not. The only documented directives are pEditableColumn and pEditableColumnField.

Here is a direct link to the directive on the PrimeNG github.

Using it would be something like: <td pEditableColumn [pEditableColumnDisabled]="!col.editable" *ngFor="let col of columns" [ngSwitch]="col.field">

Did this post help you? Buy me a coffee!
Buy Me A Coffee
comments powered by Disqus