粘性标题不适用于 Primeng 中可调整大小的列。？

Question

我正在尝试实现列调整大小和粘标题。但如果我不使用列调整大小，粘性标题就可以正常工作。如果我同时实现两者，则列调整大小有效，但粘性标题不起作用。

我使用了 primeng 中的以下 css 作为粘性标题。

  :host ::ng-deep .ui-table .ui-table-thead > tr > th {
        position: -webkit-sticky;
        position: sticky;
        top: 70px;
    }

    @media screen and (max-width: 64em) {
        :host ::ng-deep .ui-table .ui-table-thead > tr > th {
            top: 100px;
        }
    }

对于列大小调整，我使用了以下代码，

[resizableColumns]="true"

，

pResizableColumn

  <p-table [columns]="cols" [value]="cars1" [resizableColumns]="true">
    ...
     <th *ngFor="let col of columns" pResizableColumn>

如果我删除

resizbleColumns

和

pResizableColumn

粘性标题就可以正常工作。我怎样才能让它同时起作用？这是 stackblitz 和 Demo

Answer 1

当您将 p-table 列设置为可调整大小时，添加一个类

ui-table-resizable

这将重置一些 css 属性，其中一个

th

的位置为相对位置，这样您将失去粘性的未来

这应该可以解决问题

:host ::ng-deep .ui-table .ui-table-thead > tr > th {
  position: -webkit-sticky;
  position: sticky;
  background: blue;
  color: white;
  top: 0px;
  z-index: 1;
}

:host ::ng-deep .ui-table-resizable > .ui-table-wrapper {
  overflow-x: initial !important;
}

:host ::ng-deep .ui-table-resizable .ui-resizable-column {
  position: sticky !important;
}

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

演示

更新了！

在组件装饰器中添加的样式是不可重用的，primeng主题推荐创建自定义样式的基础我们可以这样做

style.scss

.sticky-table {

      &.ui-table .ui-table-thead > tr > th {
        position: -webkit-sticky;
        position: sticky !important;
        background: blue;
        color: white;
        top: 0px;
        z-index: 1;
      }

     &.ui-table-resizable > .ui-table-wrapper {
        overflow-x: initial !important;
      }

      &.ui-table-resizable .ui-resizable-column {
        position: sticky !important;
      }

      @media screen and (max-width: 64em) {
        .ui-table .ui-table-thead > tr > th {
          top: 0px;
        }
      }
      
}

模板

<p-table styleClass="sticky-table" [columns]="cols" [value]="cars [resizableColumns]="true">
....
</p-table>

演示

Answer 2

任何仍然感兴趣的人：
对我来说，只需添加以下内容就可以了

:host ::ng-deep .p-datatable .p-datatable-wrapper {
    overflow-x: initial;
}

可调整大小的功能将“overflow-x: auto”添加到表格中，从而隐藏了棒头。

Answer 3

:host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
        position: -webkit-sticky;
        position: sticky;
        background: blue;
        color: white;
        top: 0px;
        z-index: 1;
      }
      
      :host ::ng-deep .p-datatable-resizable > .p-datatable-wrapper {
        overflow-x: initial !important;
      }
      
      :host ::ng-deep .p-datatable-resizable .ui-resizable-column {
        position: sticky !important;
      }
      
      @media screen and (max-width: 64em) {
        :host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
          top: 0px;
        }
      }

Answer 4

请使用以下代码：

<p-table [columns]="cols" [value]="rows" [autoLayout]="true">

Answer 5

我以前有粘性表头，无需调整大小即可工作。添加调整大小后，它不再粘住了。

我将其修复在我的小数据表（p-datatable-sm）上。我想这也适用于具有正确 css 类的正常大小的数据表。

Angular v15.1，primeng 15.2

我的修复：

:host ::ng-deep .p-datatable-sm .p-resizable-column {
    position: sticky !important;
}

说明：

.p-datatable-resizable-table>.p-datatable-thead>tr>th.p-resizable-column:not(.p-frozen-column)

补充：

position:relative 

和

:host ::ng-deep .p-datatable-sm .p-resizable-column {
    position: sticky !important;
}

覆盖它。