Primeng Table row selection highlight only for the visible scroll part

Question

I have used PrimeNg Table and applied scroll with scrollDirection="both" but the issue is, it show the row selection for the visible part of the scroll and once I scroll to right, I can see the highlighted part as below:

Code:

<p-table [value]="CommonData" [first]="0" [rows]="pageSize" [paginator]="true" [pageLinks]="3"
[rowsPerPageOptions]="[10, 20, 50, 100]" [columns]="selectedColumns" selectionMode="single" [lazy]="true"
(onLazyLoad)="loadData($event)" [reorderableColumns]="true" [totalRecords]="totalRecords" [responsive]="true" paginatorDropdownAppendTo="body" (onPage)="pageIndexChange($event)"
[scrollable]="true" scrollDirection="both">

Not sure, what could be the reason for this..

Answer 1

From PrimeNG documentation : https://www.primefaces.org/primeng/showcase/#/table

Set scrollDirection to "both" and give fixed widths to columns to scroll both ways.

You need to set fixed widths for columns for the scroll to function properly. for example :

<p-table [value]="customers" [scrollable]="true" scrollDirection="both">
    <ng-template pTemplate="header">
        <tr>
            <th style="width:100px">Id</th>
            <th style="width:200px">Name</th>
            <th style="width:200px">Country</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-customer>
        <tr>
            <td style="width:100px">{{customer.id}}</td>
            <td style="width:200px">{{customer.name}}</td>
            <td style="width:200px">{{customer.country.name}}</td>
        </tr>
    </ng-template>
</p-table>