PrimeNG p-table column widths on scrollable table - primeng

Question

I have a p-table defined with [scrollable]="true"
<p-table
*ngIf="!loading"
[value]="data"
[resizableColumns]="true"
[reorderableColumns]="true"
[columns]="columns"
[autoLayout]="true" <---
[scrollable]="true" <---
scrollHeight="75vh"
>
The [scrollable] changes the table layout from display: table-cell to display:flex and thus the [autoLayout] is now ignored.
I have tried setting the styles here to percentage widths (i.e. 10%/10%/80%) but it has no effect with the flex display table.
<th
*ngFor="let col of columns"
pSortableColumn="{{ col.field }}"
pReorderableColumn
pResizableColumn
[ngStyle]="{'width': col.width}" <---
>
I see there is a PrimeNG issue commenting on this, but are there any workarounds I can use to get set column widths when using [scrollable]?
https://github.com/primefaces/primeng/issues/5510#issuecomment-432155295

Answer 1

try the following:
<!-- File: employee-grid.component.html -->
<p-table #dt id='employees-grid' [value]='employees' [responsive]='true'
scrollHeight='420px' [scrollable]='true'
[(selection)]='selectedEmployee' selectionMode='single'
(onRowSelect)='onRowSelect($event)' dataKey='EmployeeId'>
<ng-template pTemplate='caption'>
<div class='nsg-row nsg-text-center'>
<h5 class='nsg-primary-color'>Employee Selection</h5>
</div>
</ng-template>
<ng-template pTemplate='header'>
<tr>
<th style='flex: 0 0 320px;'>
Name
<p-columnFilter type='text' field='EmployeeName' matchMode='contains' display='menu'></p-columnFilter>
</th>
<th style='flex: 0 0 160px;'>
Company
<p-columnFilter type='text' field='CompanyShortName' display='menu'></p-columnFilter>
</th>
<th>
Div/Depart
<p-columnFilter type='text' field='DeptDivShortName' display='menu'></p-columnFilter>
</th>
<th>
Job Title
<p-columnFilter type='text' field='JobTitle' display='menu'></p-columnFilter>
</th>
</tr>
</ng-template>
<ng-template pTemplate='body' let-rowData let-idx='rowIndex'>
<tr [pSelectableRow]='rowData' [pSelectableRowDisabled]='!editable' [ngClass]="{'nsg-state-highlight' : idx === selectedRowIdx}">
<td style='flex: 0 0 320px;'>
<span class='p-column-title'>Name</span>
{{rowData.EmployeeName}}
</td>
<td style='flex: 0 0 160px;'>
<span class='p-column-title'>Company</span>
{{rowData.CompanyShortName}}
</td>
<td>
<span class='p-column-title'>Division/Depart</span>
{{rowData.DeptDivShortName}}
</td>
<td>
<span class='p-column-title'>Job Title</span>
{{rowData.JobTitle}}
</td>
</tr>
</ng-template>
</p-table>
<!-- End of employee.grid.component.html -->
Also check the Primefaces forum for solutions, but generally Stack Overflow is the best source.