feat: calculate table column position when RTL

npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html

@@ -21,7 +21,7 @@
   <div class="ui-table-scrollable-wrapper">
     <div class="ui-table-scrollable-view"></div>
     <div class="ui-table-scrollable-header ui-widget-header">
-      <div [style.margin-left.px]="-bodyScrollLeft" class="ui-table-scrollable-header-box">
+      <div #header class="ui-table-scrollable-header-box">
         <table class="ui-table-scrollable-header-table">
           <ng-container *ngTemplateOutlet="colGroup"></ng-container>
           <ng-container *ngTemplateOutlet="head"></ng-container>
@@ -31,7 +31,7 @@
     </div>
     <div
       #scrollableBody
-      (scroll)="bodyScrollLeft = scrollableBody.scrollLeft"
+      (scroll)="header.style.margin = marginCalculator(scrollableBody)"
       class="ui-table-scrollable-body"
       [style.max-height]="scrollHeight"
     >

npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts

@@ -1,9 +1,9 @@
 import {
-  AfterViewInit,
   Component,
   ElementRef,
   EventEmitter,
   Input,
+  OnInit,
   Output,
   TemplateRef,
   TrackByFunction,
@@ -17,7 +17,7 @@ import {
   styleUrls: ['table.component.scss'],
   encapsulation: ViewEncapsulation.None,
 })
-export class TableComponent {
+export class TableComponent implements OnInit {
   private _totalRecords: number;
   bodyScrollLeft = 0;
 
@@ -87,4 +87,20 @@ export class TableComponent {
   trackByFn: TrackByFunction<any> = (_, value) => {
     return typeof value === 'object' ? value[this.trackingProp] || value : value;
   };
+
+  marginCalculator: MarginCalculator;
+
+  ngOnInit() {
+    this.marginCalculator = document.body.dir === 'rtl' ? rtlCalculator : ltrCalculator;
+  }
+}
+
+function ltrCalculator(div: HTMLDivElement): string {
+  return `0 auto 0 -${div.scrollLeft}px`;
+}
+
+function rtlCalculator(div: HTMLDivElement): string {
+  return `0 ${-(div.scrollWidth - div.clientWidth - div.scrollLeft)}px 0 auto`;
 }
+
+type MarginCalculator = (div: HTMLDivElement) => string;