CODEWITHSUNDEEP
htmlcssangularprimengprimeng-datatable
mkHun
mkHun

Reputation: 5927

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

Upvotes: 15

Views: 8937

Answers (5)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24454

when you set the p-table columns to be resizable the add a class ui-table-resizable this will reset some css property one of its the position of th to relative so you will lose 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!

add the style in the component decorator is not reusable ,base of primeng theme recommendation of creating custom style we can do 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;
        }
      }
      
}

template

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

demo

Upvotes: 16

Vincent Dibon
Vincent Dibon

Reputation: 11

I had sticky Table Headers working without resize before. After adding resize it didn't stick anymore.

I fixed it on my small datatable (p-datatable-sm). I guess this works for normal size datatables with the right css class aswell.

Angular v15.1, primeng 15.2

The Fix for me:

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

Explanation:

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

adds:

position:relative

and

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

overwrites that.

Upvotes: 0

user2424938
user2424938

Reputation: 1

Please use the below code:

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

Upvotes: 0

Venkata AjayKumar S
Venkata AjayKumar S

Reputation: 41

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

Upvotes: 1

Maik
Maik

Reputation: 61

Anyone who still might be interested:
For me it worked by just adding the following

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

The Resizable-Fatures adds "overflow-x: auto" to the table, which hides the stick header.

Upvotes: 6

Related Questions