Angular - Reusable Table Not Receiving Passed Data

I'm new to Angular and trying to create a reusable table component. The test label below displays the passed column value without issue but the table rows never appear. However, if I copy paste the table component code directly to the page I'm calling my reusable component from, the head row appears without issue.

I've been testing this like crazy and I can't see why the data can make the leap to the label but not to the table.

Here's the HTML for my reusable component -

<label [innerText]="columns[2]"></label>

<p-table [columns]="columns">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col}}
</th>
</tr>
</ng-template>
</p-table>


Here is how I have the input declared -

export class ReusableTableComponent implements OnInit {

@Input() columns :string[]= [];

ngOnInit(): void {
}
}

Continue reading...