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

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

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

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

我尝试的另一种方法是使用 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">
stack overflow PrimeNG - Sticky header not working in p-table
原文答案

答案:

作者头像

你见过 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>
作者头像

我也遇到了这个问题,在挖掘出它的原因之后,我最终开了一个问题,我对这个问题进行了处理,也许他们最终会在可滚动作品的方式上进行一些更改 https://github.com/primefaces/primeng/issues/11099