From d8c6ab597cf5fe933fb8f7358ebec68a30eba214 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 17 May 2021 15:57:40 +0300
Subject: [PATCH] Scroll+Resize support for TreeTable

---
 src/components/datatable/DataTable.vue | 18 -----------
 src/components/treetable/TreeTable.vue | 44 ++++++++++++++++++++------
 2 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index fa9c1daee..1e88f360c 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -1103,24 +1103,6 @@ export default {
                 }
             }
         },
-        resizeColGroup(table, resizeColumnIndex, newColumnWidth, nextColumnWidth) {
-            if(table) {
-                let colGroup = table.children[0].nodeName === 'COLGROUP' ? table.children[0] : null;
-
-                if(colGroup) {
-                    let col = colGroup.children[resizeColumnIndex];
-                    let nextCol = col.nextElementSibling;
-                    col.style.width = newColumnWidth + 'px';
-
-                    if (nextCol && nextColumnWidth) {
-                        nextCol.style.width = nextColumnWidth + 'px';
-                    }
-                }
-                else {
-                    throw new Error("Scrollable tables require a colgroup to support resizable columns");
-                }
-            }
-        },
         bindColumnResizeEvents() {
             if (!this.documentColumnResizeListener) {
                 this.documentColumnResizeListener = document.addEventListener('mousemove', () => {
diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index 887ce5735..f07e7b424 100755
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -668,26 +668,35 @@ export default {
             this.$refs.resizeHelper.style.display = 'block';
         },
         onColumnResizeEnd() {
-            let delta = this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
+ let delta = this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
             let columnWidth = this.resizeColumnElement.offsetWidth;
             let newColumnWidth = columnWidth + delta;
             let minWidth = this.resizeColumnElement.style.minWidth||15;
 
-            if(columnWidth + delta > parseInt(minWidth, 10)) {
-                if(this.columnResizeMode === 'fit') {
+            if (columnWidth + delta > parseInt(minWidth, 10)) {
+                if (this.columnResizeMode === 'fit') {
                     let nextColumn = this.resizeColumnElement.nextElementSibling;
                     let nextColumnWidth = nextColumn.offsetWidth - delta;
 
-                    if(newColumnWidth > 15 && nextColumnWidth > 15) {
-                        this.resizeColumnElement.style.width = newColumnWidth + 'px';
-                        if(nextColumn) {
-                            nextColumn.style.width = nextColumnWidth + 'px';
+                    if (newColumnWidth > 15 && nextColumnWidth > 15) {
+                        if (!this.scrollable) {
+                            this.resizeColumnElement.style.width = newColumnWidth + 'px';
+                            if(nextColumn) {
+                                nextColumn.style.width = nextColumnWidth + 'px';
+                            }
+                        }
+                        else {
+                            this.resizeTableCells(newColumnWidth, nextColumnWidth);
                         }
                     }
                 }
-                else if(this.columnResizeMode === 'expand') {
+                else if (this.columnResizeMode === 'expand') {
                     this.$refs.table.style.width = this.$refs.table.offsetWidth + delta + 'px';
-                    this.resizeColumnElement.style.width = newColumnWidth + 'px';
+
+                    if (!this.scrollable) 
+                        this.resizeColumnElement.style.width = newColumnWidth + 'px';
+                    else
+                        this.resizeTableCells(newColumnWidth);
                 }
 
                 this.$emit('column-resize-end', {
@@ -702,6 +711,23 @@ export default {
 
             this.unbindColumnResizeEvents();
         },
+        resizeTableCells(newColumnWidth, nextColumnWidth) {
+            let colIndex = DomHandler.index(this.resizeColumnElement);
+            let children = this.$refs.table.children;
+            for (let child of children) {
+                for (let row of child.children) {
+                    let resizeCell = row.children[colIndex];
+                    resizeCell.style.flex = '0 0 ' + newColumnWidth + 'px';
+
+                    if (this.columnResizeMode === 'fit') {
+                        let nextCell = resizeCell.nextElementSibling;
+                        if (nextCell) {
+                            nextCell.style.flex = '0 0 ' + nextColumnWidth + 'px';
+                        }
+                    }
+                }
+            }
+        },
         bindColumnResizeEvents() {
             if (!this.documentColumnResizeListener) {
                 this.documentColumnResizeListener = document.addEventListener('mousemove', () => {