El encabezado fijo no funciona con la columna de tamaño variable en Primeng.

Solución:

cuando configura las columnas de la tabla p para que sean redimensionables, agregue una clase ui-table-resizable esto restablecerá alguna propiedad css, una de las cuales es la posición de th a pariente por lo que perderá futuro pegajoso

Esto debería solucionar el problema

: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;
  }
}

manifestación

¡Actualizado!

agregar el estilo en el decorador de componentes no es reutilizable, base de la recomendación del tema primeng de crear un estilo personalizado que podemos hacer así

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;
        }
      }

}

plantilla

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

demo ⚡⚡

---

---

Utiliza Nuestro Buscador