PrimeNG - 粘性标题在 p 表中不起作用答案

【问题标题】：PrimeNG - Sticky header not working in p-tablePrimeNG - 粘性标题在 p 表中不起作用
【发布时间】：2021-06-12 12:14:42
【问题描述】：

您好，我正在使用同时具有水平滚动和垂直滚动的 PrimeNG p-table。我想对我尝试过以下 2 种方法的表使用粘性标题 -

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

这会使标题变得粘稠，但列宽会自动更改，移除水平滚动并尝试在浏览器页面宽度中调整完整表格，因为列数据相互重叠。

我尝试的另一种方法是使用 css -

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

但是这段代码对我的 UI 没有任何影响。

任何机构可以帮助我解决这个问题吗？下面是我的 p-table 代码，我的所有列都是可变长度的。

<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">

【问题讨论】：

能否请您提供一个 stackblitz 实现？

标签： html css angular primeng

【解决方案1】：

你见过this primeNg page吗？他们有带有粘性标题的实现示例。您可能需要将宽度设置为硬编码值以防止自动调整列的大小，但是内置了粘性标题。

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>

【讨论】：

是的，我检查了primeng文档。这也无济于事。我将尝试添加一个 stackbiltz 示例。

【解决方案2】：

我也遇到了这个问题，在深入研究了它的原因之后，我最终打开了一个问题，我对这个问题给出了自己的看法，也许他们最终会对可滚动的工作方式做出一些改变https://github.com/primefaces/primeng/issues/11099

【讨论】：