I am currently facing a challenge while working with Angular and PrimeNG. I am new to this technology stack and trying to populate a table, but I seem to be missing something as there are no errors in the console. Here is the code snippet that I am struggling with:
Within the component.ts file
...
columns: Column[] = [];
first = 0;
rows = 20;
tasks = [
{
id: 'Task 1',
name: 'Start task 1',
start: '2021-11-08',
end: '2021-11-15',
progress: 80,
dependencies: 'Task 3, Task 4'
},
{
id: 'Task 2',
name: 'Start task 2',
start: '2021-11-18',
end: '2021-12-02',
progress: 20,
dependencies: 'Task 1'
}
];
ngOnInit() {
const columns = ['Id', 'Name', 'Start', 'End', 'Progress', 'Dependencies'];
}
public onPageChange(event: any): void {
this.first = event.first;
this.rows = event.rows;
}
...
Within the component.html file
...
<p-table styleClass="sticky-table" #TasksTable [autoLayout]="true" [value]="tasks" selectionMode="single" [paginator]="true" [rows]="rows" [columns]="columns" [rowsPerPageOptions]="[10,20,50,100,200]" [first]="first" (onPage)="onPageChange($event)" [style]="{width:'100%'}"
sortMode="multiple" [reorderableColumns]="true" [resizableColumns]="true">
<ng-template pTemplate="header">
<tr id="sticky-header">
<th class="flex-header" *ngFor="let col of columns" [pSortableColumn]="col.field" pResizableColumn pReorderableColumn>
<span>
<p-sortIcon [field]="col.field"></p-sortIcon>
{{col.header}}
</span>
<p-columnFilter [showIcon]="false" operator="or" [type]="!col.type ? 'text' : col.type" display="menu" [field]="col.field"></p-columnFilter>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-tasks>
<tr [pSelectableRow]="tasks">
<ng-container *ngFor="let col of columns">
<td>
<ng-container>
{{tasks[col.field]}}
</ng-container>
</td>
</ng-container>
</tr>
</ng-template>
<ng-template pTemplate="paginatorright">
<p-button icon="pi pi-refresh" (onClick)="refresh()" [pTooltip]="'common.refresh'" tooltipPosition="bottom" showDelay="300"></p-button>
</ng-template>
</p-table>
...
I am aiming to populate the p-table with a hardcoded array of tasks for testing purposes, even though it may not be the best practice. Any assistance on resolving this issue would be greatly appreciated!
Thank you in advance!