How to use perfect-scrollbar inside primeNG table in angular

Question

I'm trying to use perfect-scrollbar instead of native browser scroll for vertical, horizontal scroll inside p-table (primeNG table).
However, if perfect-scrollbar is used, nothing gets displayed inside scrollable area.

app.component.html -

<p-table #dt [columns]="cols" [value]="cars" [scrollable]="true"scrollHeight="270px">
  <ng-template pTemplate="caption">
    <p>List of Cars</p> 
  </ng-template>
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of cols">
                {{col.header}} 
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <perfect-scrollbar [ngStyle]="{'max-height.vh': 35}">
            <tr>
                <td *ngFor="let col of cols">
                    {{rowData[col.field]}}
                </td>
            </tr>
        </perfect-scrollbar>
    </ng-template>
</p-table>