Primeng: RTL support for datatable component

[MehdiSaeedifar]

Please support right-to-left languages such as Arabic or Farsi for datatable component.

[ghost]

Is there any plan for supporting right to left languages? Not only data table, all components!

[yuvalbl]

Hey guys,
Any news regarding table RTL support?
It would be wonderful indeed if you'll add it :)

Adding a closed issue referencing the same thing

[cagataycivici]

Will do for 4.1.1, we've just started RTL enhancements;

https://www.primefaces.org/primeng/#/rtl

[ismcagdas]

Hi @cagataycivici , is this in your short term plan ?

We are using PrimeNg and it is great. The only problem we had with datatable and rtl is, when datatable is scrollable, scrollbar does not scroll table's header. If you are not going to work on this in a short time, can you offer a workaround for this problem ?

Thanks for your great effort.

[Rchoudhary-tcs]

same issue as with @ismcagdas ,please give your feedback on this post @cagataycivici

[tigrenok00]

Same issue with the scroll in RTL, please help @cagataycivici

[cagataycivici]

p-dataTable is deprecated and will be removed in favor of the new p-table (aka TurboTable) of 5.1.0 so closing the issue. Please try the new p-table once 5.1.0 is released.

[ismcagdas]

@cagataycivici p-table has the same issue.

[anuradhamudalige]

Fixed this using ngAfterViewInit,

const elements = this.elem.nativeElement.querySelectorAll('.ui-datatable-scrollable-body');
    let initValue = 0;
    const headerBox = this.elem.nativeElement.querySelectorAll('.ui-datatable-scrollable-header-box');
    const table = headerBox[0].children[0] as any;
    elements[0].addEventListener('scroll', () => {
      if (headerBox && headerBox[0].style && this.isLanguageChanged) {
          const marginLeft = parseInt(headerBox[0].style.marginLeft, 10);
          headerBox[0].style.marginRight = '0px';
          if (!this.scrolled) {
            this.scrolled = true;
            initValue = marginLeft;
          }
          table.style.marginRight = (initValue - marginLeft) + 'px';
      }
    });

[patolam]

for those who struggle with the same problem using p-table:

    const body: HTMLElement = table.el.nativeElement.querySelector('.ui-table-scrollable-body');
    const header: HTMLElement = table.el.nativeElement.querySelector('.ui-table-scrollable-header');
    body.addEventListener('scroll', () => {
      header.scrollLeft = body.scrollLeft;
    });