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?

score 2 · Accepted Answer · answered May 23 '17 at 12:28

2

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>.

answered May 23 '17 at 12:28

fred00

571
2
8
23

score 2 · Answer 2 · answered Jul 06 '17 at 21:27

Here is what i did to add a delete button to each row-

 <p-column [style]="{'width':'38px'}">        
      <ng-template let-h="rowData" pTemplate="body">
           <button class="ui-button-danger" type="button"  pButton (click)="deleteVendorRecord(h)" icon="fa-remove"></button>
      </ng-template>
 </p-column>

Then in the ts file created a function deleteVendorRecord that accepts a row

deleteVendorRecord(row):void{         
     this.vendorRecords.splice(this.vendorRecords.indexOf(row),1);            
}

PrimeNG Datatable does not allow add components to the rows

2 Answers2