scrollable and rtl doesn't work in primeNG table - scrollbar

Question

I want to have a table with horizontal and vertical scrollbar .
showcase in primeNg work properly when we don't use rtl direction for our table !
when we use horizontal scroll and rtl direction scroll doesn't scroll on table header ! table header is fixed when we use in rtl dir
mycode:
<div dir="rtl">
<p-table dir="rtl" #dt
[columns]="cols"
[value]="cars"
[paginator]="true"
[rows]="10"
[scrollable]="true"
scrollHeight="200px"
[style]="{width:'1000px'}">
<!-- below for fixining columns withs-->
<ng-template pTemplate="colgroup" let-columns>
<colgroup>
<col *ngFor="let col of columns" style="width:150px;">
</colgroup>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr dir="rtl" class="ui-rtl">
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [pSelectableRow]="rowData">
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
</div>

Answer 1

PrimeNG doesn't support RTL for table component.
So workaround would be to listen for scroll event on the body and assign the same exact shift to the header:
scrollableTableBodyScroll: () => void;
constructor(
private el: ElementRef,
private zone: NgZone,
) { }
ngAfterViewInit(): void {
const scrollableTableHeader: HTMLElement = this.el.nativeElement.querySelector('.ui-table-scrollable-header');
const scrollableTableBody: HTMLElement = this.el.nativeElement.querySelector('.ui-table-scrollable-body');
this.zone.runOutsideAngular(() => {
this.scrollableTableBodyScroll = this.renderer.listen(scrollableTableBody, 'scroll', () => {
scrollableTableHeader.scrollLeft = scrollableTableBody.scrollLeft;
});
});
}
ngOnDestroy(): void {
this.scrollableTableBodyScroll();
}
Reasons behind use of NgZone