Thursday 5 September 2019

Sticky header not working with resizable column in Primeng.?

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



from Sticky header not working with resizable column in Primeng.?

No comments:

Post a Comment