Filling a PrimeNG table with an array-CodePudding

I'm new to Angular and PrimeNG and currently I'm stuck trying to fill a table. There are not errors in the console so probably I'm just missing stuff, but I can't figure out what. Here is the code:

In the component.ts

...

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;
  }

...

In the component.html

...

<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 simply want to fill the p-table with a hardcoded array of tasks (probably not the best practice, but I'm just testing for now and I need to make this work).

Thanks in advance!

CodePudding user response：

You need to modify your columns variable as shown below,

cols: any[];

ngOnInit() {
  this.cols = [{
      field: 'id',
      header: 'Id'
    },
    {
      field: 'name',
      header: 'Name'
    },
    {
      field: 'start',
      header: 'Start'
    },
    {
      field: 'end',
      header: 'End'
    },
    {
      field: 'progress',
      header: 'Progress'
    },
    {
      field: 'dependencies',
      header: 'Dependencies'
    }
  ];
}