Sticky header in primeng 10.0.3 table not working on Angular 10.1.5

Question

I am trying to let the header of a primeng table FIXED (sticky at the top) when I scroll it. I followed exactly the tutorial at the primeng docs site. https://primefaces.org/primeng/showcase/#/table/sticky.

My CSS file is exactly the same as suggested in the documents:

:host ::ng-deep .p-datatable .p-datatable-thead > tr > th {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
}

At html file (the table renders without any problem but the header is still not sticky):

<p-table
  [value]="exchanges"
  [paginator]="true"
  [rows]="15"
  [rowHover]="true"
  [rowsPerPageOptions]="[5, 10, 25, 50, 100]"
  [showCurrentPageReport]="false"
  [sortable]="true"
  sortField="adjusted_rank"
  [sortOrder]="1"
  #dt
>

  <ng-template pTemplate="header">
    <tr>
      <th [style]="{ width: '90px' }" pSortableColumn="adjusted_rank">
        <!-- {{ 'TRANSLATE.HOME.TABLE.RANK' | translate}} -->
        Rank
        <p-sortIcon field="adjusted_rank"></p-sortIcon>
      </th>

      <th class="nameExchange" [style]="{ width: '130px' }">
        <div class="container">
          <input
            pInputText
            type="text"
            (input)="dt.filter($event.target.value, 'name', 'startsWith')"
            placeholder="search by name"
            class="ui-column-filter"
          />
        </div>
      </th>
      <th class="hideAbove640">
        <p-dropdown
          ngDefaultControl
          [options]="optionsDropDown"
          (onChange)="selection($event, dd)"
          [(ngModel)]="selected"
          name="selected"
          #dd
          [style]="{ width: '100%', 'min-width': '100%' }"
        ></p-dropdown>
      </th>
      <th class="hideBelow768" [style]="{ width: '100px' }">
        Vol. 24h $
        <!-- {{ 'TRANSLATE.HOME.TABLE.PRICE' | translate }} -->
      </th>
      <th
        class="hideBelow640"
        [style]="{ width: '140px' }"
        pSortableColumn="currencies"
      >
        <!-- {{ 'TRANSLATE.HOME.TABLE.PRICE_EUR' | translate }} -->
        Currencies
        <p-sortIcon field="currencies"></p-sortIcon>
      </th>
      <th
        class="hideBelow640"
        [style]="{ width: '140px' }"
        pSortableColumn="markets"
      >
        <!-- {{ 'TRANSLATE.HOME.TABLE.PRICE_EUR' | translate }} -->
        Markets
        <p-sortIcon field="markets"></p-sortIcon>
      </th>
      <th class="hideBelow1200">
        Description
        <!-- {{ 'TRANSLATE.HOME.TABLE.PRICE' | translate }} -->
      </th>

      <th class="hideBelow768" [style]="{ width: '160px' }">
        <!-- {{ 'TRANSLATE.HOME.TABLE.PRICE_BTC' | translate }} -->
        Website
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-exchange>
    <tr>
      <td [style]="{ width: '80px' }">
        {{ exchange.adjusted_rank }}
      </td>
      <td>
        <img
          src="assets/imgs/exchanges/{{ exchange.name | lowercase }}.png"
          alt="{{ exchange.name | lowercase }}"
        />
        {{ exchange.name }}
      </td>
      <td class="hideAbove640">
        <span *ngIf="selectedName === 'Vol. 24h'">
          {{ exchange.quotes.USD.adjusted_volume_24h | formatCurrency }}
        </span>
        <span *ngIf="selectedName === 'Currencies'">
          {{ exchange.currencies }}
        </span>
        <span *ngIf="selectedName === 'Markets'">
          {{ exchange.markets }}
        </span>
        <span *ngIf="selectedName === 'Websites'">
          <li (click)="onNavigate($event)">
            {{ exchange.links.website[0] | formatUrl }}
          </li>
        </span>
      </td>
      <td class="hideBelow768">
        {{ exchange.quotes.USD.adjusted_volume_24h | formatCurrency }}
        <!-- {{ exchange.price_usd | currency: 'USD' }} -->
      </td>
      <td class="hideBelow640">
        {{ exchange.currencies }}
        <!-- {{ exchange.price_usd | currency: 'USD' }} -->
      </td>
      <td class="hideBelow640">
        {{ exchange.markets }}
        <!-- {{ exchange.price_usd | currency: 'USD' }} -->
      </td>
      <td class="hideBelow1200">
        {{ exchange.description }}
        <!-- {{ exchange.price_usd | currency: 'USD' }} -->
      </td>
      <td class="hideBelow768">
        <li (click)="onNavigate($event)">
          {{ exchange.links.website[0] | formatUrl }}
        </li>
      </td>
    </tr>
  </ng-template>
</p-table>

Do someone knows what can be the problem? It should work pretty straightforward.

Thanks in advance!

Cheers, Marcelo