Fixed #881 - The scroll bar is not moving correctly on the TurboTable…

… with resizeMode="expand"
primefaces · May 9, 2019 · b4fa281 · b4fa281
1 parent 27b469c
commit b4fa281
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 36 deletions.
diff --git a/src/components/datatable/DataTable.js b/src/components/datatable/DataTable.js
@@ -396,15 +396,7 @@ export class DataTable extends Component {
 
             if (this.props.columnResizeMode === 'expand' && this.tableWidthState) {
                 if (this.props.scrollable) {
-                    let scrollableBodyTable = DomHandler.findSingle(this.container, '.p-datatable-scrollable-body-table');
-                    let scrollableHeaderTable = DomHandler.findSingle(this.container, '.p-datatable-scrollable-header-table');
-                    let scrollableFooterTable = DomHandler.findSingle(this.container, '.p-datatable-scrollable-footer-table');
-                    scrollableBodyTable.style.width = this.tableWidthState;
-                    scrollableHeaderTable.style.width = this.tableWidthState;
-
-                    if (scrollableFooterTable) {
-                        scrollableFooterTable.style.width = this.tableWidthState;
-                    }
+                    this.setScrollableItemsWidthOnExpandResize(null, this.tableWidthState, 0);
                 }
                 else {
                     this.tableViewChild.nativeElement.style.width = this.tableWidthState;
@@ -696,20 +688,7 @@ export class DataTable extends Component {
             }
             else if(this.props.columnResizeMode === 'expand') {
                 if (this.props.scrollable) {
-                    let scrollableView = this.findParentScrollableView(this.resizeColumn);
-                    let scrollableBodyTable = DomHandler.findSingle(scrollableView, 'table.p-datatable-scrollable-body-table');
-                    let scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table.p-datatable-scrollable-header-table');
-                    let scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table.p-datatable-scrollable-footer-table');
-                    scrollableBodyTable.style.width = scrollableBodyTable.offsetWidth + delta + 'px';
-                    scrollableHeaderTable.style.width = scrollableHeaderTable.offsetWidth + delta + 'px';
-                    if(scrollableFooterTable) {
-                        scrollableFooterTable.style.width = scrollableHeaderTable.offsetWidth + delta + 'px';
-                    }
-                    let resizeColumnIndex = DomHandler.index(this.resizeColumn);
-
-                    this.resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, null);
-                    this.resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, null);
-                    this.resizeColGroup(scrollableFooterTable, resizeColumnIndex, newColumnWidth, null);
+                    this.setScrollableItemsWidthOnExpandResize(this.resizeColumn, newColumnWidth, delta);
                 }
                 else {
                     this.table.style.width = this.table.offsetWidth + delta + 'px';
@@ -738,6 +717,39 @@ export class DataTable extends Component {
         this.unbindColumnResizeEvents();
     }
 
+    setScrollableItemsWidthOnExpandResize(column, newColumnWidth, delta) {
+        let scrollableView = column ? this.findParentScrollableView(column) : this.container;
+        let scrollableBody = DomHandler.findSingle(scrollableView, '.p-datatable-scrollable-body');
+        let scrollableHeader = DomHandler.findSingle(scrollableView, '.p-datatable-scrollable-header');
+        let scrollableFooter = DomHandler.findSingle(scrollableView, '.p-datatable-scrollable-footer');
+        let scrollableBodyTable = DomHandler.findSingle(scrollableBody, 'table.p-datatable-scrollable-body-table');
+        let scrollableHeaderTable = DomHandler.findSingle(scrollableHeader, 'table.p-datatable-scrollable-header-table');
+        let scrollableFooterTable = DomHandler.findSingle(scrollableFooter, 'table.p-datatable-scrollable-footer-table');
+
+        const scrollableBodyTableWidth = column ? scrollableBodyTable.offsetWidth + delta : newColumnWidth;
+        const scrollableHeaderTableWidth = column ? scrollableHeaderTable.offsetWidth + delta : newColumnWidth;
+        const isContainerInViewport = this.container.offsetWidth >= scrollableBodyTableWidth;
+
+        let setWidth = (container, table, width, isContainerInViewport) => {
+            if (container && table) {
+                container.style.width = isContainerInViewport ? width + DomHandler.calculateScrollbarWidth(scrollableBody) + 'px' : 'auto'
+                table.style.width = width + 'px';
+            }
+        };
+
+        setWidth(scrollableBody, scrollableBodyTable, scrollableBodyTableWidth, isContainerInViewport);
+        setWidth(scrollableHeader, scrollableHeaderTable, scrollableHeaderTableWidth, isContainerInViewport);
+        setWidth(scrollableFooter, scrollableFooterTable, scrollableHeaderTableWidth, isContainerInViewport);
+
+        if (column) {
+            let resizeColumnIndex = DomHandler.index(column);
+
+            this.resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, null);
+            this.resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, null);
+            this.resizeColGroup(scrollableFooterTable, resizeColumnIndex, newColumnWidth, null);
+        }
+    }
+
     findParentScrollableView(column) {
         if (column) {
             let parent = column.parentElement;

diff --git a/src/components/utils/DomHandler.js b/src/components/utils/DomHandler.js
@@ -154,7 +154,10 @@ export default class DomHandler {
     }
 
     static findSingle(element, selector) {
-        return element.querySelector(selector);
+        if (element) {
+            return element.querySelector(selector);
+        }
+        return null;
     }
 
     static getHeight(el) {
@@ -365,20 +368,26 @@ export default class DomHandler {
         }
     }
 
-    static calculateScrollbarWidth() {
-        if(this.calculatedScrollbarWidth != null)
-            return this.calculatedScrollbarWidth;
-
-        let scrollDiv = document.createElement("div");
-        scrollDiv.className = "p-scrollbar-measure";
-        document.body.appendChild(scrollDiv);
+    static calculateScrollbarWidth(el) {
+        if (el) {
+            let style = getComputedStyle(el);
+            return (el.offsetWidth - el.clientWidth - parseFloat(style.borderLeftWidth) - parseFloat(style.borderRightWidth));
+        }
+        else {
+            if(this.calculatedScrollbarWidth != null)
+                return this.calculatedScrollbarWidth;
+
+            let scrollDiv = document.createElement("div");
+            scrollDiv.className = "p-scrollbar-measure";
+            document.body.appendChild(scrollDiv);
 
-        let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
-        document.body.removeChild(scrollDiv);
+            let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+            document.body.removeChild(scrollDiv);
 
-        this.calculatedScrollbarWidth = scrollbarWidth;
-
-        return scrollbarWidth;
+            this.calculatedScrollbarWidth = scrollbarWidth;
+
+            return scrollbarWidth;
+        }
     }
 
     static getBrowser() {