Compensate for scrollbarWidth in lastColumn

dist/frappe-datatable.cjs.js

@@ -187,6 +187,27 @@ $.scrollTop = function scrollTop(element, pixels) {
     });
 };
 
+$.scrollbarWidth = function scrollbarWidth() {
+    // Create the measurement node
+    const scrollDiv = document.createElement('div');
+    $.style(scrollDiv, {
+        width: '100px',
+        height: '100px',
+        overflow: 'scroll',
+        position: 'absolute',
+        top: '-9999px'
+    });
+    document.body.appendChild(scrollDiv);
+
+    // Get the scrollbar width
+    const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+
+    // Delete the DIV
+    document.body.removeChild(scrollDiv);
+
+    return scrollbarWidth;
+};
+
 /**
  * Checks if `value` is the
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
@@ -723,20 +744,6 @@ function makeDataAttributeString(props) {
         .trim();
 }
 
-function getDefault(a, b) {
-    return a !== undefined ? a : b;
-}
-
-
-
-
-
-
-
-
-
-
-
 function copyTextToClipboard(text) {
     // https://stackoverflow.com/a/30810322/5353542
     var textArea = document.createElement('textarea');
@@ -800,19 +807,25 @@ let throttle$1 = throttle_1;
 
 let debounce$2 = debounce_1;
 
-function promisify(fn, context = null) {
+function nextTick(fn, context = null) {
     return (...args) => {
         return new Promise(resolve => {
-            setTimeout(() => {
+            const execute = () => {
                 const out = fn.apply(context, args);
                 resolve(out);
-            }, 0);
+            };
+
+            if (window.setImmediate) {
+                setImmediate(execute);
+            } else if (window.requestAnimationFrame) {
+                requestAnimationFrame(execute);
+            } else {
+                setTimeout(execute);
+            }
         });
     };
 }
 
-
-
 function linkProperties(target, source, properties) {
     const props = properties.reduce((acc, prop) => {
         acc[prop] = {
@@ -847,10 +860,10 @@ function ensureArray(val) {
 class DataManager {
     constructor(options) {
         this.options = options;
-        this.sortRows = promisify(this.sortRows, this);
+        this.sortRows = nextTick(this.sortRows, this);
-        this.switchColumn = promisify(this.switchColumn, this);
+        this.switchColumn = nextTick(this.switchColumn, this);
-        this.removeColumn = promisify(this.removeColumn, this);
+        this.removeColumn = nextTick(this.removeColumn, this);
-        this.filterRows = promisify(this.filterRows, this);
+        this.filterRows = nextTick(this.filterRows, this);
     }
 
     init(data, columns) {
@@ -1345,6 +1358,12 @@ class DataManager {
 
     getColumn(colIndex) {
         colIndex = +colIndex;
+
+        if (colIndex < 0) {
+            // negative indexes
+            colIndex = this.columns.length + colIndex;
+        }
+
         return this.columns.find(col => col.colIndex === colIndex);
     }
 
@@ -1665,9 +1684,8 @@ class ColumnManager {
             const $cell = span.closest('.data-table-cell');
             let {
                 colIndex,
-                sortOrder
+                sortOrder = 'none'
             } = $.data($cell);
-            sortOrder = getDefault(sortOrder, 'none');
             const col = this.getColumn(colIndex);
 
             if (col && col.sortable === false) {
@@ -1807,18 +1825,16 @@ class ColumnManager {
         return this.datamanager.getColumns();
     }
 
-    setColumnWidth(colIndex) {
+    setColumnWidth(colIndex, width) {
         colIndex = +colIndex;
         this._columnWidthMap = this._columnWidthMap || [];
 
-        const {
+        let columnWidth = width || this.getColumn(colIndex).width;
-            width
-        } = this.getColumn(colIndex);
 
         let index = this._columnWidthMap[colIndex];
         const selector = `[data-col-index="${colIndex}"] .content, [data-col-index="${colIndex}"] .edit-cell`;
         const styles = {
-            width: width + 'px'
+            width: columnWidth + 'px'
         };
 
         index = this.style.setStyle(selector, styles, index);
@@ -2621,7 +2637,7 @@ class RowManager {
         ]);
 
         this.bindEvents();
-        this.refreshRows = promisify(this.refreshRows, this);
+        this.refreshRows = nextTick(this.refreshRows, this);
     }
 
     get datamanager() {
@@ -2896,7 +2912,7 @@ class BodyRenderer {
         this.cellmanager = instance.cellmanager;
         this.bodyScrollable = instance.bodyScrollable;
         this.log = instance.log;
-        this.appendRemainingData = promisify(this.appendRemainingData, this);
+        this.appendRemainingData = nextTick(this.appendRemainingData, this);
     }
 
     render() {
@@ -3017,6 +3033,7 @@ class Style {
             $.on(window, 'resize', throttle$1(() => {
                 this.distributeRemainingWidth();
                 this.refreshColumnWidth();
+                this.compensateScrollbarWidth();
                 this.setBodyStyle();
             }, 300));
         }
@@ -3058,9 +3075,10 @@ class Style {
         this.setupMinWidth();
         this.setupNaturalColumnWidth();
         this.setupColumnWidth();
-
         this.distributeRemainingWidth();
         this.setColumnStyle();
+        this.compensateScrollbarWidth();
+
         this.setDefaultCellHeight();
         this.setBodyStyle();
     }
@@ -3173,6 +3191,13 @@ class Style {
         }
     }
 
+    compensateScrollbarWidth() {
+        const scrollbarWidth = $.scrollbarWidth();
+        const lastCol = this.datamanager.getColumn(-1);
+        const width = lastCol.width - scrollbarWidth;
+        this.columnmanager.setColumnWidth(lastCol.colIndex, width);
+    }
+
     distributeRemainingWidth() {
         if (this.options.layout !== 'fluid') return;
 
@@ -3580,7 +3605,7 @@ var name = "frappe-datatable";
 var version = "0.0.2";
 var description = "A modern datatable library for the web";
 var main = "dist/frappe-datatable.cjs.js";
-var scripts = {"start":"npm run dev","build":"rollup -c","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"};
+var scripts = {"start":"yarn run dev","build":"rollup -c","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"};
 var devDependencies = {"chai":"3.5.0","cssnano":"^3.10.0","deepmerge":"^2.0.1","eslint":"3.19.0","eslint-loader":"1.7.1","mocha":"3.3.0","postcss-cssnext":"^3.1.0","postcss-nested":"^3.0.0","precss":"^3.1.0","rollup-plugin-commonjs":"^8.3.0","rollup-plugin-json":"^2.3.0","rollup-plugin-node-resolve":"^3.0.3","rollup-plugin-postcss":"^1.2.8","rollup-plugin-uglify":"^3.0.0"};
 var repository = {"type":"git","url":"https://github.com/frappe/datatable.git"};
 var keywords = ["datatable","data","grid","table"];

dist/frappe-datatable.js

@@ -186,6 +186,27 @@ $.scrollTop = function scrollTop(element, pixels) {
     });
 };
 
+$.scrollbarWidth = function scrollbarWidth() {
+    // Create the measurement node
+    const scrollDiv = document.createElement('div');
+    $.style(scrollDiv, {
+        width: '100px',
+        height: '100px',
+        overflow: 'scroll',
+        position: 'absolute',
+        top: '-9999px'
+    });
+    document.body.appendChild(scrollDiv);
+
+    // Get the scrollbar width
+    const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+
+    // Delete the DIV
+    document.body.removeChild(scrollDiv);
+
+    return scrollbarWidth;
+};
+
 /**
  * Checks if `value` is the
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
@@ -722,20 +743,6 @@ function makeDataAttributeString(props) {
         .trim();
 }
 
-function getDefault(a, b) {
-    return a !== undefined ? a : b;
-}
-
-
-
-
-
-
-
-
-
-
-
 function copyTextToClipboard(text) {
     // https://stackoverflow.com/a/30810322/5353542
     var textArea = document.createElement('textarea');
@@ -799,19 +806,25 @@ let throttle$1 = throttle_1;
 
 let debounce$2 = debounce_1;
 
-function promisify(fn, context = null) {
+function nextTick(fn, context = null) {
     return (...args) => {
         return new Promise(resolve => {
-            setTimeout(() => {
+            const execute = () => {
                 const out = fn.apply(context, args);
                 resolve(out);
-            }, 0);
+            };
+
+            if (window.setImmediate) {
+                setImmediate(execute);
+            } else if (window.requestAnimationFrame) {
+                requestAnimationFrame(execute);
+            } else {
+                setTimeout(execute);
+            }
         });
     };
 }
 
-
-
 function linkProperties(target, source, properties) {
     const props = properties.reduce((acc, prop) => {
         acc[prop] = {
@@ -846,10 +859,10 @@ function ensureArray(val) {
 class DataManager {
     constructor(options) {
         this.options = options;
-        this.sortRows = promisify(this.sortRows, this);
+        this.sortRows = nextTick(this.sortRows, this);
-        this.switchColumn = promisify(this.switchColumn, this);
+        this.switchColumn = nextTick(this.switchColumn, this);
-        this.removeColumn = promisify(this.removeColumn, this);
+        this.removeColumn = nextTick(this.removeColumn, this);
-        this.filterRows = promisify(this.filterRows, this);
+        this.filterRows = nextTick(this.filterRows, this);
     }
 
     init(data, columns) {
@@ -1344,6 +1357,12 @@ class DataManager {
 
     getColumn(colIndex) {
         colIndex = +colIndex;
+
+        if (colIndex < 0) {
+            // negative indexes
+            colIndex = this.columns.length + colIndex;
+        }
+
         return this.columns.find(col => col.colIndex === colIndex);
     }
 
@@ -1664,9 +1683,8 @@ class ColumnManager {
             const $cell = span.closest('.data-table-cell');
             let {
                 colIndex,
-                sortOrder
+                sortOrder = 'none'
             } = $.data($cell);
-            sortOrder = getDefault(sortOrder, 'none');
             const col = this.getColumn(colIndex);
 
             if (col && col.sortable === false) {
@@ -1806,18 +1824,16 @@ class ColumnManager {
         return this.datamanager.getColumns();
     }
 
-    setColumnWidth(colIndex) {
+    setColumnWidth(colIndex, width) {
         colIndex = +colIndex;
         this._columnWidthMap = this._columnWidthMap || [];
 
-        const {
+        let columnWidth = width || this.getColumn(colIndex).width;
-            width
-        } = this.getColumn(colIndex);
 
         let index = this._columnWidthMap[colIndex];
         const selector = `[data-col-index="${colIndex}"] .content, [data-col-index="${colIndex}"] .edit-cell`;
         const styles = {
-            width: width + 'px'
+            width: columnWidth + 'px'
         };
 
         index = this.style.setStyle(selector, styles, index);
@@ -2620,7 +2636,7 @@ class RowManager {
         ]);
 
         this.bindEvents();
-        this.refreshRows = promisify(this.refreshRows, this);
+        this.refreshRows = nextTick(this.refreshRows, this);
     }
 
     get datamanager() {
@@ -2895,7 +2911,7 @@ class BodyRenderer {
         this.cellmanager = instance.cellmanager;
         this.bodyScrollable = instance.bodyScrollable;
         this.log = instance.log;
-        this.appendRemainingData = promisify(this.appendRemainingData, this);
+        this.appendRemainingData = nextTick(this.appendRemainingData, this);
     }
 
     render() {
@@ -3016,6 +3032,7 @@ class Style {
             $.on(window, 'resize', throttle$1(() => {
                 this.distributeRemainingWidth();
                 this.refreshColumnWidth();
+                this.compensateScrollbarWidth();
                 this.setBodyStyle();
             }, 300));
         }
@@ -3057,9 +3074,10 @@ class Style {
         this.setupMinWidth();
         this.setupNaturalColumnWidth();
         this.setupColumnWidth();
-
         this.distributeRemainingWidth();
         this.setColumnStyle();
+        this.compensateScrollbarWidth();
+
         this.setDefaultCellHeight();
         this.setBodyStyle();
     }
@@ -3172,6 +3190,13 @@ class Style {
         }
     }
 
+    compensateScrollbarWidth() {
+        const scrollbarWidth = $.scrollbarWidth();
+        const lastCol = this.datamanager.getColumn(-1);
+        const width = lastCol.width - scrollbarWidth;
+        this.columnmanager.setColumnWidth(lastCol.colIndex, width);
+    }
+
     distributeRemainingWidth() {
         if (this.options.layout !== 'fluid') return;
 
@@ -3579,7 +3604,7 @@ var name = "frappe-datatable";
 var version = "0.0.2";
 var description = "A modern datatable library for the web";
 var main = "dist/frappe-datatable.cjs.js";
-var scripts = {"start":"npm run dev","build":"rollup -c","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"};
+var scripts = {"start":"yarn run dev","build":"rollup -c","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"};
 var devDependencies = {"chai":"3.5.0","cssnano":"^3.10.0","deepmerge":"^2.0.1","eslint":"3.19.0","eslint-loader":"1.7.1","mocha":"3.3.0","postcss-cssnext":"^3.1.0","postcss-nested":"^3.0.0","precss":"^3.1.0","rollup-plugin-commonjs":"^8.3.0","rollup-plugin-json":"^2.3.0","rollup-plugin-node-resolve":"^3.0.3","rollup-plugin-postcss":"^1.2.8","rollup-plugin-uglify":"^3.0.0"};
 var repository = {"type":"git","url":"https://github.com/frappe/datatable.git"};
 var keywords = ["datatable","data","grid","table"];

docs/assets/frappe-datatable.js

@@ -186,6 +186,27 @@ $.scrollTop = function scrollTop(element, pixels) {
     });
 };
 
+$.scrollbarWidth = function scrollbarWidth() {
+    // Create the measurement node
+    const scrollDiv = document.createElement('div');
+    $.style(scrollDiv, {
+        width: '100px',
+        height: '100px',
+        overflow: 'scroll',
+        position: 'absolute',
+        top: '-9999px'
+    });
+    document.body.appendChild(scrollDiv);
+
+    // Get the scrollbar width
+    const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+
+    // Delete the DIV
+    document.body.removeChild(scrollDiv);
+
+    return scrollbarWidth;
+};
+
 /**
  * Checks if `value` is the
  * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
@@ -722,20 +743,6 @@ function makeDataAttributeString(props) {
         .trim();
 }
 
-function getDefault(a, b) {
-    return a !== undefined ? a : b;
-}
-
-
-
-
-
-
-
-
-
-
-
 function copyTextToClipboard(text) {
     // https://stackoverflow.com/a/30810322/5353542
     var textArea = document.createElement('textarea');
@@ -799,19 +806,25 @@ let throttle$1 = throttle_1;
 
 let debounce$2 = debounce_1;
 
-function promisify(fn, context = null) {
+function nextTick(fn, context = null) {
     return (...args) => {
         return new Promise(resolve => {
-            setTimeout(() => {
+            const execute = () => {
                 const out = fn.apply(context, args);
                 resolve(out);
-            }, 0);
+            };
+
+            if (window.setImmediate) {
+                setImmediate(execute);
+            } else if (window.requestAnimationFrame) {
+                requestAnimationFrame(execute);
+            } else {
+                setTimeout(execute);
+            }
         });
     };
 }
 
-
-
 function linkProperties(target, source, properties) {
     const props = properties.reduce((acc, prop) => {
         acc[prop] = {
@@ -846,10 +859,10 @@ function ensureArray(val) {
 class DataManager {
     constructor(options) {
         this.options = options;
-        this.sortRows = promisify(this.sortRows, this);
+        this.sortRows = nextTick(this.sortRows, this);
-        this.switchColumn = promisify(this.switchColumn, this);
+        this.switchColumn = nextTick(this.switchColumn, this);
-        this.removeColumn = promisify(this.removeColumn, this);
+        this.removeColumn = nextTick(this.removeColumn, this);
-        this.filterRows = promisify(this.filterRows, this);
+        this.filterRows = nextTick(this.filterRows, this);
     }
 
     init(data, columns) {
@@ -1344,6 +1357,12 @@ class DataManager {
 
     getColumn(colIndex) {
         colIndex = +colIndex;
+
+        if (colIndex < 0) {
+            // negative indexes
+            colIndex = this.columns.length + colIndex;
+        }
+
         return this.columns.find(col => col.colIndex === colIndex);
     }
 
@@ -1664,9 +1683,8 @@ class ColumnManager {
             const $cell = span.closest('.data-table-cell');
             let {
                 colIndex,
-                sortOrder
+                sortOrder = 'none'
             } = $.data($cell);
-            sortOrder = getDefault(sortOrder, 'none');
             const col = this.getColumn(colIndex);
 
             if (col && col.sortable === false) {
@@ -1806,18 +1824,16 @@ class ColumnManager {
         return this.datamanager.getColumns();
     }
 
-    setColumnWidth(colIndex) {
+    setColumnWidth(colIndex, width) {
         colIndex = +colIndex;
         this._columnWidthMap = this._columnWidthMap || [];
 
-        const {
+        let columnWidth = width || this.getColumn(colIndex).width;
-            width
-        } = this.getColumn(colIndex);
 
         let index = this._columnWidthMap[colIndex];
         const selector = `[data-col-index="${colIndex}"] .content, [data-col-index="${colIndex}"] .edit-cell`;
         const styles = {
-            width: width + 'px'
+            width: columnWidth + 'px'
         };
 
         index = this.style.setStyle(selector, styles, index);
@@ -2620,7 +2636,7 @@ class RowManager {
         ]);
 
         this.bindEvents();
-        this.refreshRows = promisify(this.refreshRows, this);
+        this.refreshRows = nextTick(this.refreshRows, this);
     }
 
     get datamanager() {
@@ -2895,7 +2911,7 @@ class BodyRenderer {
         this.cellmanager = instance.cellmanager;
         this.bodyScrollable = instance.bodyScrollable;
         this.log = instance.log;
-        this.appendRemainingData = promisify(this.appendRemainingData, this);
+        this.appendRemainingData = nextTick(this.appendRemainingData, this);
     }
 
     render() {
@@ -3016,6 +3032,7 @@ class Style {
             $.on(window, 'resize', throttle$1(() => {
                 this.distributeRemainingWidth();
                 this.refreshColumnWidth();
+                this.compensateScrollbarWidth();
                 this.setBodyStyle();
             }, 300));
         }
@@ -3057,9 +3074,10 @@ class Style {
         this.setupMinWidth();
         this.setupNaturalColumnWidth();
         this.setupColumnWidth();
-
         this.distributeRemainingWidth();
         this.setColumnStyle();
+        this.compensateScrollbarWidth();
+
         this.setDefaultCellHeight();
         this.setBodyStyle();
     }
@@ -3172,6 +3190,13 @@ class Style {
         }
     }
 
+    compensateScrollbarWidth() {
+        const scrollbarWidth = $.scrollbarWidth();
+        const lastCol = this.datamanager.getColumn(-1);
+        const width = lastCol.width - scrollbarWidth;
+        this.columnmanager.setColumnWidth(lastCol.colIndex, width);
+    }
+
     distributeRemainingWidth() {
         if (this.options.layout !== 'fluid') return;
 
@@ -3579,7 +3604,7 @@ var name = "frappe-datatable";
 var version = "0.0.2";
 var description = "A modern datatable library for the web";
 var main = "dist/frappe-datatable.cjs.js";
-var scripts = {"start":"npm run dev","build":"rollup -c","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"};
+var scripts = {"start":"yarn run dev","build":"rollup -c","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"};
 var devDependencies = {"chai":"3.5.0","cssnano":"^3.10.0","deepmerge":"^2.0.1","eslint":"3.19.0","eslint-loader":"1.7.1","mocha":"3.3.0","postcss-cssnext":"^3.1.0","postcss-nested":"^3.0.0","precss":"^3.1.0","rollup-plugin-commonjs":"^8.3.0","rollup-plugin-json":"^2.3.0","rollup-plugin-node-resolve":"^3.0.3","rollup-plugin-postcss":"^1.2.8","rollup-plugin-uglify":"^3.0.0"};
 var repository = {"type":"git","url":"https://github.com/frappe/datatable.git"};
 var keywords = ["datatable","data","grid","table"];

package.json

@@ -4,7 +4,7 @@
   "description": "A modern datatable library for the web",
   "main": "dist/frappe-datatable.cjs.js",
   "scripts": {
-    "start": "npm run dev",
+    "start": "yarn run dev",
     "build": "rollup -c",
     "dev": "rollup -c -w",
     "test": "mocha --compilers js:babel-core/register --colors ./test/*.spec.js",

src/columnmanager.js

@@ -1,7 +1,6 @@
 import $ from './dom';
 import Sortable from 'sortablejs';
 import {
-    getDefault,
     linkProperties,
     debounce
 } from './utils';
@@ -223,9 +222,8 @@ export default class ColumnManager {
             const $cell = span.closest('.data-table-cell');
             let {
                 colIndex,
-                sortOrder
+                sortOrder = 'none'
             } = $.data($cell);
-            sortOrder = getDefault(sortOrder, 'none');
             const col = this.getColumn(colIndex);
 
             if (col && col.sortable === false) {
@@ -365,18 +363,16 @@ export default class ColumnManager {
         return this.datamanager.getColumns();
     }
 
-    setColumnWidth(colIndex) {
+    setColumnWidth(colIndex, width) {
         colIndex = +colIndex;
         this._columnWidthMap = this._columnWidthMap || [];
 
-        const {
+        let columnWidth = width || this.getColumn(colIndex).width;
-            width
-        } = this.getColumn(colIndex);
 
         let index = this._columnWidthMap[colIndex];
         const selector = `[data-col-index="${colIndex}"] .content, [data-col-index="${colIndex}"] .edit-cell`;
         const styles = {
-            width: width + 'px'
+            width: columnWidth + 'px'
         };
 
         index = this.style.setStyle(selector, styles, index);

src/dom.js

@@ -179,3 +179,24 @@ $.scrollTop = function scrollTop(element, pixels) {
         element.scrollTop = pixels;
     });
 };
+
+$.scrollbarWidth = function scrollbarWidth() {
+    // Create the measurement node
+    const scrollDiv = document.createElement('div');
+    $.style(scrollDiv, {
+        width: '100px',
+        height: '100px',
+        overflow: 'scroll',
+        position: 'absolute',
+        top: '-9999px'
+    });
+    document.body.appendChild(scrollDiv);
+
+    // Get the scrollbar width
+    const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+
+    // Delete the DIV
+    document.body.removeChild(scrollDiv);
+
+    return scrollbarWidth;
+};

src/style.js

@@ -31,6 +31,7 @@ export default class Style {
             $.on(window, 'resize', throttle(() => {
                 this.distributeRemainingWidth();
                 this.refreshColumnWidth();
+                this.compensateScrollbarWidth();
                 this.setBodyStyle();
             }, 300));
         }
@@ -72,9 +73,10 @@ export default class Style {
         this.setupMinWidth();
         this.setupNaturalColumnWidth();
         this.setupColumnWidth();
-
         this.distributeRemainingWidth();
         this.setColumnStyle();
+        this.compensateScrollbarWidth();
+
         this.setDefaultCellHeight();
         this.setBodyStyle();
     }
@@ -187,6 +189,13 @@ export default class Style {
         }
     }
 
+    compensateScrollbarWidth() {
+        const scrollbarWidth = $.scrollbarWidth();
+        const lastCol = this.datamanager.getColumn(-1);
+        const width = lastCol.width - scrollbarWidth;
+        this.columnmanager.setColumnWidth(lastCol.colIndex, width);
+    }
+
     distributeRemainingWidth() {
         if (this.options.layout !== 'fluid') return;