title: Filling a PrimeNG table with an array
body: <p>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:</p>
  <p>In the component.ts</p>
  <pre><code>...
  
  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;
    }
  
  ...
  </code></pre>
  <p>In the component.html</p>
  <pre><code>...
  
  &lt;p-table styleClass=&quot;sticky-table&quot; #TasksTable [autoLayout]=&quot;true&quot; [value]=&quot;tasks&quot; selectionMode=&quot;single&quot; [paginator]=&quot;true&quot; [rows]=&quot;rows&quot; [columns]=&quot;columns&quot; [rowsPerPageOptions]=&quot;[10,20,50,100,200]&quot; [first]=&quot;first&quot; (onPage)=&quot;onPageChange($event)&quot; [style]=&quot;{width:'100%'}&quot;
              sortMode=&quot;multiple&quot; [reorderableColumns]=&quot;true&quot; [resizableColumns]=&quot;true&quot;&gt;
  
              &lt;ng-template pTemplate=&quot;header&quot;&gt;
                  &lt;tr id=&quot;sticky-header&quot;&gt;
                      &lt;th class=&quot;flex-header&quot; *ngFor=&quot;let col of columns&quot; [pSortableColumn]=&quot;col.field&quot; pResizableColumn pReorderableColumn&gt;
                          &lt;span&gt;
                                  &lt;p-sortIcon [field]=&quot;col.field&quot;&gt;&lt;/p-sortIcon&gt;
                                  {{col.header}}
                              &lt;/span&gt;
                          &lt;p-columnFilter [showIcon]=&quot;false&quot; operator=&quot;or&quot; [type]=&quot;!col.type ? 'text' : col.type&quot; display=&quot;menu&quot; [field]=&quot;col.field&quot;&gt;&lt;/p-columnFilter&gt;
                      &lt;/th&gt;
                  &lt;/tr&gt;
  
              &lt;/ng-template&gt;
              &lt;ng-template pTemplate=&quot;body&quot; let-tasks&gt;
                  &lt;tr [pSelectableRow]=&quot;tasks&quot;&gt;
                      &lt;ng-container *ngFor=&quot;let col of columns&quot;&gt;
                          &lt;td&gt;
                              &lt;ng-container&gt;
                                  {{tasks[col.field]}}
                              &lt;/ng-container&gt;
                          &lt;/td&gt;
                      &lt;/ng-container&gt;
                  &lt;/tr&gt;
              &lt;/ng-template&gt;
              &lt;ng-template pTemplate=&quot;paginatorright&quot;&gt;
                  &lt;p-button icon=&quot;pi pi-refresh&quot; (onClick)=&quot;refresh()&quot; [pTooltip]=&quot;'common.refresh'&quot; tooltipPosition=&quot;bottom&quot; showDelay=&quot;300&quot;&gt;&lt;/p-button&gt;
              &lt;/ng-template&gt;
  &lt;/p-table&gt;
  
  ...
  </code></pre>
  <p>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).</p>
  <p>Thanks in advance!</p>