I am in the process of replacing a custom-made table with PrimeNG's turbotable. The issue I'm facing is that when I try to insert buttons into the table that call specific JavaScript functions, they end up displaying as [object HTMLInputElement] rather than actual buttons. This problem seems to occur because the turbotable converts the element into text instead of rendering it as HTML.
Here is an example of what is being displayed:
https://i.sstatic.net/YB50w.png
Below is the code for the turbotable:
<p-table [columns]="resultsCols" [value]="results">
<ng-template pTemplate="caption">
Agencies Count {{results?.length}}
</ng-template>
<ng-template pTemplate="header">
<tr>
<th >Options</th>
<th [pSortableColumn]="'agency'" >Agency</th>
<th [pSortableColumn]="'department'" class="ui-p-2">Department</th>
<th [pSortableColumn]="'affiliateCount'" class="ui-p-4">Affiliate Count</th>
<th [pSortableColumn]="'basigdate'" class="ui-p-6">BA Sig Date</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-r>
<tr>
<td> {{r.btnEdit}}</td>
<td >{{r.agency}}</td>
<td class="ui-p-2">{{r.department}}</td>
<td class="ui-p-4">{{r.affiliateCount}}</td>
<td class="ui-p-6">{{r.basigdate}}</td>
</tr>
</ng-template>
</p-table>Here is how the button is generated and the results array populated:
var result = JSON.parse(xmlhttp.responseText);
for (var i = 0; i < result.length; i++) {
var inputEdit = document.createElement("input");
inputEdit.type = "button";
inputEdit.value = "Edit";
inputEdit.classList.add("btn-link");
inputEdit.onclick = (
function(i) {
return function() {
comp.setEditMode(i);
}
}
)(result[i].id);
var a = new agencySearchResult();
a.agency = result[i].name;
a.affiliateCount = result[i].affiliateCount;
a.basigdate = result[i].baSigDate;
a.department = result[i].department;
a.btnEdit = inputEdit;
comp.results.push(a);
}Finally, this is where the agencySearchResult class is defined in TypeScript:
export class agencySearchResult {
constructor() {};
agency: string;
department: string;
affiliateCount: string;
basigdate: string;
btnEdit: HTMLInputElement;
}I suspect that the issue lies in the {{r.btnEdit}} line in the HTML code, but I have included all relevant information just in case. Can anyone provide guidance on how to properly insert a JavaScript-generated HTML element into a turbotable?