From 990c54a3fe90e46563bda39da3f064266736671d Mon Sep 17 00:00:00 2001
From: Arman Ozak <arman@armanozak.com>
Date: Fri, 29 May 2020 11:50:11 +0300
Subject: [PATCH] feat: calculate table column position when RTL

---
 .../lib/components/table/table.component.html |  4 ++--
 .../lib/components/table/table.component.ts   | 20 +++++++++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html
index eeaf0d40d9..6cbea56304 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html
+++ b/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"
     >
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts
index da17aab136..15b7b4eda0 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.ts
+++ b/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;