fix: column resizing in rtl direction

frappe · Jan 17, 2022 · 95a2399 · 95a2399
1 parent 4549a51
commit 95a2399
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -189,6 +189,7 @@ <h1>Frappé DataTable</h1>
 					dynamicRowHeight: true,
 					treeView: treeView,
 					showTotalRow: true,
+					// direction: 'rtl',
 					// language: 'myLang',
 					// translations: {
 					// 	myLang: {

diff --git a/src/columnmanager.js b/src/columnmanager.js
@@ -174,7 +174,11 @@ export default class ColumnManager {
 
         const onMouseMove = (e) => {
             if (!isDragging) return;
-            const finalWidth = startWidth + (e.pageX - startX);
+            let delta = e.pageX - startX;
+            if (this.options.direction === 'rtl') {
+                delta = -1 * delta;
+            }
+            const finalWidth = startWidth + delta;
             const {
                 colIndex
             } = $.data($resizingCell);

diff --git a/src/style.css b/src/style.css
@@ -164,6 +164,11 @@
     }
 }
 
+.datatable[dir=rtl] .dt-cell__resize-handle {
+    right: unset;
+    left: -3px;
+}
+
 .icon-open, .icon-close {
     width: 16px;
     height: 16px;