feat: Add support for RTL

frappe · Apr 26, 2019 · e299f0d · e299f0d
1 parent 67f9717
commit e299f0d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git 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
@@ -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
@@ -48,12 +48,17 @@ 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;
             });