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

Posted 2023-03-05

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

【英文标题】：Sticky header not working with resizable column in Primeng.?

【发布时间】：2020-01-06 03:46:06

【问题描述】：

我正在尝试同时实现column resize 和stick header。但是如果我不使用列调整大小，粘性标题可以正常工作。如果我同时实现这两个，列调整大小正在工作，但粘性标题不起作用。

我使用了来自 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

【参考方案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;
  

demo ??

更新！ ??

在组件装饰器中添加样式不可重用，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>

demo ⚡⚡

【讨论】：

这是唯一有效的解决方案！谢谢！

【参考方案2】：

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

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

Resizable-Fatures 将“overflow-x: auto”添加到表中，从而隐藏了stick header。

【讨论】：

它适用于autoLayout="true"。谢谢。

它也适用于responsiveLayout="scroll"

【参考方案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;
        
      

【参考方案4】：

请使用以下代码：

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

【讨论】：

解释会很有帮助:-)