Issue

I am trying to implement both column resize and stick header. But sticky header works fine if I won’t use the column resize. If I implement both, column resize is working but sticky header is not working.

I used the following css from primeng for the sticky header.

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

and for the colum resize I used the below code, [resizableColumns]="true", pResizableColumn

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

If I remove the resizbleColumns and pResizableColumn sticky header works fine. How can I make it works both things.? Here is the stackblitz and Demo

Solution

Setting a p-table column as resizable adds the class ui-table-resizable. This resets some css properties to one of the th positions. You will lose your sticky future

This should fix the problem

: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 🔥🔥

Updated! 🚀🚀

Adding styles to component decorators is not reusable. The primeng theme base recommends creating a custom style that can be done like this

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

}
 

Templates

....

 

DEMO ⚡⚡

Answered By – Muhammed Albarmavi

Answer Checked By – Mildred Charles (Easybugfix Admin)

Tags: angular, css, html, primeng, primeng-datatable