PrimeNG 15 dropdown issue with frozen column in table

Question

I am working with Angular and PrimeNG version 15. I have a PrimeNG table with the first column frozen, the second column regular text and in the third column a dropdown. If you scroll horizontal the second column slides under the first column, but the dropdown in the third column goes over the first column instead of under it.

You can see this issue and code by follow this link: https://stackblitz.com/edit/angular-nk7tb5

Does anybody knows how to solve this? Any help is much appreciated !!

<p-table [value]="rows" [scrollable]="true" scrollHeight="500px" styleClass="p-datatable-gridlines">
  <ng-template pTemplate="header">
    <tr>
      <th pFrozenColumn class="header">header xxx</th>
      <th>header yyyy</th>
      <th>header yyyy</th>
      <th>header yyyy</th>
      <th>header yyyy</th>
      <th>header yyyy</th>
      <th>header yyyy</th>
      <th>header yyyy</th>
      <th>header yyyy</th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-row>
    <tr>
      <td pFrozenColumn>shdfgjsdjfsjdf</td>
      <td>wwwwwwwwwwwwwwwww</td>
      <td><p-dropdown appendTo="body" [options]="cities" [(ngModel)]="selectedCity"></p-dropdown></td>
      <td>wwwwwwwwwwwwwwwww</td>
      <td><p-dropdown appendTo="body" [options]="cities" [(ngModel)]="selectedCity" [autoZIndex]="false" [baseZIndex]="0"></p-dropdown></td>
      <td>wwwwwwwwwwwwwwwww</td>
      <td>wwwwwwwwwwwwwwwww</td>
      <td>wwwwwwwwwwwwwwwww</td>
      <td>wwwwwwwwwwwwwwwww</td>
    </tr>
  </ng-template>
</p-table>

Answer 1

Give a higher z-index to your column. This should work, for ex.

<td pFrozenColumn style="z-index: 1">shdfgjsdjfsjdf</td>