scrollable and rtl doesn't work in primeNG table

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>

score 0 · Answer 1 · answered Jul 09 '20 at 15:14

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

scrollable and rtl doesn't work in primeNG table

1 Answers1