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

user7348570
2021-03-15  
3351  
    
3  

您好，我正在使用同时具有水平滚动和垂直滚动的 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">
html ,  css ,  angular ,  primeng
stack overflow PrimeNG - Sticky header not working in p-table
原文答案

答案:

作者头像
PMO1948
2021-03-15    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>
作者头像
sandu
2022-01-21    0      原文

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

相关问题

标签