PrimeNG p-table column widths on scrollable table

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

Ombudsman

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.

Studnia

IN the above code the style="flex: 0 0 320px;" is doing a lot of the heavy lifting, from the MDN flex page: /* Three values: flex-grow | flex-shrink | flex-basis */ - flex: 2 2 10%; I think that explains a lot of what you need to know about the code above (that has no explanation). – Ere

Answer 2

Just to make it even more explicit since the existing answer isn't very clear:

If you were originally trying to do this:

style="width: 50%"

<!-- or -->

[ngStyle]="{'width': '50%'}"

you instead want:

style="flex: 0 0 50%"

<!-- or -->

[ngStyle]="{'flex': '0 0 50%'}"

And, it needs to be applied to both the header and body column, unfortunately.

Flews