PrimeNG Datatable does not allow add components to the rows

Question

I am using PrimeNG Datatable (https://www.primefaces.org/primeng/#/datatable) with lazy loading. Everything works great but I need to add a button in every row (with options to delete, edit each record).

I tried somehow to add the column in every row in the view, but couldn't figure it out.

Then I tried to add the HTML in the controller array that is used by the datatable:

private addActionsToRow(rows) {

    let rowsWithAction = [];
    for(let row of rows) {
        row['actions'] = '<div>Anything</div>'
        rowsWithAction.push(row);
    }

    return rowsWithAction;

}

However it does not evaluate the code and displays the plain HTML <div>Anything</div>.

It there a way to it?

Answer 1

It can be done with Templates, there is a section in Datatable doc (https://www.primefaces.org/primeng/#/datatable). I only needed to change <ng-template> to <template>.