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

Question

您好，我正在使用同時具有水平滾動和垂直滾動的 PrimeNG p-table。 我想對我嘗試過以下兩種方法的表使用粘性 header -

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

這使得 header 具有粘性，但列寬會自動更改，移除水平滾動並嘗試在瀏覽器頁面寬度中調整完整表格，因為列數據相互重疊。

我嘗試的另一種方法是使用 css -

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

但是這段代碼對我的 UI 沒有影響。

任何機構都可以幫我解決這個問題嗎？ 下面是我的 p 表代碼，我所有的列都是可變長度的。

<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

你看過這個primeNg頁面嗎？ 他們有帶有粘性標題的實現示例。 您可能需要將寬度設置為硬編碼值以防止自動調整列的大小，但內置的粘性 header 是內置的。

PrimeNg 示例：

    <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

我也剛剛遇到了這個問題，在深入研究了它的原因之后，我最終打開了一個問題，我對這個問題給出了看法，也許他們最終會對可滾動的工作方式進行一些更改https://github。 com/primefaces/primeng/issues/11099