PrimeNG - 粘性 header 在 p 表中不起作用

Question

Hello I am using PrimeNG p-table which has both horizontal scroll and vertical scroll. I want to use sticky header for the table for which I have tried following 2 methods -

[scrollable]="true"
scrollHeight="350px"

This one is making header sticky but column width is getting changed automatically, removes the horizontal scroll and trying to fit complete table in browser page width due to which columns data are overlapping with each other.

Another method I tried is using css -

:host ::ng-deep .ui-table-scrollable-header{
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1000;
}

But this code has having no effect on my UI.

Can any body help me in fixing this? Below is my p-table code and all my columns are of variable length.

<p-table #dt [columns]="cols" [value]="data" [paginator]="true" dataKey="id" editMode="row" [rows]="25"
    [rowsPerPageOptions]="[10,25,50,75,100]" [autoLayout]='true' sortMode="multiple"
    selectionMode="multiple" [(selection)]="selected">

Answer 1

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>

Answer 2

I also just ran into this problem, after some digging into the cause of it I ended up opening an issue where I give my take on the problem, perhaps they'll eventually make some changes on the way scrollable works https://github.com/primefaces/primeng/issues/11099