How to add a sticky header without virtual scroll and with pagination

[muhammed671]

Hello,

How I can change the header to sticky header with this configuration?

this.configuration = { ...DefaultConfig };
this.configuration.searchEnabled = true;
this.configuration.horizontalScroll = true;
this.configuration.tableLayout.style = 'tiny';
this.configuration.checkboxes = true;

HTML

<ngx-table
  [configuration]="configuration"
  [data]="this.data"
  #table
  [detailsTemplate]="detailsTemplate"
  [columns]="columns"
  (event)="eventEmitted($event)"
>
<ng-template let-row let-index="index">
   ...
</ng-template>
</ngx-table>
<ng-template #detailsTemplate let-row>
  ...
</ng-template>

I tried already this here in my scss file:

:host ::ng-deep #table {
    font-family: 'Montserrat', sans-serif;
    .ngx-table__header{
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 9999;
    }
}

But it's not working.

[ssuperczynski]

:host ::ng-deep thead {
    position: sticky;
    top: 0;
    background-color: white;
}