Scroll+Resize support for TreeTable

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', () => {

src/components/treetable/TreeTable.vue

@@ -679,15 +679,24 @@ export default {
                     let nextColumnWidth = nextColumn.offsetWidth - delta;
 
                     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') {
                     this.$refs.table.style.width = this.$refs.table.offsetWidth + delta + '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', () => {