PrimeNG - Sticky header not working in p-table
Have you seen this primeNg page? They have implementation examples with sticky headers. You may need to set the width to a hard-coded value to prevent the auto-resizing of the columns, but the sticky header comes built in.
PrimeNg example:
<p-table [value]="customers" [scrollable]="true" [style]="{width:'600px'}" scrollHeight="200px">
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col style="width:250px">
<col style="width:250px">
<col style="width:250px">
<col style="width:250px">
<col style="width:250px">
<col style="width:250px">
<col style="width:250px">
<col style="width:250px">
</colgroup>
</ng-template>
<ng-template pTemplate="header">
<tr>
<th>Id</th>
<th>Name</th>
<th>Country</th>
<th>Date</th>
<th>Company</th>
<th>Status</th>
<th>Activity</th>
<th>Representative</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-customer>
<tr>
<td>{{customer.id}}</td>
<td>{{customer.name}}</td>
<td>{{customer.country.name}}</td>
<td>{{customer.date}}</td>
<td>{{customer.company}}</td>
<td>{{customer.status}}</td>
<td>{{customer.activity}}</td>
<td>{{customer.representative.name}}</td>
</tr>
</ng-template>
</p-table>