PrimeNG - 在p-table中粘性表头无法正常工作

Question

你好，我正在使用具有水平和垂直滚动条的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;
}

但是这段代码对我的用户界面没有任何影响。

有人可以帮我修复吗？以下是我的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">

- abhjt

---

请问您能否包含一个 StackBlitz 实现？ - undefined

Answer 1

你是否看过this primeNg页面？他们提供了带有sticky header的实现示例。为了防止列的自动调整大小，您可能需要将宽度设置为硬编码值，但是sticky 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>

- PMO1948

---

是的，我查看了primeng的文档。但这并没有帮助。我将尝试添加一个stackbiltz示例。 - undefined

Answer 2

将此添加到@Component中。

  styles: [`
    :host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
    }

    @media screen and (max-width: 64em) {
        :host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
            top: 0px;
        }
    }
  `]

- Danial Ahmad

Answer 3

我也遇到了这个问题，经过一些调查研究，我最终打开了一个问题，在那里我提出了自己对于这个问题的看法，也许他们最终会对可滚动性的工作方式做出一些改变https://github.com/primefaces/primeng/issues/11099

- sandu

Answer 4

我使用第二个选项， 我创建了一个类名为card的div来包装表格 这是我的CSS：

.card {
    height: calc(100% - 16px);
    overflow: auto;
}
.p-datatable {
    .p-datatable-wrapper {
        overflow: visible !important;
    }

    .p-datatable-thead > tr > th {
        position: sticky;
        top: -16px;
    }
}

- Hadas Bar