From e014960e97d5405d33f91b80ade030e3cb27e055 Mon Sep 17 00:00:00 2001
From: Deepesh Garg <42651287+deepeshgarg007@users.noreply.github.com>
Date: Fri, 26 Apr 2019 13:10:10 +0530
Subject: [PATCH] feat: Add support for RTL (#64)

---
 src/datatable.js | 2 +-
 src/defaults.js  | 3 ++-
 src/style.js     | 9 ++++++---
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/datatable.js b/src/datatable.js
index 7234860..dc21c79 100644
--- a/src/datatable.js
+++ b/src/datatable.js
@@ -68,7 +68,7 @@ class DataTable {
 
     prepareDom() {
         this.wrapper.innerHTML = `
-            <div class="datatable">
+            <div class="datatable" dir="${this.options.direction}">
                 <div class="dt-header"></div>
                 <div class="dt-scrollable"></div>
                 <div class="dt-footer"></div>
diff --git a/src/defaults.js b/src/defaults.js
index e63c973..7dff8b4 100644
--- a/src/defaults.js
+++ b/src/defaults.js
@@ -62,5 +62,6 @@ export default {
     checkedRowStatus: true,
     dynamicRowHeight: false,
     pasteFromClipboard: false,
-    showTotalRow: false
+    showTotalRow: false,
+    direction: 'ltr'
 };
diff --git a/src/style.js b/src/style.js
index 92fe2e6..97a397c 100644
--- a/src/style.js
+++ b/src/style.js
@@ -48,12 +48,15 @@ export default class Style {
             this._settingHeaderPosition = true;
 
             requestAnimationFrame(() => {
-                const scrollLeft = e.target.scrollLeft;
+                const { scrollLeft, scrollWidth, clientWidth } = e.target;
+
+                let left = this.options.direction === 'rtl' ? scrollWidth - clientWidth - scrollLeft : -scrollLeft;
+
                 $.style(this.header, {
-                    transform: `translateX(-${scrollLeft}px)`
+                    transform: `translateX(${left}px)`
                 });
                 $.style(this.footer, {
-                    transform: `translateX(-${scrollLeft}px)`
+                    transform: `translateX(${left}px)`
                 });
                 this._settingHeaderPosition = false;
             });