@danielgindi/dgtable.js 2.0.0

package/dist/lib.umd.js

@@ -0,0 +1,4365 @@
+/*!
+ * @danielgindi/dgtable.js 2.0.0
+ * git://github.com/danielgindi/dgtable.js.git
+ */
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('@danielgindi/dom-utils/lib/ScrollHelper.js'), require('@danielgindi/dom-utils/lib/Css.js'), require('@danielgindi/dom-utils/lib/DomCompat.js'), require('@danielgindi/virtual-list-helper'), require('@danielgindi/dom-utils/lib/DomEventsSink.js')) :
+    typeof define === 'function' && define.amd ? define(['@danielgindi/dom-utils/lib/ScrollHelper.js', '@danielgindi/dom-utils/lib/Css.js', '@danielgindi/dom-utils/lib/DomCompat.js', '@danielgindi/virtual-list-helper', '@danielgindi/dom-utils/lib/DomEventsSink.js'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DGTable = factory(global.domUtilsScrollHelper, global.domUtilsCss, global.domUtilsDomCompat, global.VirtualListHelper, global.domUtilsDomEventsSink));
+})(this, (function (ScrollHelper_js, Css_js, DomCompat_js, VirtualListHelper, DomEventsSink) { 'use strict';
+
+    const find = function find(array, predicate) {
+      for (let i = 0, len = array.length; i >= 0 && i < len; i += 1) {
+        if (predicate(array[i], i, array))
+        return array[i];
+      }
+    };
+
+    const htmlEncode = function htmlEncode(text) {
+      return text.replace(/&/g, "&amp;").
+      replace(/</g, "&lt;").
+      replace(/>/g, "&gt;").
+      replace(/'/g, "&#39;").
+      replace(/"/g, "&quot;").
+      replace(/\n/g, '<br />');
+    };
+
+    // Define class RowCollection
+    function RowCollection() {
+
+      // Instantiate an Array. Seems like the `.length = ` of an inherited Array does not work well.
+      // I will not use the IFRAME solution either in fear of memory leaks, and we're supporting large datasets...
+      let collection = [];
+
+      // Synthetically set the 'prototype'
+      Object.assign(collection, RowCollection.prototype);
+
+      // Call initializer
+      collection.initialize.apply(collection, arguments);
+
+      return collection;
+    }
+
+    // Inherit Array
+    RowCollection.prototype = [];
+
+    RowCollection.prototype.initialize = function (options) {
+
+      options = options || {};
+
+      /** @field {string} sortColumn */
+      this.sortColumn = options.sortColumn == null ? [] : options.sortColumn;
+    };
+
+    /**
+     * @param {Object|Object[]} rows - row or array of rows to add to this collection
+     * @param {number?} at - position to insert rows at
+     */
+    RowCollection.prototype.add = function (rows, at) {
+      let isArray = 'splice' in rows && 'length' in rows,i,len;
+      if (isArray) {
+        if (typeof at === 'number') {
+          for (i = 0, len = rows.length; i < len; i++) {
+            this.splice(at++, 0, rows[i]);
+          }
+        } else {
+          for (i = 0, len = rows.length; i < len; i++) {
+            this.push(rows[i]);
+          }
+        }
+      } else {
+        if (typeof at === 'number') {
+          this.splice(at, 0, rows);
+        } else {
+          this.push(rows);
+        }
+      }
+    };
+
+    /**
+     * @param {Object|Object[]=} rows Row or array of rows to add to this collection
+     */
+    RowCollection.prototype.reset = function (rows) {
+      this.length = 0;
+      if (rows) {
+        this.add(rows);
+      }
+    };
+
+    /**
+     * @param {Function} filterFunc - Filtering function
+     * @param {Object|null?} args - Options to pass to the function
+     * @returns {RowCollection} success result
+     */
+    RowCollection.prototype.filteredCollection = function (filterFunc, args) {
+      if (filterFunc && args) {
+        let rows = new RowCollection({
+          sortColumn: this.sortColumn,
+          onComparatorRequired: this.onComparatorRequired,
+          customSortingProvider: this.customSortingProvider
+        });
+
+        for (let i = 0, len = this.length, row; i < len; i++) {
+          row = this[i];
+          if (filterFunc(row, args)) {
+            row['__i'] = i;
+            rows.push(row);
+          }
+        }
+        return rows;
+      } else {
+        return null;
+      }
+    };
+
+    /**
+     * @type {function(columnName: string, descending: boolean, defaultComparator: function(a,b):number)|null|undefined}
+     */
+    RowCollection.prototype.onComparatorRequired = null;
+    /**
+     * @type {function(data: any[], sort: function(any[]):any[]):any[]|null|undefined}
+     */
+    RowCollection.prototype.customSortingProvider = null;
+
+    let nativeSort = RowCollection.prototype.sort;
+
+    function getDefaultComparator(column, descending) {
+      let columnName = column.column;
+      let comparePath = column.comparePath || columnName;
+      if (typeof comparePath === 'string') {
+        comparePath = comparePath.split('.');
+      }
+      let pathLength = comparePath.length,
+        hasPath = pathLength > 1,
+        i;
+
+      let lessVal = descending ? 1 : -1,moreVal = descending ? -1 : 1;
+      return function (leftRow, rightRow) {
+        let leftVal = leftRow[comparePath[0]],
+          rightVal = rightRow[comparePath[0]];
+        if (hasPath) {
+          for (i = 1; i < pathLength; i++) {
+            leftVal = leftVal && leftVal[comparePath[i]];
+            rightVal = rightVal && rightVal[comparePath[i]];
+          }
+        }
+        if (leftVal === rightVal) return 0;
+        if (leftVal == null) return lessVal;
+        if (rightVal == null) return moreVal;
+        if (leftVal < rightVal) return lessVal;
+        return moreVal;
+      };
+    }
+
+    /**
+     * @returns {Function|undefined} the comparator that was used
+     */
+    RowCollection.prototype.sort = function () {
+      let comparator;
+
+      if (this.sortColumn.length) {
+        let comparators = [];
+
+        for (let i = 0; i < this.sortColumn.length; i++) {
+          comparator = null;
+          const defaultComparator = getDefaultComparator(this.sortColumn[i], this.sortColumn[i].descending);
+          if (this.onComparatorRequired) {
+            comparator = this.onComparatorRequired(this.sortColumn[i].column, this.sortColumn[i].descending, defaultComparator);
+          }
+          if (!comparator) {
+            comparator = defaultComparator;
+          }
+          comparators.push(comparator.bind(this));
+        }
+
+        if (comparators.length === 1) {
+          comparator = comparators[0];
+        } else {
+          let len = comparators.length,
+            value;
+
+          comparator = function (leftRow, rightRow) {
+            for (let i = 0; i < len; i++) {
+              value = comparators[i](leftRow, rightRow);
+              if (value !== 0) {
+                return value;
+              }
+            }
+            return value;
+          };
+        }
+
+        const sorter = (data) => nativeSort.call(data, comparator);
+
+        if (this.customSortingProvider) {
+          let results = this.customSortingProvider(this, sorter);
+          if (results !== this) {
+            this.splice(0, this.length, ...results);
+          }
+        } else {
+          sorter(this);
+        }
+      }
+
+      return comparator;
+    };
+
+    // Define class RowCollection
+    function ColumnCollection() {
+
+      // Instantiate an Array. Seems like the `.length = ` of an inherited Array does not work well.
+      // I will not use the IFRAME solution either in fear of memory leaks, and we're supporting large datasets...
+      let collection = [];
+
+      // Synthetically set the 'prototype'
+      Object.assign(collection, ColumnCollection.prototype);
+
+      // Call initializer
+      collection.initialize.apply(collection, arguments);
+
+      return collection;
+    }
+
+    // Inherit Array
+    ColumnCollection.prototype = [];
+
+    ColumnCollection.prototype.initialize = function () {
+
+    };
+
+    /**
+     * Get the column by this name
+     * @param {string} column column name
+     * @returns {Object} the column object
+     */
+    ColumnCollection.prototype.get = function (column) {
+      for (let i = 0, len = this.length; i < len; i++) {
+        if (this[i].name === column) {
+          return this[i];
+        }
+      }
+      return null;
+    };
+
+    /**
+     * Get the index of the column by this name
+     * @param {string} column column name
+     * @returns {int} the index of this column
+     */
+    ColumnCollection.prototype.indexOf = function (column) {
+      for (let i = 0, len = this.length; i < len; i++) {
+        if (this[i].name === column) {
+          return i;
+        }
+      }
+      return -1;
+    };
+
+    /**
+     * Get the column by the specified order
+     * @param {number} order the column's order
+     * @returns {Object} the column object
+     */
+    ColumnCollection.prototype.getByOrder = function (order) {
+      for (let i = 0, len = this.length; i < len; i++) {
+        if (this[i].order === order) {
+          return this[i];
+        }
+      }
+      return null;
+    };
+
+    /**
+     * Normalize order
+     * @returns {ColumnCollection} self
+     */
+    ColumnCollection.prototype.normalizeOrder = function () {
+      let ordered = [],i;
+      for (i = 0; i < this.length; i++) {
+        ordered.push(this[i]);
+      }
+      ordered.sort(function (col1, col2) {return col1.order < col2.order ? -1 : col1.order > col2.order ? 1 : 0;});
+      for (i = 0; i < ordered.length; i++) {
+        ordered[i].order = i;
+      }
+      return this;
+    };
+
+    /**
+     * Get the array of columns, order by the order property
+     * @returns {Array<Object>} ordered array of columns
+     */
+    ColumnCollection.prototype.getColumns = function () {
+      let cols = [];
+      for (let i = 0, column; i < this.length; i++) {
+        column = this[i];
+        cols.push(column);
+      }
+      cols.sort((col1, col2) => col1.order < col2.order ? -1 : col1.order > col2.order ? 1 : 0);
+      return cols;
+    };
+
+    /**
+     * Get the array of visible columns, order by the order property
+     * @returns {Array<Object>} ordered array of visible columns
+     */
+    ColumnCollection.prototype.getVisibleColumns = function () {
+      let cols = [];
+      for (let i = 0, column; i < this.length; i++) {
+        column = this[i];
+        if (column.visible) {
+          cols.push(column);
+        }
+      }
+      cols.sort((col1, col2) => col1.order < col2.order ? -1 : col1.order > col2.order ? 1 : 0);
+      return cols;
+    };
+
+    /**
+     * @returns {int} maximum order currently in the array
+     */
+    ColumnCollection.prototype.getMaxOrder = function () {
+      let order = 0;
+      for (let i = 0, column; i < this.length; i++) {
+        column = this[i];
+        if (column.order > order) {
+          order = column.order;
+        }
+      }
+      return order;
+    };
+
+    /**
+     * Move a column to a new spot in the collection
+     * @param {Object} src the column to move
+     * @param {Object} dest the destination column
+     * @returns {ColumnCollection} self
+     */
+    ColumnCollection.prototype.moveColumn = function (src, dest) {
+      if (src && dest) {
+        let srcOrder = src.order,destOrder = dest.order,i,col;
+        if (srcOrder < destOrder) {
+          for (i = srcOrder + 1; i <= destOrder; i++) {
+            col = this.getByOrder(i);
+            col.order--;
+          }
+        } else {
+          for (i = srcOrder - 1; i >= destOrder; i--) {
+            col = this.getByOrder(i);
+            col.order++;
+          }
+        }
+        src.order = destOrder;
+      }
+      return this;
+    };
+
+    /* eslint-env browser */
+
+
+    // saveSelection/restoreSelection courtesy of Tim Down, with my improvements
+    // https://stackoverflow.com/questions/13949059/persisting-the-changes-of-range-objects-after-selection-in-html/13950376#13950376
+
+    function isChildOf(child, parent) {
+      while ((child = child.parentNode) && child !== parent);
+      return !!child;
+    }
+
+    class SelectionHelper {
+
+      static saveSelection(el) {
+        let range = window.getSelection().getRangeAt(0);
+
+        if (el !== range.commonAncestorContainer && !isChildOf(range.commonAncestorContainer, el))
+        return null;
+
+        let preSelectionRange = range.cloneRange();
+        preSelectionRange.selectNodeContents(el);
+        preSelectionRange.setEnd(range.startContainer, range.startOffset);
+        let start = preSelectionRange.toString().length;
+
+        return {
+          start: start,
+          end: start + range.toString().length
+        };
+      }
+
+      static restoreSelection(el, savedSel) {
+        let charIndex = 0;
+        let nodeStack = [el],node,foundStart = false,stop = false;
+        let range = document.createRange();
+        range.setStart(el, 0);
+        range.collapse(true);
+
+        while (!stop && (node = nodeStack.pop())) {
+          if (node.nodeType === 3) {
+            let nextCharIndex = charIndex + node.length;
+            if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
+              range.setStart(node, savedSel.start - charIndex);
+              foundStart = true;
+            }
+            if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
+              range.setEnd(node, savedSel.end - charIndex);
+              stop = true;
+            }
+            charIndex = nextCharIndex;
+          } else {
+            let i = node.childNodes.length;
+            while (i--) {
+              nodeStack.push(node.childNodes[i]);
+            }
+          }
+        }
+
+        let sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+      }
+    }
+
+    function ByColumnFilter(row, args) {
+
+      let column = args.column;
+      let keyword = args.keyword == null ? '' : args.keyword.toString();
+
+      if (!keyword || !column) return true;
+
+      let actualVal = row[column];
+      if (actualVal == null) {
+        return false;
+      }
+
+      actualVal = actualVal.toString();
+
+      if (!args.caseSensitive) {
+        actualVal = actualVal.toLowerCase();
+        keyword = keyword.toLowerCase();
+      }
+
+      return actualVal.indexOf(keyword) !== -1;
+    }
+
+    function mitt (n) {return { all: n = n || new Map(), on: function (t, e) {var i = n.get(t);i ? i.push(e) : n.set(t, [e]);}, off: function (t, e) {var i = n.get(t);i && (e ? i.splice(i.indexOf(e) >>> 0, 1) : n.set(t, []));}, emit: function (t, e) {var i = n.get(t);i && i.slice().map(function (n) {n(e);}), (i = n.get("*")) && i.slice().map(function (n) {n(t, e);});} };}
+
+    /* eslint-env browser */
+
+
+    const nativeIndexOf = Array.prototype.indexOf;
+
+    let createElement = document.createElement.bind(document);
+    const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+    const IsSafeSymbol = Symbol('safe');
+    const HoverInEventSymbol = Symbol('hover_in');
+    const HoverOutEventSymbol = Symbol('hover_out');
+    const RowClickEventSymbol = Symbol('row_click');
+    const PreviewCellSymbol = Symbol('preview_cell');
+    const OriginalCellSymbol = Symbol('cell');
+
+    function webkitRenderBugfix(el) {
+      // BUGFIX: WebKit has a bug where it does not relayout, and this affects us because scrollbars
+      //   are still calculated even though they are not there yet. This is the last resort.
+      let oldDisplay = el.style.display;
+      el.style.display = 'none';
+      //noinspection BadExpressionStatementJS
+      el.offsetHeight; // No need to store this anywhere, the reference is enough
+      el.style.display = oldDisplay;
+      return el;
+    }
+
+    function relativizeElement(el) {
+      if (!['relative', 'absolute', 'fixed'].includes(getComputedStyle(el).position)) {
+        el.style.position = 'relative';
+      }
+    }
+
+    const isInputElementEvent = (event) => /^(?:INPUT|TEXTAREA|BUTTON|SELECT)$/.test(event.target.tagName);
+
+    // noinspection JSUnusedGlobalSymbols
+    class DGTable {
+      /**
+       * @param {DGTable.Options?} options - initialization options
+       */
+      constructor(options) {
+        this._init(options);
+
+        /**
+         * @public
+         * @expose
+         * @type {string}
+         */
+        this.VERSION = DGTable.VERSION;
+      }
+
+      /**
+       * @param {DGTable.Options?} options - initialization options
+       */
+      _init(options) {
+        options = options || {};
+
+        /**
+         * @private
+         * @type {DGTable.Options}
+         * */
+        let o = this._o = {};
+
+        /**
+         * @private
+         * This is for encapsulating private data */
+        let p = this._p = {
+          eventsSink: new DomEventsSink(),
+          mitt: mitt(),
+          /** @type {boolean} */
+          tableSkeletonNeedsRendering: true
+        };
+
+        /**
+         * @public
+         * @expose
+         * */
+        this.el = options.el && options.el instanceof Element ? options.el : document.createElement('div');
+
+        if (this.el !== options.el) {
+          this.el.classList.add(options.className || 'dgtable-wrapper');
+        }
+
+        p.eventsSink.add(this.el, 'dragend.colresize', this._onEndDragColumnHeader.bind(this));
+
+        /**
+         * @private
+         * @field {boolean} virtualTable */
+        o.virtualTable = options.virtualTable === undefined ? true : !!options.virtualTable;
+
+        /**
+         * @private
+         * @field {number} estimatedRowHeight */
+        o.estimatedRowHeight = options.estimatedRowHeight || undefined;
+
+        /**
+         * @private
+         * @field {number} rowsBufferSize */
+        o.rowsBufferSize = options.rowsBufferSize || 3;
+
+        /**
+         * @private
+         * @field {number} minColumnWidth */
+        o.minColumnWidth = Math.max(options.minColumnWidth || 35, 0);
+
+        /**
+         * @private
+         * @field {number} resizeAreaWidth */
+        o.resizeAreaWidth = options.resizeAreaWidth || 8;
+
+        /**
+         * @private
+         * @field {boolean} resizableColumns */
+        o.resizableColumns = options.resizableColumns === undefined ? true : !!options.resizableColumns;
+
+        /**
+         * @private
+         * @field {boolean} movableColumns */
+        o.movableColumns = options.movableColumns === undefined ? true : !!options.movableColumns;
+
+        /**
+         * @private
+         * @field {number} sortableColumns */
+        o.sortableColumns = options.sortableColumns === undefined ? 1 : parseInt(options.sortableColumns, 10) || 1;
+
+        /**
+         * @private
+         * @field {boolean} adjustColumnWidthForSortArrow */
+        o.adjustColumnWidthForSortArrow = options.adjustColumnWidthForSortArrow === undefined ? true : !!options.adjustColumnWidthForSortArrow;
+
+        /**
+         * @private
+         * @field {boolean} convertColumnWidthsToRelative */
+        o.convertColumnWidthsToRelative = options.convertColumnWidthsToRelative === undefined ? false : !!options.convertColumnWidthsToRelative;
+
+        /**
+         * @private
+         * @field {boolean} autoFillTableWidth */
+        o.autoFillTableWidth = options.autoFillTableWidth === undefined ? false : !!options.autoFillTableWidth;
+
+        /**
+         * @private
+         * @field {boolean} allowCancelSort */
+        o.allowCancelSort = options.allowCancelSort === undefined ? true : !!options.allowCancelSort;
+
+        /**
+         * @private
+         * @field {string} cellClasses */
+        o.cellClasses = options.cellClasses === undefined ? '' : options.cellClasses;
+
+        /**
+         * @private
+         * @field {string} resizerClassName */
+        o.resizerClassName = options.resizerClassName === undefined ? 'dgtable-resize' : options.resizerClassName;
+
+        /**
+         * @private
+         * @field {string} tableClassName */
+        o.tableClassName = options.tableClassName === undefined ? 'dgtable' : options.tableClassName;
+
+        /**
+         * @private
+         * @field {boolean} allowCellPreview */
+        o.allowCellPreview = options.allowCellPreview === undefined ? true : options.allowCellPreview;
+
+        /**
+         * @private
+         * @field {boolean} allowHeaderCellPreview */
+        o.allowHeaderCellPreview = options.allowHeaderCellPreview === undefined ? true : options.allowHeaderCellPreview;
+
+        /**
+         * @private
+         * @field {string} cellPreviewClassName */
+        o.cellPreviewClassName = options.cellPreviewClassName === undefined ? 'dgtable-cell-preview' : options.cellPreviewClassName;
+
+        /**
+         * @private
+         * @field {boolean} cellPreviewAutoBackground */
+        o.cellPreviewAutoBackground = options.cellPreviewAutoBackground === undefined ? true : options.cellPreviewAutoBackground;
+
+        /**
+         * @private
+         * @field {function(columnName: string, descending: boolean, defaultComparator: function(a,b):number):(function(a,b):number)} onComparatorRequired */
+        o.onComparatorRequired = options.onComparatorRequired === undefined ? null : options.onComparatorRequired;
+        if (!o.onComparatorRequired && typeof options['comparatorCallback'] === 'function') {
+          o.onComparatorRequired = options['comparatorCallback'];
+        }
+
+        o.customSortingProvider = options.customSortingProvider === undefined ? null : options.customSortingProvider;
+
+        /**
+         * @private
+         * @field {boolean} width */
+        o.width = options.width === undefined ? DGTable.Width.NONE : options.width;
+
+        /**
+         * @private
+         * @field {boolean} relativeWidthGrowsToFillWidth */
+        o.relativeWidthGrowsToFillWidth = options.relativeWidthGrowsToFillWidth === undefined ? true : !!options.relativeWidthGrowsToFillWidth;
+
+        /**
+         * @private
+         * @field {boolean} relativeWidthShrinksToFillWidth */
+        o.relativeWidthShrinksToFillWidth = options.relativeWidthShrinksToFillWidth === undefined ? false : !!options.relativeWidthShrinksToFillWidth;
+
+        this.setCellFormatter(options.cellFormatter);
+        this.setHeaderCellFormatter(options.headerCellFormatter);
+        this.setFilter(options.filter);
+
+        /** @private
+         * @field {number} height */
+        o.height = options.height;
+
+        // Prepare columns
+        this.setColumns(options.columns || [], false);
+
+        // Set sorting columns
+        let sortColumns = [];
+
+        if (options.sortColumn) {
+
+          let tmpSortColumns = options.sortColumn;
+
+          if (tmpSortColumns && !Array.isArray(tmpSortColumns)) {
+            tmpSortColumns = [tmpSortColumns];
+          }
+
+          if (tmpSortColumns) {
+            for (let i = 0, len = tmpSortColumns.length; i < len; i++) {
+              let sortColumn = tmpSortColumns[i];
+              if (typeof sortColumn === 'string') {
+                sortColumn = { column: sortColumn, descending: false };
+              }
+              let col = p.columns.get(sortColumn.column);
+              if (!col) continue;
+
+              sortColumns.push({
+                column: sortColumn.column,
+                comparePath: col.comparePath || col.dataPath,
+                descending: sortColumn.descending
+              });
+            }
+          }
+        }
+
+        /** @field {RowCollection} _rows */
+        p.rows = new RowCollection({ sortColumn: sortColumns });
+        p.rows.onComparatorRequired = (column, descending, defaultComparator) => {
+          if (o.onComparatorRequired) {
+            return o.onComparatorRequired(column, descending, defaultComparator);
+          }
+        };
+        p.rows.customSortingProvider = (data, sort) => {
+          if (o.customSortingProvider) {
+            return o.customSortingProvider(data, sort);
+          } else {
+            return sort(data);
+          }
+        };
+
+        /** @private
+         * @field {RowCollection} _filteredRows */
+        p.filteredRows = null;
+
+        p.scrollbarWidth = 0;
+        p.lastVirtualScrollHeight = 0;
+
+        this._setupHovers();
+      }
+
+      _setupHovers() {
+        const p = this._p;
+
+        /*
+         Setup hover mechanism.
+         We need this to be high performance, as there may be MANY cells to call this on, on creation and destruction.
+         */
+
+        /**
+         * @param {MouseEvent} event
+         * @this {HTMLElement}
+         * */
+        let hoverMouseOverHandler = (event) => {
+          let cell = event.currentTarget;
+          let target = event.relatedTarget;
+          if (target === cell || cell.contains(target))
+          return;
+          if (cell[PreviewCellSymbol] && (
+          target === cell[PreviewCellSymbol] || cell[PreviewCellSymbol].contains(target)))
+          return;
+          this._cellMouseOverEvent(cell);
+        };
+
+        /**
+         * @param {MouseEvent} event
+         * @this {HTMLElement}
+         * */
+        let hoverMouseOutHandler = (event) => {
+          let cell = event.currentTarget[OriginalCellSymbol] || event.currentTarget;
+          let target = event.relatedTarget;
+          if (target === this || cell.contains(target))
+          return;
+          if (cell[PreviewCellSymbol] && (
+          target === cell[PreviewCellSymbol] || cell[PreviewCellSymbol].contains(target)))
+          return;
+          this._cellMouseOutEvent(cell);
+        };
+
+        /**
+         * @param {HTMLElement} el cell or header-cell
+         * */
+        p._bindCellHoverIn = (el) => {
+          if (!el[HoverInEventSymbol]) {
+            el.addEventListener('mouseover', el[HoverInEventSymbol] = hoverMouseOverHandler);
+          }
+        };
+
+        /**
+         * @param {HTMLElement} el cell or header-cell
+         * */
+        p._unbindCellHoverIn = (el) => {
+          if (el[HoverInEventSymbol]) {
+            el.removeEventListener('mouseover', el[HoverInEventSymbol]);
+            el[HoverInEventSymbol] = null;
+          }
+        };
+
+        /**
+         * @param {HTMLElement} el cell or header-cell
+         * @returns {DGTable} self
+         * */
+        p._bindCellHoverOut = (el) => {
+          if (!el[HoverOutEventSymbol]) {
+            el.addEventListener('mouseout', el[HoverOutEventSymbol] = hoverMouseOutHandler);
+          }
+        };
+
+        /**
+         * @param {HTMLElement} el cell or header-cell
+         * @returns {DGTable} self
+         * */
+        p._unbindCellHoverOut = (el) => {
+          if (el[HoverOutEventSymbol]) {
+            el.removeEventListener('mouseout', el[HoverOutEventSymbol]);
+            el[HoverOutEventSymbol] = null;
+          }
+        };
+      }
+
+      _setupVirtualTable() {
+        const p = this._p,o = this._o;
+
+        const tableClassName = o.tableClassName,
+          rowClassName = tableClassName + '-row',
+          altRowClassName = tableClassName + '-row-alt',
+          cellClassName = tableClassName + '-cell';
+
+        let visibleColumns = p.visibleColumns,
+          colCount = visibleColumns.length;
+
+        p.notifyRendererOfColumnsConfig = () => {
+          visibleColumns = p.visibleColumns;
+          colCount = visibleColumns.length;
+
+          for (let colIndex = 0, column; colIndex < colCount; colIndex++) {
+            column = visibleColumns[colIndex];
+            column._finalWidth = column.actualWidthConsideringScrollbarWidth || column.actualWidth;
+          }
+        };
+
+        p.virtualListHelper = new VirtualListHelper({
+          list: p.table,
+          itemsParent: p.tbody,
+          autoVirtualWrapperWidth: false,
+          virtual: o.virtualTable,
+          buffer: o.rowsBufferSize,
+          estimatedItemHeight: o.estimatedRowHeight ? o.estimatedRowHeight : p.virtualRowHeight || 40,
+          itemElementCreatorFn: () => {
+            return createElement('div');
+          },
+          onItemRender: (row, virtualIndex) => {
+            const rows = p.filteredRows || p.rows,
+              isDataFiltered = !!p.filteredRows,
+              allowCellPreview = o.allowCellPreview;
+
+            row.className = rowClassName;
+            if (virtualIndex % 2 === 1)
+            row.className += ' ' + altRowClassName;
+
+            let rowData = rows[virtualIndex];
+            let rowIndex = isDataFiltered ? rowData['__i'] : virtualIndex;
+
+            row['vIndex'] = virtualIndex;
+            row['index'] = rowIndex;
+
+            for (let colIndex = 0; colIndex < colCount; colIndex++) {
+              let column = visibleColumns[colIndex];
+              let cell = createElement('div');
+              cell['columnName'] = column.name;
+              cell.setAttribute('data-column', column.name);
+              cell.className = cellClassName;
+              cell.style.width = column._finalWidth + 'px';
+              if (column.cellClasses) cell.className += ' ' + column.cellClasses;
+              if (allowCellPreview) {
+                p._bindCellHoverIn(cell);
+              }
+
+              let cellInner = cell.appendChild(createElement('div'));
+              cellInner.innerHTML = this._getHtmlForCell(rowData, column);
+
+              row.appendChild(cell);
+            }
+
+            row.addEventListener('click', row[RowClickEventSymbol] = (event) => {
+              this.emit('rowclick', {
+                event: event,
+                filteredRowIndex: virtualIndex,
+                rowIndex: rowIndex,
+                rowEl: row,
+                rowData: rowData
+              });
+            });
+
+            this.emit('rowcreate', {
+              filteredRowIndex: virtualIndex,
+              rowIndex: rowIndex,
+              rowEl: row,
+              rowData: rowData
+            });
+          },
+
+          onItemUnrender: (row) => {
+            if (row[RowClickEventSymbol]) {
+              row.removeEventListener('click', row[RowClickEventSymbol]);
+            }
+
+            this._unbindCellEventsForRow(row);
+
+            this.emit('rowdestroy', row);
+          },
+
+          onScrollHeightChange: (height) => {
+            // only recalculate scrollbar width if height increased. we reset it in other situations.
+            if (height > p._lastVirtualScrollHeight && !p.scrollbarWidth) {
+              this._updateLastCellWidthFromScrollbar();
+            }
+
+            p._lastVirtualScrollHeight = height;
+          }
+        });
+
+        p.virtualListHelper.setCount((p.filteredRows ?? p.rows).length);
+
+        p.notifyRendererOfColumnsConfig();
+      }
+
+      trigger(eventName) {
+        const p = this._p;
+        if (!p) return;
+
+        let events = p.events;
+
+        if (hasOwnProperty.call(events, eventName)) {
+          let callbacks = events[eventName];
+          for (let i = 0; i < callbacks.length; i++) {
+            let item = callbacks[i];
+            if (item.once) {
+              callbacks.splice(i--, 1);
+            }
+            item.cb.apply(this, Array.prototype.slice.call(arguments, 1));
+          }
+        }
+
+        return this;
+      }
+
+      /**
+       * Register an event handler
+       * @param {(string|'*')?} event
+       * @param {function(any)} handler
+       * @returns {DGTable}
+       */
+      on(/**string|'*'*/event, /**Function?*/handler) {
+        this._p.mitt.on(event, handler);
+        return this;
+      }
+
+      /**
+       * Register a one time event handler
+       * @param {(string|'*')?} event
+       * @param {function(any)} handler
+       * @returns {DGTable}
+       */
+      once(/**string|'*'*/event, /**Function?*/handler) {
+        let wrapped = (value) => {
+          this._p.mitt.off(event, wrapped);
+          handler(value);
+        };
+        this._p.mitt.on(event, wrapped);
+        return this;
+      }
+
+      /**
+       * Remove an `handler` for `event`, all events for `event`, or all events completely.
+       * @param {(string|'*')?} event
+       * @param {function(any)} handler
+       * @returns {DGTable}
+       */
+      off(/**(string|'*')?*/event, /**Function?*/handler) {
+        if (!event && !event) {
+          this._p.mitt.all.clear();
+        } else {
+          this._p.mitt.off(event, handler);
+        }
+        return this;
+      }
+
+      /**
+       * Emit an event
+       * @param {string} event
+       * @param {any?} value
+       * @returns {DGTable}
+       */
+      emit(/**string|'*'*/event, /**any?*/value) {
+        this._p.mitt.emit(event, value);
+        return this;
+      }
+
+      /**
+       * Detect column width mode
+       * @private
+       * @param {Number|string} width
+       * @param {number} minWidth
+       * @returns {Object} parsed width
+       */
+      _parseColumnWidth(width, minWidth) {
+
+        let widthSize = Math.max(0, parseFloat(width)),
+          widthMode = ColumnWidthMode.AUTO; // Default
+
+        if (widthSize > 0) {
+          // Well, it's sure is not AUTO, as we have a value
+
+          if (width === widthSize + '%') {
+            // It's a percentage!
+
+            widthMode = ColumnWidthMode.RELATIVE;
+            widthSize /= 100;
+          } else if (widthSize > 0 && widthSize < 1) {
+            // It's a decimal value, as a relative value!
+
+            widthMode = ColumnWidthMode.RELATIVE;
+          } else {
+            // It's an absolute size!
+
+            if (widthSize < minWidth) {
+              widthSize = minWidth;
+            }
+            widthMode = ColumnWidthMode.ABSOLUTE;
+          }
+        }
+
+        return { width: widthSize, mode: widthMode };
+      }
+
+      /**
+       * @private
+       * @param {COLUMN_OPTIONS} columnData
+       */
+      _initColumnFromData(columnData) {
+
+        let parsedWidth = this._parseColumnWidth(columnData.width, columnData.ignoreMin ? 0 : this._o.minColumnWidth);
+
+        let col = {
+          name: columnData.name,
+          label: columnData.label === undefined ? columnData.name : columnData.label,
+          width: parsedWidth.width,
+          widthMode: parsedWidth.mode,
+          resizable: columnData.resizable === undefined ? true : columnData.resizable,
+          sortable: columnData.sortable === undefined ? true : columnData.sortable,
+          movable: columnData.movable === undefined ? true : columnData.movable,
+          visible: columnData.visible === undefined ? true : columnData.visible,
+          cellClasses: columnData.cellClasses === undefined ? this._o.cellClasses : columnData.cellClasses,
+          ignoreMin: columnData.ignoreMin === undefined ? false : !!columnData.ignoreMin
+        };
+
+        col.dataPath = columnData.dataPath === undefined ? col.name : columnData.dataPath;
+        col.comparePath = columnData.comparePath === undefined ? col.dataPath : columnData.comparePath;
+
+        if (typeof col.dataPath === 'string') {
+          col.dataPath = col.dataPath.split('.');
+        }
+        if (typeof col.comparePath === 'string') {
+          col.comparePath = col.comparePath.split('.');
+        }
+
+        return col;
+      }
+
+      /**
+       * Destroy, releasing all memory, events and DOM elements
+       * @public
+       * @expose
+       */
+      destroy() {
+        let p = this._p || {},
+          el = this.el;
+
+        if (this.__removed) {
+          return this;
+        }
+
+        if (p.resizer) {
+          p.resizer.remove();
+          p.resizer = null;
+        }
+
+        p.virtualListHelper?.destroy();
+        p.virtualListHelper = null;
+
+        // Using quotes for __super__ because Google Closure Compiler has a bug...
+
+        this._destroyHeaderCells();
+
+        p.table?.remove();
+        p.tbody?.remove();
+
+        if (p.workerListeners) {
+          for (let j = 0; j < p.workerListeners.length; j++) {
+            let worker = p.workerListeners[j];
+            worker.worker.removeEventListener('message', worker.listener, false);
+          }
+          p.workerListeners.length = 0;
+        }
+
+        p.rows.length = p.columns.length = 0;
+
+        if (p._deferredRender) {
+          clearTimeout(p._deferredRender);
+        }
+
+        // Cleanup
+        for (let prop in this) {
+          if (hasOwnProperty.call(this, prop)) {
+            this[prop] = null;
+          }
+        }
+
+        this.__removed = true;
+
+        if (el) {
+          el.remove();
+        }
+
+        return this;
+      }
+
+      // Backwards compatibility
+      close() {
+        this.destroy();
+      }
+
+      // Backwards compatibility
+      remove() {
+        this.destroy();
+      }
+
+      /**
+       * @private
+       * @returns {DGTable} self
+       */
+      _unbindCellEventsForTable() {
+        const p = this._p;
+
+        if (p.headerRow) {
+          for (let i = 0, rows = p.headerRow.childNodes, rowCount = rows.length; i < rowCount; i++) {
+            let rowToClean = rows[i];
+            for (let j = 0, cells = rowToClean.childNodes, cellCount = cells.length; j < cellCount; j++) {
+              p._unbindCellHoverIn(cells[j]);
+            }
+          }
+        }
+
+        return this;
+      }
+
+      /**
+       * @private
+       * @param {HTMLElement} rowToClean
+       * @returns {DGTable} self
+       */
+      _unbindCellEventsForRow(rowToClean) {
+        const p = this._p;
+        for (let i = 0, cells = rowToClean.childNodes, cellCount = cells.length; i < cellCount; i++) {
+          p._unbindCellHoverIn(cells[i]);
+        }
+        return this;
+      }
+
+      /**
+       * @public
+       * @expose
+       * @returns {DGTable} self
+       */
+      render() {
+        const o = this._o,p = this._p;
+
+        if (!this.el.offsetParent) {
+          if (!p._deferredRender) {
+            p._deferredRender = setTimeout(() => {
+              p._deferredRender = null;
+              if (!this.__removed && this.el.offsetParent) {
+                this.render();
+              }
+            });
+          }
+
+          return this;
+        }
+
+        if (p.tableSkeletonNeedsRendering === true) {
+          p.tableSkeletonNeedsRendering = false;
+
+          if (o.width === DGTable.Width.AUTO) {
+            // We need to do this to return to the specified widths instead. The arrows added to the column widths...
+            this._clearSortArrows();
+          }
+
+          let lastScrollTop = p.table && p.table.parentNode ? p.table.scrollTop : NaN,
+            lastScrollHorz = p.table && p.table.parentNode ? ScrollHelper_js.getScrollHorz(p.table) : NaN;
+
+          this._renderSkeletonBase().
+          _renderSkeletonBody().
+          tableWidthChanged(true, false) // Take this chance to calculate required column widths
+          ._renderSkeletonHeaderCells();
+
+          p.virtualListHelper.setCount((p.filteredRows ?? p.rows).length);
+
+          this._updateVirtualHeight();
+          this._updateLastCellWidthFromScrollbar(true);
+          this._updateTableWidth(true);
+
+          // Show sort arrows
+          for (let i = 0; i < p.rows.sortColumn.length; i++) {
+            this._showSortArrow(p.rows.sortColumn[i].column, p.rows.sortColumn[i].descending);
+          }
+          if (o.adjustColumnWidthForSortArrow && p.rows.sortColumn.length) {
+            this.tableWidthChanged(true);
+          } else if (!o.virtualTable) {
+            this.tableWidthChanged();
+          }
+
+          if (!isNaN(lastScrollTop))
+          p.table.scrollTop = lastScrollTop;
+
+          if (!isNaN(lastScrollHorz)) {
+            ScrollHelper_js.setScrollHorz(p.table, lastScrollHorz);
+            ScrollHelper_js.setScrollHorz(p.header, lastScrollHorz);
+          }
+
+          this.emit('renderskeleton');
+        }
+
+        p.virtualListHelper.render();
+
+        this.emit('render');
+        return this;
+      }
+
+      /**
+       * Forces a full render of the table
+       * @public
+       * @expose
+       * @param {boolean=true} render - Should render now?
+       * @returns {DGTable} self
+       */
+      clearAndRender(render) {
+        let p = this._p;
+
+        p.tableSkeletonNeedsRendering = true;
+        p.notifyRendererOfColumnsConfig?.();
+
+        if (render === undefined || render) {
+          this.render();
+        }
+
+        return this;
+      }
+
+      /**
+       * Calculate the size required for the table body width (which is the row's width)
+       * @private
+       * @returns {number} calculated width
+       */
+      _calculateTbodyWidth() {
+        const p = this._p;
+
+        let tableClassName = this._o.tableClassName,
+          rowClassName = tableClassName + '-row',
+          cellClassName = tableClassName + '-cell',
+          visibleColumns = p.visibleColumns,
+          colCount = visibleColumns.length;
+
+        const row = createElement('div');
+        row.className = rowClassName;
+        row.style.float = 'left';
+
+        let sumActualWidth = 0;
+
+        for (let colIndex = 0; colIndex < colCount; colIndex++) {
+          const column = visibleColumns[colIndex];
+          const cell = createElement('div');
+          cell.className = cellClassName;
+          cell.style.width = column.actualWidth + 'px';
+          if (column.cellClasses) cell.className += ' ' + column.cellClasses;
+          cell.appendChild(createElement('div'));
+          row.appendChild(cell);
+          sumActualWidth += column.actualWidth;
+        }
+
+        const thisWrapper = createElement('div');
+        thisWrapper.className = this.el.className;
+        Css_js.setCssProps(thisWrapper, {
+          'z-index': -1,
+          'position': 'absolute',
+          'left': '0',
+          'top': '-9999px',
+          'float': 'left',
+          'width': '1px',
+          'overflow': 'hidden'
+        });
+
+        const tableDiv = createElement('div');
+        tableDiv.className = tableClassName;
+        thisWrapper.appendChild(tableDiv);
+        const tableBodyDiv = createElement('div');
+        tableBodyDiv.className = tableClassName + '-body';
+        tableBodyDiv.style.width = sumActualWidth + 10000 + 'px';
+        tableDiv.appendChild(tableBodyDiv);
+        tableBodyDiv.appendChild(row);
+
+        document.body.appendChild(thisWrapper);
+
+        const fractionTest = createElement('div');
+        Css_js.setCssProps(fractionTest, {
+          border: '1.5px solid #000',
+          width: '0',
+          height: '0',
+          position: 'absolute',
+          left: '0',
+          top: '-9999px'
+        });
+        document.body.appendChild(fractionTest);
+        let fractionValue = parseFloat(getComputedStyle(fractionTest).borderWidth);
+        let hasFractions = Math.round(fractionValue) !== fractionValue;
+        fractionTest.remove();
+
+        let width = Css_js.getElementWidth(row, true, true, true);
+        width -= p.scrollbarWidth || 0;
+
+        if (hasFractions) {
+          width++;
+        }
+
+        thisWrapper.remove();
+        return width;
+      }
+
+      /**
+       * Sets the columns of the table
+       * @public
+       * @expose
+       * @param {COLUMN_OPTIONS[]} columns - Column definitions array
+       * @param {boolean=true} render - Should render now?
+       * @returns {DGTable} self
+       */
+      setColumns(columns, render) {
+        const p = this._p;
+
+        columns = columns || [];
+
+        let normalizedCols = new ColumnCollection();
+        for (let i = 0, order = 0; i < columns.length; i++) {
+
+          let columnData = columns[i];
+          let normalizedColumn = this._initColumnFromData(columnData);
+
+          if (columnData.order !== undefined) {
+            if (columnData.order > order) {
+              order = columnData.order + 1;
+            }
+            normalizedColumn.order = columnData.order;
+          } else {
+            normalizedColumn.order = order++;
+          }
+
+          normalizedCols.push(normalizedColumn);
+        }
+        normalizedCols.normalizeOrder();
+
+        p.columns = normalizedCols;
+        p.visibleColumns = normalizedCols.getVisibleColumns();
+
+        this._ensureVisibleColumns().clearAndRender(render);
+
+        return this;
+      }
+
+      /**
+       * Add a column to the table
+       * @public
+       * @expose
+       * @param {COLUMN_OPTIONS} columnData column properties
+       * @param {string|number} [before=-1] column name or order to be inserted before
+       * @param {boolean=true} render - Should render now?
+       * @returns {DGTable} self
+       */
+      addColumn(columnData, before, render) {
+        const p = this._p;
+        let columns = p.columns;
+
+        if (columnData && !columns.get(columnData.name)) {
+          let beforeColumn = null;
+          if (before !== undefined) {
+            beforeColumn = columns.get(before) || columns.getByOrder(before);
+          }
+
+          let column = this._initColumnFromData(columnData);
+          column.order = beforeColumn ? beforeColumn.order : columns.getMaxOrder() + 1;
+
+          for (let i = columns.getMaxOrder(), to = column.order; i >= to; i--) {
+            let col = columns.getByOrder(i);
+            if (col) {
+              col.order++;
+            }
+          }
+
+          columns.push(column);
+          columns.normalizeOrder();
+
+          p.visibleColumns = columns.getVisibleColumns();
+          this._ensureVisibleColumns().clearAndRender(render);
+
+          this.emit('addcolumn', column.name);
+        }
+        return this;
+      }
+
+      /**
+       * Remove a column from the table
+       * @public
+       * @expose
+       * @param {string} column column name
+       * @param {boolean=true} render - Should render now?
+       * @returns {DGTable} self
+       */
+      removeColumn(column, render) {
+        const p = this._p;
+        let columns = p.columns;
+
+        let colIdx = columns.indexOf(column);
+        if (colIdx > -1) {
+          columns.splice(colIdx, 1);
+          columns.normalizeOrder();
+
+          p.visibleColumns = columns.getVisibleColumns();
+          this._ensureVisibleColumns().clearAndRender(render);
+
+          this.emit('removecolumn', column);
+        }
+        return this;
+      }
+
+      /**
+       * Sets a new cell formatter.
+       * @public
+       * @expose
+       * @param {function(value: *, columnName: string, row: Object):string|null} [formatter=null] - The cell formatter. Should return an HTML.
+       * @returns {DGTable} self
+       */
+      setCellFormatter(formatter) {
+        if (!formatter) {
+          formatter = (val) => typeof val === 'string' ? htmlEncode(val) : val;
+          formatter[IsSafeSymbol] = true;
+        }
+
+        /**
+         * @private
+         * @field {Function} cellFormatter */
+        this._o.cellFormatter = formatter;
+
+        return this;
+      }
+
+      /**
+       * Sets a new header cell formatter.
+       * @public
+       * @expose
+       * @param {function(label: string, columnName: string):string|null} [formatter=null] - The cell formatter. Should return an HTML.
+       * @returns {DGTable} self
+       */
+      setHeaderCellFormatter(formatter) {
+        /**
+         * @private
+         * @field {Function} headerCellFormatter */
+        this._o.headerCellFormatter = formatter || function (val) {
+          return typeof val === 'string' ? htmlEncode(val) : val;
+        };
+
+        return this;
+      }
+
+      /**
+       * @public
+       * @expose
+       * @param {function(row:Object,args:Object):boolean|null} [filterFunc=null] - The filter function to work with filters. Default is a by-colum filter.
+       * @returns {DGTable} self
+       */
+      setFilter(filterFunc) {
+        /** @private
+         * @field {Function} filter */
+        this._o.filter = filterFunc;
+        return this;
+      }
+
+      /**
+       * @public
+       * @expose
+       * @param {Object|null} args - Options to pass to the filter function
+       * @returns {DGTable} self
+       */
+      filter(args) {
+        const p = this._p;
+
+        let filterFunc = this._o.filter || ByColumnFilter;
+
+        // Deprecated use of older by-column filter
+        if (typeof arguments[0] === 'string' && typeof arguments[1] === 'string') {
+          args = {
+            column: arguments[0],
+            keyword: arguments[1],
+            caseSensitive: arguments[2]
+          };
+        }
+
+        let hadFilter = !!p.filteredRows;
+        if (p.filteredRows) {
+          p.filteredRows = null; // Allow releasing array memory now
+        }
+
+        // Shallow-clone the args, as the filter function may want to modify it for keeping state
+        p.filterArgs = args == null ? null : typeof args === 'object' && !Array.isArray(args) ? Object.assign({}, args) : args;
+
+        if (p.filterArgs !== null) {
+          p.filteredRows = p.rows.filteredCollection(filterFunc, p.filterArgs);
+
+          if (hadFilter || p.filteredRows) {
+            this.clearAndRender();
+            this.emit('filter', args);
+          }
+        } else
+        {
+          p.filterArgs = null;
+          p.filteredRows = null;
+          this.clearAndRender();
+          this.emit('filterclear', {});
+        }
+
+        return this;
+      }
+
+      /**
+       * @public
+       * @expose
+       * @returns {DGTable} self
+       */
+      clearFilter() {
+        const p = this._p;
+
+        if (p.filteredRows) {
+          p.filterArgs = null;
+          p.filteredRows = null;
+          this.clearAndRender();
+          this.emit('filterclear', {});
+        }
+
+        return this;
+      }
+
+      /**
+       * @private
+       * @returns {DGTable} self
+       */
+      _refilter() {
+        const p = this._p;
+
+        if (p.filteredRows && p.filterArgs) {
+          let filterFunc = this._o.filter || ByColumnFilter;
+          p.filteredRows = p.rows.filteredCollection(filterFunc, p.filterArgs);
+        }
+        return this;
+      }
+
+      /**
+       * Set a new label to a column
+       * @public
+       * @expose
+       * @param {string} column Name of the column
+       * @param {string} label New label for the column
+       * @returns {DGTable} self
+       */
+      setColumnLabel(column, label) {
+        const p = this._p;
+
+        let col = p.columns.get(column);
+        if (col) {
+          col.label = label === undefined ? col.name : label;
+
+          if (col.element) {
+            for (let i = 0; i < col.element.firstChild.childNodes.length; i++) {
+              let node = col.element.firstChild.childNodes[i];
+              if (node.nodeType === 3) {
+                node.textContent = col.label;
+                break;
+              }
+            }
+          }
+        }
+        return this;
+      }
+
+      /**
+       * Move a column to a new position
+       * @public
+       * @expose
+       * @param {string|number} src Name or position of the column to be moved
+       * @param {string|number} dest Name of the column currently in the desired position, or the position itself
+       * @param {boolean} [visibleOnly=true] Should consider only visible columns and visible-relative indexes
+       * @returns {DGTable} self
+       */
+      moveColumn(src, dest) {let visibleOnly = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+        const o = this._o,p = this._p;
+
+        let columns = p.columns,
+          col,destCol;
+
+        let columnsArray = visibleOnly ? p.visibleColumns : columns.getColumns();
+
+        if (typeof src === 'string') {
+          col = columns.get(src);
+        } else if (typeof src === 'number') {
+          col = columnsArray[src];
+        }
+        if (typeof dest === 'string') {
+          destCol = columns.get(dest);
+        } else if (typeof dest === 'number') {
+          destCol = columnsArray[dest];
+        }
+
+        if (col && destCol && src !== dest) {
+          let srcOrder = col.order,destOrder = destCol.order;
+
+          let visibleColumns = columns.moveColumn(col, destCol).getVisibleColumns();
+
+          if (p.visibleColumns.length !== visibleColumns.length ||
+          p.visibleColumns.some((x, i) => x !== visibleColumns[i])) {
+
+            p.visibleColumns = visibleColumns;
+            this._ensureVisibleColumns();
+
+            if (o.virtualTable) {
+              this.clearAndRender();
+            } else {
+              const headerCells = DomCompat_js.scopedSelectorAll(p.headerRow, `>div.${o.tableClassName}-header-cell`);
+              let beforePos = srcOrder < destOrder ? destOrder + 1 : destOrder,
+                fromPos = srcOrder;
+              headerCells[0].parentNode.insertBefore(headerCells[fromPos], headerCells[beforePos]);
+
+              let srcWidth = p.visibleColumns[srcOrder];
+              srcWidth = (srcWidth.actualWidthConsideringScrollbarWidth || srcWidth.actualWidth) + 'px';
+              let destWidth = p.visibleColumns[destOrder];
+              destWidth = (destWidth.actualWidthConsideringScrollbarWidth || destWidth.actualWidth) + 'px';
+
+              let tbodyChildren = p.tbody.childNodes;
+              for (let i = 0, count = tbodyChildren.length; i < count; i++) {
+                let row = tbodyChildren[i];
+                if (row.nodeType !== 1) continue;
+                row.insertBefore(row.childNodes[fromPos], row.childNodes[beforePos]);
+                row.childNodes[destOrder].firstChild.style.width = destWidth;
+                row.childNodes[srcOrder].firstChild.style.width = srcWidth;
+              }
+            }
+          }
+
+          this.emit('movecolumn', { name: col.name, src: srcOrder, dest: destOrder });
+        }
+        return this;
+      }
+
+      /**
+       * Sort the table
+       * @public
+       * @expose
+       * @param {string?} column Name of the column to sort on (or null to remove sort arrow)
+       * @param {boolean=} descending Sort in descending order
+       * @param {boolean} [add=false] Should this sort be on top of the existing sort? (For multiple column sort)
+       * @returns {DGTable} self
+       */
+      sort(column, descending, add) {
+        const o = this._o,p = this._p;
+
+        let columns = p.columns,
+          col = columns.get(column);
+
+        let currentSort = p.rows.sortColumn;
+
+        if (col) {
+          if (add) {// Add the sort to current sort stack
+
+            for (let i = 0; i < currentSort.length; i++) {
+              if (currentSort[i].column === col.name) {
+                if (i < currentSort.length - 1) {
+                  currentSort.length = 0;
+                } else {
+                  descending = currentSort[currentSort.length - 1].descending;
+                  currentSort.splice(currentSort.length - 1, 1);
+                }
+                break;
+              }
+            }
+            if (o.sortableColumns > 0 /* allow manual sort when disabled */ && currentSort.length >= o.sortableColumns || currentSort.length >= p.visibleColumns.length) {
+              currentSort.length = 0;
+            }
+
+          } else {// Sort only by this column
+            currentSort.length = 0;
+          }
+
+          // Default to ascending
+          descending = descending === undefined ? false : descending;
+
+          // Set the required column in the front of the stack
+          currentSort.push({
+            column: col.name,
+            comparePath: col.comparePath || col.dataPath,
+            descending: !!descending
+          });
+        } else {
+          currentSort.length = 0;
+        }
+
+        this._clearSortArrows();
+
+        for (let i = 0; i < currentSort.length; i++) {
+          this._showSortArrow(currentSort[i].column, currentSort[i].descending);
+        }
+
+        if (o.adjustColumnWidthForSortArrow && !p.tableSkeletonNeedsRendering) {
+          this.tableWidthChanged(true);
+        }
+
+        p.rows.sortColumn = currentSort;
+
+        let comparator;
+        if (currentSort.length) {
+          comparator = p.rows.sort(!!p.filteredRows);
+          if (p.filteredRows) {
+            p.filteredRows.sort(!!p.filteredRows);
+          }
+        }
+
+        if (p.virtualListHelper)
+        p.virtualListHelper.invalidate().render();
+
+        // Build output for event, with option names that will survive compilers
+        let sorts = [];
+        for (let i = 0; i < currentSort.length; i++) {
+          sorts.push({ 'column': currentSort[i].column, 'descending': currentSort[i].descending });
+        }
+        this.emit('sort', { sorts: sorts, comparator: comparator });
+
+        return this;
+      }
+
+      /**
+       * Re-sort the table using current sort specifiers
+       * @public
+       * @expose
+       * @returns {DGTable} self
+       */
+      resort() {
+        const p = this._p;
+        let columns = p.columns;
+
+        let currentSort = p.rows.sortColumn;
+        if (currentSort.length) {
+
+          for (let i = 0; i < currentSort.length; i++) {
+            if (!columns.get(currentSort[i].column)) {
+              currentSort.splice(i--, 1);
+            }
+          }
+
+          let comparator;
+          p.rows.sortColumn = currentSort;
+          if (currentSort.length) {
+            comparator = p.rows.sort(!!p.filteredRows);
+            if (p.filteredRows) {
+              p.filteredRows.sort(!!p.filteredRows);
+            }
+          }
+
+          // Build output for event, with option names that will survive compilers
+          let sorts = [];
+          for (let i = 0; i < currentSort.length; i++) {
+            sorts.push({ 'column': currentSort[i].column, 'descending': currentSort[i].descending });
+          }
+          this.emit('sort', { sorts: sorts, resort: true, comparator: comparator });
+        }
+
+        return this;
+      }
+
+      /**
+       * Make sure there's at least one column visible
+       * @private
+       * @expose
+       * @returns {DGTable} self
+       */
+      _ensureVisibleColumns() {
+        const p = this._p;
+
+        if (p.visibleColumns.length === 0 && p.columns.length) {
+          p.columns[0].visible = true;
+          p.visibleColumns.push(p.columns[0]);
+          this.emit('showcolumn', p.columns[0].name);
+        }
+
+        return this;
+      }
+
+      /**
+       * Show or hide a column
+       * @public
+       * @expose
+       * @param {string} column Unique column name
+       * @param {boolean} visible New visibility mode for the column
+       * @returns {DGTable} self
+       */
+      setColumnVisible(column, visible) {
+        const p = this._p;
+
+        let col = p.columns.get(column);
+
+        //noinspection PointlessBooleanExpressionJS
+        visible = !!visible;
+
+        if (col && !!col.visible !== visible) {
+          col.visible = visible;
+          p.visibleColumns = p.columns.getVisibleColumns();
+          this.emit(visible ? 'showcolumn' : 'hidecolumn', column);
+          this._ensureVisibleColumns();
+          this.clearAndRender();
+        }
+        return this;
+      }
+
+      /**
+       * Get the visibility mode of a column
+       * @public
+       * @expose
+       * @returns {boolean} true if visible
+       */
+      isColumnVisible(column) {
+        const p = this._p;
+        let col = p.columns.get(column);
+        if (col) {
+          return col.visible;
+        }
+        return false;
+      }
+
+      /**
+       * Globally set the minimum column width
+       * @public
+       * @expose
+       * @param {number} minColumnWidth Minimum column width
+       * @returns {DGTable} self
+       */
+      setMinColumnWidth(minColumnWidth) {
+        let o = this._o;
+        minColumnWidth = Math.max(minColumnWidth, 0);
+        if (o.minColumnWidth !== minColumnWidth) {
+          o.minColumnWidth = minColumnWidth;
+          this.tableWidthChanged(true);
+        }
+        return this;
+      }
+
+      /**
+       * Get the current minimum column width
+       * @public
+       * @expose
+       * @returns {number} Minimum column width
+       */
+      getMinColumnWidth() {
+        return this._o.minColumnWidth;
+      }
+
+      /**
+       * Set the limit on concurrent columns sorted
+       * @public
+       * @expose
+       * @param {number} sortableColumns How many sortable columns to allow?
+       * @returns {DGTable} self
+       */
+      setSortableColumns(sortableColumns) {
+        const p = this._p,o = this._o;
+        if (o.sortableColumns !== sortableColumns) {
+          o.sortableColumns = sortableColumns;
+          if (p.table) {
+            const headerCells = DomCompat_js.scopedSelectorAll(p.headerRow, `>div.${o.tableClassName}-header-cell`);
+            for (let i = 0, len = headerCells.length; i < len; i++) {
+              const cell = headerCells[i];
+              cell.classList[o.sortableColumns > 0 && p.visibleColumns[i].sortable ? 'add' : 'remove']('sortable');
+            }
+          }
+        }
+        return this;
+      }
+
+      /**
+       * Get the limit on concurrent columns sorted
+       * @public
+       * @expose
+       * @returns {number} How many sortable columns are allowed?
+       */
+      getSortableColumns() {
+        return this._o.sortableColumns;
+      }
+
+      /**
+       * @public
+       * @expose
+       * @param {boolean?} movableColumns=true are the columns movable?
+       * @returns {DGTable} self
+       */
+      setMovableColumns(movableColumns) {
+        let o = this._o;
+        //noinspection PointlessBooleanExpressionJS
+        movableColumns = movableColumns === undefined ? true : !!movableColumns;
+        if (o.movableColumns !== movableColumns) {
+          o.movableColumns = movableColumns;
+        }
+        return this;
+      }
+
+      /**
+       * @public
+       * @expose
+       * @returns {boolean} are the columns movable?
+       */
+      getMovableColumns() {
+        return this._o.movableColumns;
+      }
+
+      /**
+       * @public
+       * @expose
+       * @param {boolean} resizableColumns=true are the columns resizable?
+       * @returns {DGTable} self
+       */
+      setResizableColumns(resizableColumns) {
+        let o = this._o;
+        //noinspection PointlessBooleanExpressionJS
+        resizableColumns = resizableColumns === undefined ? true : !!resizableColumns;
+        if (o.resizableColumns !== resizableColumns) {
+          o.resizableColumns = resizableColumns;
+        }
+        return this;
+      }
+
+      /**
+       * @public
+       * @expose
+       * @returns {boolean} are the columns resizable?
+       */
+      getResizableColumns() {
+        return this._o.resizableColumns;
+      }
+
+      /**
+       * Sets a functions that supplies comparators dynamically
+       * @public
+       * @expose
+       * @param {{function(columnName: string, descending: boolean, defaultComparator: {function(a:any,b:any):number}):{function(a:any,b:any):number}}|null|undefined} comparatorCallback a function that returns the comparator for a specific column
+       * @returns {DGTable} self
+       */
+      setOnComparatorRequired(comparatorCallback) {
+        let o = this._o;
+        if (o.onComparatorRequired !== comparatorCallback) {
+          o.onComparatorRequired = comparatorCallback;
+        }
+        return this;
+      }
+
+      // Backwards compatibility
+      setComparatorCallback(comparatorCallback) {
+        return this.setOnComparatorRequired(comparatorCallback);
+      }
+
+      /**
+       * sets custom sorting function for a data set
+       * @public
+       * @expose
+       * @param {{function(data: any[], sort: function(any[]):any[]):any[]}|null|undefined} customSortingProvider provides a custom sorting function (not the comparator, but a sort() alternative) for a data set
+       * @returns {DGTable} self
+       */
+      setCustomSortingProvider(customSortingProvider) {
+        let o = this._o;
+        if (o.customSortingProvider !== customSortingProvider) {
+          o.customSortingProvider = customSortingProvider;
+        }
+        return this;
+      }
+
+      /**
+       * Set a new width to a column
+       * @public
+       * @expose
+       * @param {string} column name of the column to resize
+       * @param {number|string} width new column as pixels, or relative size (0.5, 50%)
+       * @returns {DGTable} self
+       */
+      setColumnWidth(column, width) {
+
+        const p = this._p;
+
+        let col = p.columns.get(column);
+
+        let parsedWidth = this._parseColumnWidth(width, col.ignoreMin ? 0 : this._o.minColumnWidth);
+
+        if (col) {
+          let oldWidth = this._serializeColumnWidth(col);
+
+          col.width = parsedWidth.width;
+          col.widthMode = parsedWidth.mode;
+
+          let newWidth = this._serializeColumnWidth(col);
+
+          if (oldWidth !== newWidth) {
+            this.tableWidthChanged(true); // Calculate actual sizes
+          }
+
+          this.emit('columnwidth', { name: col.name, width: newWidth, oldWidth: oldWidth });
+        }
+        return this;
+      }
+
+      /**
+       * @public
+       * @expose
+       * @param {string} column name of the column
+       * @returns {string|null} the serialized width of the specified column, or null if column not found
+       */
+      getColumnWidth(column) {
+        const p = this._p;
+
+        let col = p.columns.get(column);
+        if (col) {
+          return this._serializeColumnWidth(col);
+        }
+        return null;
+      }
+
+      /**
+       * @public
+       * @expose
+       * @param {string} column name of the column
+       * @returns {SERIALIZED_COLUMN|null} configuration for all columns
+       */
+      getColumnConfig(column) {
+        const p = this._p;
+        let col = p.columns.get(column);
+        if (col) {
+          return {
+            'order': col.order,
+            'width': this._serializeColumnWidth(col),
+            'visible': col.visible,
+            'label': col.label
+          };
+        }
+        return null;
+      }
+
+      /**
+       * Returns a config object for the columns, to allow saving configurations for next time...
+       * @public
+       * @expose
+       * @returns {Object} configuration for all columns
+       */
+      getColumnsConfig() {
+        const p = this._p;
+
+        let config = {};
+        for (let i = 0; i < p.columns.length; i++) {
+          config[p.columns[i].name] = this.getColumnConfig(p.columns[i].name);
+        }
+        return config;
+      }
+
+      /**
+       * Returns an array of the currently sorted columns
+       * @public
+       * @expose
+       * @returns {Array.<SERIALIZED_COLUMN_SORT>} configuration for all columns
+       */
+      getSortedColumns() {
+        const p = this._p;
+
+        let sorted = [];
+        for (let i = 0; i < p.rows.sortColumn.length; i++) {
+          let sort = p.rows.sortColumn[i];
+          sorted.push({ column: sort.column, descending: sort.descending });
+        }
+        return sorted;
+      }
+
+      /**
+       * Returns the HTML string for a specific cell. Can be used externally for special cases (i.e. when setting a fresh HTML in the cell preview through the callback).
+       * @public
+       * @expose
+       * @param {number} rowIndex - index of the row
+       * @param {string} columnName - name of the column
+       * @returns {string|null} HTML string for the specified cell
+       */
+      getHtmlForRowCell(rowIndex, columnName) {
+        const p = this._p;
+
+        if (rowIndex < 0 || rowIndex > p.rows.length - 1) return null;
+        let column = p.columns.get(columnName);
+        if (!column) return null;
+        let rowData = p.rows[rowIndex];
+
+        return this._getHtmlForCell(rowData, column);
+      }
+
+      /**
+       * Returns the HTML string for a specific cell. Can be used externally for special cases (i.e. when setting a fresh HTML in the cell preview through the callback).
+       * @public
+       * @expose
+       * @param {Object} rowData - row data
+       * @param {Object} columnName - column data
+       * @returns {string|null} HTML string for the specified cell
+       */
+      getHtmlForRowDataCell(rowData, columnName) {
+        const p = this._p;
+
+        let column = p.columns.get(columnName);
+        if (!column) return null;
+
+        return this._getHtmlForCell(rowData, column);
+      }
+
+      /**
+       * Returns the HTML string for a specific cell. Can be used externally for special cases (i.e. when setting a fresh HTML in the cell preview through the callback).
+       * @private
+       * @expose
+       * @param {Object} rowData - row data
+       * @param {Object} column - column data
+       * @returns {string} HTML string for the specified cell
+       */
+      _getHtmlForCell(rowData, column) {
+        let dataPath = column.dataPath;
+        let colValue = rowData[dataPath[0]];
+        for (let dataPathIndex = 1; dataPathIndex < dataPath.length; dataPathIndex++) {
+          if (colValue == null) break;
+          colValue = colValue && colValue[dataPath[dataPathIndex]];
+        }
+
+        const formatter = this._o.cellFormatter;
+        let content;
+
+        if (formatter[IsSafeSymbol]) {
+          content = formatter(colValue, column.name, rowData);
+        } else {
+          try {
+            content = formatter(colValue, column.name, rowData);
+          } catch (err) {
+            content = '[ERROR]';
+            // eslint-disable-next-line no-console
+            console.error('Failed to generate content for cell ' + column.name, err);
+          }
+        }
+
+        if (content === undefined || content === null) {
+          content = '';
+        }
+
+        return content;
+      }
+
+      /**
+       * Returns the y pos of a row by index
+       * @public
+       * @expose
+       * @param {number} rowIndex - index of the row
+       * @returns {number|null} Y pos
+       */
+      getRowYPos(rowIndex) {
+        const p = this._p;
+
+        return p.virtualListHelper.getItemPosition(rowIndex) || null;
+      }
+
+      /**
+       * Returns the row data for a specific row
+       * @public
+       * @expose
+       * @param {number} row index of the row
+       * @returns {Object} Row data
+       */
+      getDataForRow(row) {
+        const p = this._p;
+
+        if (row < 0 || row > p.rows.length - 1) return null;
+        return p.rows[row];
+      }
+
+      /**
+       * Gets the number of rows
+       * @public
+       * @expose
+       * @returns {number} Row count
+       */
+      getRowCount() {
+        const p = this._p;
+        return p.rows ? p.rows.length : 0;
+      }
+
+      /**
+       * Returns the actual row index for specific row (out of the full data set, not filtered)
+       * @public
+       * @expose
+       * @param {Object} rowData - Row data to find
+       * @returns {number} Row index
+       */
+      getIndexForRow(rowData) {
+        const p = this._p;
+        return p.rows.indexOf(rowData);
+      }
+
+      /**
+       * Gets the number of filtered rows
+       * @public
+       * @expose
+       * @returns {number} Filtered row count
+       */
+      getFilteredRowCount() {
+        const p = this._p;
+        return (p.filteredRows || p.rows).length;
+      }
+
+      /**
+       * Returns the filtered row index for specific row
+       * @public
+       * @expose
+       * @param {Object} rowData - Row data to find
+       * @returns {number} Row index
+       */
+      getIndexForFilteredRow(rowData) {
+        const p = this._p;
+        return (p.filteredRows || p.rows).indexOf(rowData);
+      }
+
+      /**
+       * Returns the row data for a specific row
+       * @public
+       * @expose
+       * @param {number} row index of the filtered row
+       * @returns {Object} Row data
+       */
+      getDataForFilteredRow(row) {
+        const p = this._p;
+        if (row < 0 || row > (p.filteredRows || p.rows).length - 1) return null;
+        return (p.filteredRows || p.rows)[row];
+      }
+
+      /**
+       * Returns DOM element of the header row
+       * @public
+       * @expose
+       * @returns {Element} Row element
+       */
+      getHeaderRowElement() {
+        return this._p.headerRow;
+      }
+
+      /**
+       * @private
+       * @param {Element} el
+       * @returns {number} width
+       */
+      _horizontalPadding(el) {
+        const style = getComputedStyle(el);
+        return (parseFloat(style.paddingLeft) || 0) + (
+        parseFloat(style.paddingRight) || 0);
+      }
+
+      /**
+       * @private
+       * @param {Element} el
+       * @returns {number} width
+       */
+      _horizontalBorderWidth(el) {
+        const style = getComputedStyle(el);
+        return (parseFloat(style.borderLeftWidth) || 0) + (
+        parseFloat(style.borderRightWidth) || 0);
+      }
+
+      /**
+       * @private
+       * @returns {number} width
+       */
+      _calculateWidthAvailableForColumns() {
+        const o = this._o,p = this._p;
+
+        // Changing display mode briefly, to prevent taking in account the  parent's scrollbar width when we are the cause for it
+        let oldDisplay, lastScrollTop, lastScrollLeft;
+        if (p.table) {
+          lastScrollTop = p.table ? p.table.scrollTop : 0;
+          lastScrollLeft = p.table ? p.table.scrollLeft : 0;
+
+          if (o.virtualTable) {
+            oldDisplay = p.table.style.display;
+            p.table.style.display = 'none';
+          }
+        }
+
+        let detectedWidth = Css_js.getElementWidth(this.el);
+
+        if (p.table) {
+          if (o.virtualTable) {
+            p.table.style.display = oldDisplay;
+          }
+
+          p.table.scrollTop = lastScrollTop;
+          p.table.scrollLeft = lastScrollLeft;
+          p.header.scrollLeft = lastScrollLeft;
+        }
+
+        let tableClassName = o.tableClassName;
+
+        const thisWrapper = createElement('div');
+        thisWrapper.className = this.el.className;
+        Css_js.setCssProps(thisWrapper, {
+          'z-index': -1,
+          'position': 'absolute',
+          left: '0',
+          top: '-9999px'
+        });
+        let header = createElement('div');
+        header.className = `${tableClassName}-header`;
+        thisWrapper.appendChild(header);
+        let headerRow = createElement('div');
+        headerRow.className = `${tableClassName}-header-row`;
+        header.appendChild(headerRow);
+        for (let i = 0; i < p.visibleColumns.length; i++) {
+          const column = p.visibleColumns[i];
+          const cell = createElement('div');
+          cell.className = `${tableClassName}-header-cell ${column.cellClasses || ''}`;
+          cell['columnName'] = column.name;
+          cell.appendChild(createElement('div'));
+          headerRow.appendChild(cell);
+        }
+        document.body.appendChild(thisWrapper);
+
+        detectedWidth -= this._horizontalBorderWidth(headerRow);
+
+        let cells = DomCompat_js.scopedSelectorAll(headerRow, `>div.${tableClassName}-header-cell`);
+        for (const cell of cells) {
+          const cellStyle = getComputedStyle(cell);
+          let isBoxing = cellStyle.boxSizing === 'border-box';
+          if (!isBoxing) {
+            detectedWidth -=
+            (parseFloat(cellStyle.borderRightWidth) || 0) + (
+            parseFloat(cellStyle.borderLeftWidth) || 0) +
+            this._horizontalPadding(cell); // CELL's padding
+
+            const colName = cell['columnName'];
+            const column = p.columns.get(colName);
+            if (column)
+            detectedWidth -= column.arrowProposedWidth || 0;
+          }
+        }
+
+        thisWrapper.remove();
+
+        return Math.max(0, detectedWidth);
+      }
+
+      _getTextWidth(text) {
+        let tableClassName = this._o.tableClassName;
+
+        const tableWrapper = createElement('div');
+        tableWrapper.className = this.el.className;
+        const header = createElement('div');
+        header.className = tableClassName + '-header';
+        const headerRow = createElement('div');
+        headerRow.className = tableClassName + '-header-row';
+        const cell = createElement('div');
+        cell.className = tableClassName + '-header-cell';
+        const cellContent = createElement('div');
+        cellContent.textContent = text;
+
+        cell.appendChild(cellContent);
+        headerRow.appendChild(cell);
+        header.appendChild(headerRow);
+        tableWrapper.appendChild(header);
+        Css_js.setCssProps(tableWrapper, {
+          position: 'absolute',
+          top: '-9999px',
+          visibility: 'hidden'
+        });
+
+        document.body.appendChild(tableWrapper);
+
+        let width = Css_js.getElementWidth(cell);
+
+        tableWrapper.remove();
+
+        return width;
+      }
+
+      /**
+       * Notify the table that its width has changed
+       * @public
+       * @expose
+       * @param {boolean} [forceUpdate=false]
+       * @param {boolean} [renderColumns=true]
+       * @returns {DGTable} self
+       */
+      tableWidthChanged(forceUpdate, renderColumns) {
+
+        let o = this._o,
+          p = this._p,
+          detectedWidth = this._calculateWidthAvailableForColumns(),
+          sizeLeft = detectedWidth,
+          relatives = 0;
+
+        if (!p.table) return this;
+
+        renderColumns = renderColumns === undefined || renderColumns;
+
+        let tableWidthBeforeCalculations = 0;
+
+        if (!p.tbody) {
+          renderColumns = false;
+        }
+
+        if (renderColumns) {
+          tableWidthBeforeCalculations = parseFloat(p.tbody.style.minWidth) || 0;
+        }
+
+        if (sizeLeft !== p.lastDetectedWidth || forceUpdate) {
+          p.lastDetectedWidth = detectedWidth;
+
+          let absWidthTotal = 0,changedColumnIndexes = [],totalRelativePercentage = 0;
+
+          for (let i = 0; i < p.columns.length; i++) {
+            p.columns[i].actualWidthConsideringScrollbarWidth = null;
+          }
+
+          for (let i = 0; i < p.visibleColumns.length; i++) {
+            let col = p.visibleColumns[i];
+            if (col.widthMode === ColumnWidthMode.ABSOLUTE) {
+              let width = col.width;
+              width += col.arrowProposedWidth || 0; // Sort-arrow width
+              if (!col.ignoreMin && width < o.minColumnWidth) {
+                width = o.minColumnWidth;
+              }
+              sizeLeft -= width;
+              absWidthTotal += width;
+
+              // Update actualWidth
+              if (width !== col.actualWidth) {
+                col.actualWidth = width;
+                changedColumnIndexes.push(i);
+              }
+            } else if (col.widthMode === ColumnWidthMode.AUTO) {
+              let width = this._getTextWidth(col.label) + 20;
+              width += col.arrowProposedWidth || 0; // Sort-arrow width
+              if (!col.ignoreMin && width < o.minColumnWidth) {
+                width = o.minColumnWidth;
+              }
+              sizeLeft -= width;
+              absWidthTotal += width;
+
+              // Update actualWidth
+              if (width !== col.actualWidth) {
+                col.actualWidth = width;
+                if (!o.convertColumnWidthsToRelative) {
+                  changedColumnIndexes.push(i);
+                }
+              }
+            } else if (col.widthMode === ColumnWidthMode.RELATIVE) {
+              totalRelativePercentage += col.width;
+              relatives++;
+            }
+          }
+
+          // Normalize relative sizes if needed
+          if (o.convertColumnWidthsToRelative) {
+            for (let i = 0; i < p.visibleColumns.length; i++) {
+              let col = p.visibleColumns[i];
+              if (col.widthMode === ColumnWidthMode.AUTO) {
+                col.widthMode = ColumnWidthMode.RELATIVE;
+                sizeLeft += col.actualWidth;
+                col.width = col.actualWidth / absWidthTotal;
+                totalRelativePercentage += col.width;
+                relatives++;
+              }
+            }
+          }
+
+          // Normalize relative sizes if needed
+          if (relatives && (totalRelativePercentage < 1 && o.relativeWidthGrowsToFillWidth ||
+          totalRelativePercentage > 1 && o.relativeWidthShrinksToFillWidth)) {
+            for (let i = 0; i < p.visibleColumns.length; i++) {
+              let col = p.visibleColumns[i];
+              if (col.widthMode === ColumnWidthMode.RELATIVE) {
+                col.width /= totalRelativePercentage;
+              }
+            }
+          }
+
+          let sizeLeftForRelative = Math.max(0, sizeLeft); // Use this as the space to take the relative widths out of
+          if (sizeLeftForRelative === 0) {
+            sizeLeftForRelative = p.table.clientWidth;
+          }
+
+          let minColumnWidthRelative = o.minColumnWidth / sizeLeftForRelative;
+          if (isNaN(minColumnWidthRelative)) {
+            minColumnWidthRelative = 0;
+          }
+          if (minColumnWidthRelative > 0) {
+            let extraRelative = 0,delta;
+
+            // First pass - make sure they are all constrained to the minimum width
+            for (let i = 0; i < p.visibleColumns.length; i++) {
+              let col = p.visibleColumns[i];
+              if (col.widthMode === ColumnWidthMode.RELATIVE) {
+                if (!col.ignoreMin && col.width < minColumnWidthRelative) {
+                  extraRelative += minColumnWidthRelative - col.width;
+                  col.width = minColumnWidthRelative;
+                }
+              }
+            }
+
+            // Second pass - try to take the extra width out of the other columns to compensate
+            for (let i = 0; i < p.visibleColumns.length; i++) {
+              let col = p.visibleColumns[i];
+              if (col.widthMode === ColumnWidthMode.RELATIVE) {
+                if (!col.ignoreMin && col.width > minColumnWidthRelative) {
+                  if (extraRelative > 0) {
+                    delta = Math.min(extraRelative, col.width - minColumnWidthRelative);
+                    col.width -= delta;
+                    extraRelative -= delta;
+                  }
+                }
+              }
+            }
+          }
+
+          // Try to fill width
+          if (o.autoFillTableWidth && sizeLeft > 0) {
+            let nonResizableTotal = 0;
+            let sizeLeftToFill = sizeLeft;
+
+            for (let i = 0; i < p.visibleColumns.length; i++) {
+              let col = p.visibleColumns[i];
+              if (!col.resizable && col.widthMode === ColumnWidthMode.ABSOLUTE)
+              nonResizableTotal += col.width;
+
+              if (col.widthMode === ColumnWidthMode.RELATIVE)
+              sizeLeftToFill -= Math.round(sizeLeftForRelative * col.width);
+            }
+
+            let conv = (detectedWidth - nonResizableTotal) / (detectedWidth - sizeLeftToFill - nonResizableTotal) || NaN;
+            for (let i = 0; i < p.visibleColumns.length && sizeLeftToFill > 0; i++) {
+              let col = p.visibleColumns[i];
+              if (!col.resizable && col.widthMode === ColumnWidthMode.ABSOLUTE)
+              continue;
+
+              if (col.widthMode === ColumnWidthMode.RELATIVE) {
+                col.width *= conv;
+              } else {
+                let width = col.actualWidth * conv;
+                if (col.actualWidth !== width) {
+                  col.actualWidth = width;
+                  if (changedColumnIndexes.indexOf(i) === -1)
+                  changedColumnIndexes.push(i);
+                }
+              }
+            }
+          }
+
+          // Materialize relative sizes
+          for (let i = 0; i < p.visibleColumns.length; i++) {
+            let col = p.visibleColumns[i];
+            if (col.widthMode === ColumnWidthMode.RELATIVE) {
+              let width = Math.round(sizeLeftForRelative * col.width);
+              sizeLeft -= width;
+              relatives--;
+
+              // Take care of rounding errors
+              if (relatives === 0 && sizeLeft === 1) {// Take care of rounding errors
+                width++;
+                sizeLeft--;
+              }
+              if (sizeLeft === -1) {
+                width--;
+                sizeLeft++;
+              }
+
+              // Update actualWidth
+              if (width !== col.actualWidth) {
+                col.actualWidth = width;
+                changedColumnIndexes.push(i);
+              }
+            }
+          }
+
+          if (p.visibleColumns.length) {
+            // (There should always be at least 1 column visible, but just in case)
+            p.visibleColumns[p.visibleColumns.length - 1].actualWidthConsideringScrollbarWidth =
+            p.visibleColumns[p.visibleColumns.length - 1].actualWidth - (p.scrollbarWidth || 0);
+          }
+
+          p.notifyRendererOfColumnsConfig?.();
+
+          if (renderColumns) {
+            let tableWidth = this._calculateTbodyWidth();
+
+            if (tableWidthBeforeCalculations < tableWidth) {
+              this._updateTableWidth(false);
+            }
+
+            for (let i = 0; i < changedColumnIndexes.length; i++) {
+              this._resizeColumnElements(changedColumnIndexes[i]);
+            }
+
+            if (tableWidthBeforeCalculations > tableWidth) {
+              this._updateTableWidth(false);
+            }
+          }
+        }
+
+        return this;
+      }
+
+      /**
+       * Notify the table that its height has changed
+       * @public
+       * @expose
+       * @returns {DGTable} self
+       */
+      tableHeightChanged() {
+        let o = this._o,
+          p = this._p;
+
+        if (!p.table) {
+          return this;
+        }
+
+        const tableStyle = getComputedStyle(p.table);
+
+        let height = Css_js.getElementHeight(this.el, true) - (
+        parseFloat(tableStyle.borderTopWidth) || 0) // Subtract top border of inner element
+        - (parseFloat(tableStyle.borderBottomWidth) || 0); // Subtract bottom border of inner element
+
+        if (height !== o.height) {
+
+          o.height = height;
+
+          if (p.tbody) {
+            // At least 1 pixel - to show scrollbars correctly.
+            p.tbody.style.height = Math.max(o.height - Css_js.getElementHeight(p.header, true, true, true), 1) + 'px';
+          }
+
+          if (o.virtualTable) {
+            this.clearAndRender();
+          }
+        }
+
+        return this;
+      }
+
+      /**
+       * Add rows to the table
+       * @public
+       * @expose
+       * @param {Object[]} data - array of rows to add to the table
+       * @param {number} [at=-1] - where to add the rows at
+       * @param {boolean} [resort=false] - should resort all rows?
+       * @param {boolean} [render=true]
+       * @returns {DGTable} self
+       */
+      addRows(data, at, resort, render) {
+        let p = this._p;
+
+        if (typeof at === 'boolean') {
+          render = resort;
+          resort = at;
+          at = -1;
+        }
+
+        if (typeof at !== 'number')
+        at = -1;
+
+        if (at < 0 || at > p.rows.length)
+        at = p.rows.length;
+
+        render = render === undefined ? true : !!render;
+
+        if (data) {
+          p.rows.add(data, at);
+
+          if (p.filteredRows || resort && p.rows.sortColumn.length) {
+
+            if (resort && p.rows.sortColumn.length) {
+              this.resort();
+            } else {
+              this._refilter();
+            }
+
+            p.tableSkeletonNeedsRendering = true;
+
+            if (render) {
+              // Render the skeleton with all rows from scratch
+              this.render();
+            }
+
+          } else if (render) {
+            p.virtualListHelper.addItemsAt(data.length, at);
+
+            if (this._o.virtualTable) {
+              this._updateVirtualHeight().
+              _updateLastCellWidthFromScrollbar() // Detect vertical scrollbar height
+              .render().
+              _updateTableWidth(false); // Update table width to suit the required width considering vertical scrollbar
+
+            } else if (p.tbody) {
+              this.render().
+              _updateLastCellWidthFromScrollbar() // Detect vertical scrollbar height, and update existing last cells
+              ._updateTableWidth(true); // Update table width to suit the required width considering vertical scrollbar
+            }
+          }
+
+          this.emit('addrows', { count: data.length, clear: false });
+        }
+        return this;
+      }
+
+      /**
+       * Removes a row from the table
+       * @public
+       * @expose
+       * @param {number} rowIndex - index
+       * @param {number} count - how many rows to remove
+       * @param {boolean=true} render
+       * @returns {DGTable} self
+       */
+      removeRows(rowIndex, count, render) {
+        let p = this._p;
+
+        if (typeof count !== 'number' || count <= 0) return this;
+
+        if (rowIndex < 0 || rowIndex > p.rows.length - 1) return this;
+
+        p.rows.splice(rowIndex, count);
+        render = render === undefined ? true : !!render;
+
+        if (p.filteredRows) {
+          this._refilter();
+
+          p.tableSkeletonNeedsRendering = true;
+
+          if (render) {
+            // Render the skeleton with all rows from scratch
+            this.render();
+          }
+
+        } else if (render) {
+          p.virtualListHelper.removeItemsAt(count, rowIndex);
+
+          if (this._o.virtualTable) {
+            this._updateVirtualHeight().
+            _updateLastCellWidthFromScrollbar().
+            render().
+            _updateTableWidth(false); // Update table width to suit the required width considering vertical scrollbar
+          } else {
+            this.render().
+            _updateLastCellWidthFromScrollbar().
+            _updateTableWidth(true); // Update table width to suit the required width considering vertical scrollbar
+          }
+        }
+
+        return this;
+      }
+
+      /**
+       * Removes a row from the table
+       * @public
+       * @expose
+       * @param {number} rowIndex - index
+       * @param {boolean=true} render
+       * @returns {DGTable} self
+       */
+      removeRow(rowIndex, render) {
+        return this.removeRows(rowIndex, 1, render);
+      }
+
+      /**
+       * Refreshes the row specified
+       * @public
+       * @expose
+       * @param {number} rowIndex index
+       * @param {boolean} render should render the changes immediately?
+       * @returns {DGTable} self
+       */
+      refreshRow(rowIndex) {let render = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+        let p = this._p;
+
+        if (rowIndex < 0 || rowIndex > p.rows.length - 1)
+        return this;
+
+        // Find out if the row is in the rendered dataset
+        let filteredRowIndex = -1;
+        if (p.filteredRows && (filteredRowIndex = p.filteredRows.indexOf(p.rows[rowIndex])) === -1)
+        return this;
+
+        if (filteredRowIndex === -1) {
+          filteredRowIndex = rowIndex;
+        }
+
+        p.virtualListHelper.refreshItemAt(filteredRowIndex);
+
+        if (render)
+        p.virtualListHelper.render();
+
+        return this;
+      }
+
+      /**
+       * Get the DOM element for the specified row, if it exists
+       * @public
+       * @expose
+       * @param {number} rowIndex index
+       * @returns {Element|null} row or null
+       */
+      getRowElement(rowIndex) {
+        let p = this._p;
+
+        if (rowIndex < 0 || rowIndex > p.rows.length - 1)
+        return null;
+
+        // Find out if the row is in the rendered dataset
+        let filteredRowIndex = -1;
+        if (p.filteredRows && (filteredRowIndex = p.filteredRows.indexOf(p.rows[rowIndex])) === -1)
+        return null;
+
+        if (filteredRowIndex === -1) {
+          filteredRowIndex = rowIndex;
+        }
+
+        return p.virtualListHelper.getItemElementAt(filteredRowIndex) || null;
+      }
+
+      /**
+       * Refreshes all virtual rows
+       * @public
+       * @expose
+       * @returns {DGTable} self
+       */
+      refreshAllVirtualRows() {
+        const p = this._p;
+        p.virtualListHelper.invalidate().render();
+        return this;
+      }
+
+      /**
+       * Replace the whole dataset
+       * @public
+       * @expose
+       * @param {Object[]} data array of rows to add to the table
+       * @param {boolean} [resort=false] should resort all rows?
+       * @returns {DGTable} self
+       */
+      setRows(data, resort) {
+        let p = this._p;
+
+        // this.scrollTop = this.$el.find('.table').scrollTop();
+        p.rows.reset(data);
+
+        if (resort && p.rows.sortColumn.length) {
+          this.resort();
+        } else {
+          this._refilter();
+        }
+
+        this.clearAndRender().trigger('addrows', { count: data.length, clear: true });
+
+        return this;
+      }
+
+      /**
+       * Creates a URL representing the data in the specified element.
+       * This uses the Blob or BlobBuilder of the modern browsers.
+       * The url can be used for a Web Worker.
+       * @public
+       * @expose
+       * @param {string} id Id of the element containing your data
+       * @returns {string|null} the url, or null if not supported
+       */
+      getUrlForElementContent(id) {
+        let blob,
+          el = document.getElementById(id);
+        if (el) {
+          let data = el.textContent;
+          if (typeof Blob === 'function') {
+            blob = new Blob([data]);
+          } else {
+            let BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
+            if (!BlobBuilder) {
+              return null;
+            }
+            let builder = new BlobBuilder();
+            builder.append(data);
+            blob = builder.getBlob();
+          }
+          return (window.URL || window.webkitURL).createObjectURL(blob);
+        }
+        return null;
+      }
+
+      /**
+       * @public
+       * @expose
+       * @returns {boolean} A value indicating whether Web Workers are supported
+       */
+      isWorkerSupported() {
+        return window['Worker'] instanceof Function;
+      }
+
+      /**
+       * Creates a Web Worker for updating the table.
+       * @public
+       * @expose
+       * @param {string} url Url to the script for the Web Worker
+       * @param {boolean} [start=true] if true, starts the Worker immediately
+       * @param {boolean} [resort=false]
+       * @returns {Worker|null} the Web Worker, or null if not supported
+       */
+      createWebWorker(url, start, resort) {
+        if (this.isWorkerSupported()) {
+          let p = this._p;
+
+          let worker = new Worker(url);
+          let listener = (evt) => {
+            if (evt.data.append) {
+              this.addRows(evt.data.rows, resort);
+            } else {
+              this.setRows(evt.data.rows, resort);
+            }
+          };
+          worker.addEventListener('message', listener, false);
+          if (!p.workerListeners) {
+            p.workerListeners = [];
+          }
+          p.workerListeners.push({ worker: worker, listener: listener });
+          if (start || start === undefined) {
+            worker.postMessage(null);
+          }
+          return worker;
+        }
+        return null;
+      }
+
+      /**
+       * Unbinds a Web Worker from the table, stopping updates.
+       * @public
+       * @expose
+       * @param {Worker} worker the Web Worker
+       * @returns {DGTable} self
+       */
+      unbindWebWorker(worker) {
+        let p = this._p;
+
+        if (p.workerListeners) {
+          for (let j = 0; j < p.workerListeners.length; j++) {
+            if (p.workerListeners[j].worker === worker) {
+              worker.removeEventListener('message', p.workerListeners[j].listener, false);
+              p.workerListeners.splice(j, 1);
+              j--;
+            }
+          }
+        }
+
+        return this;
+      }
+
+      /**
+       * A synonym for hideCellPreview()
+       * @public
+       * @expose
+       * @returns {DGTable} self
+       */
+      abortCellPreview() {
+        this.hideCellPreview();
+        return this;
+      }
+
+      /**
+       * Cancel a resize in progress
+       * @expose
+       * @private
+       * @returns {DGTable} self
+       */
+      cancelColumnResize() {
+        const p = this._p;
+
+        if (p.resizer) {
+          p.resizer.remove();
+          p.resizer = null;
+          p.eventsSink.remove(document, '.colresize');
+        }
+
+        return this;
+      }
+
+      _onTableScrolledHorizontally() {
+        const p = this._p;
+
+        p.header.scrollLeft = p.table.scrollLeft;
+      }
+
+      /**previousElementSibling
+       * Reverse-calculate the column to resize from mouse position
+       * @private
+       * @param {MouseEvent} event mouse event
+       * @returns {string|null} name of the column which the mouse is over, or null if the mouse is not in resize position
+       */
+      _getColumnByResizePosition(event) {
+        let o = this._o,
+          rtl = this._isTableRtl();
+
+        let headerCell = event.target.closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`);
+        if (headerCell[OriginalCellSymbol]) {
+          headerCell = headerCell[OriginalCellSymbol];
+        }
+
+        let previousElementSibling = headerCell.previousSibling;
+        while (previousElementSibling && previousElementSibling.nodeType !== 1) {
+          previousElementSibling = previousElementSibling.previousSibling;
+        }
+
+        let firstCol = !previousElementSibling;
+
+        let mouseX = (event.pageX || event.clientX) - Css_js.getElementOffset(headerCell).left;
+
+        if (rtl) {
+          if (!firstCol && Css_js.getElementWidth(headerCell, true, true, true) - mouseX <= o.resizeAreaWidth / 2) {
+            return previousElementSibling['columnName'];
+          } else if (mouseX <= o.resizeAreaWidth / 2) {
+            return headerCell['columnName'];
+          }
+        } else {
+          if (!firstCol && mouseX <= o.resizeAreaWidth / 2) {
+            return previousElementSibling['columnName'];
+          } else if (Css_js.getElementWidth(headerCell, true, true, true) - mouseX <= o.resizeAreaWidth / 2) {
+            return headerCell['columnName'];
+          }
+        }
+
+        return null;
+      }
+
+      /**
+       * @param {TouchEvent} event
+       */
+      _onTouchStartColumnHeader(event) {
+        const p = this._p;
+
+        if (p.currentTouchId) return;
+
+        let startTouch = event.changedTouches[0];
+        p.currentTouchId = startTouch.identifier;
+
+        let cellEl = event.currentTarget;
+
+        let startPos = { x: startTouch.pageX, y: startTouch.pageY },
+          currentPos = startPos,
+          distanceTreshold = 9;
+
+        let tapAndHoldTimeout;
+
+        let unbind = function () {
+          p.currentTouchId = null;
+          p.eventsSink.remove(cellEl, '.colheader');
+          clearTimeout(tapAndHoldTimeout);
+        };
+
+        let fakeMouseEvent = function (name) {
+          for (const k of event)
+          event[k];for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {args[_key - 1] = arguments[_key];}
+
+          for (const obj of args) {
+            for (const key of ['target', 'clientX', 'clientY', 'offsetX', 'offsetY', 'screenX', 'screenY', 'pageX', 'pageY', 'which']) {
+              if (obj[key] != null)
+              obj[key];
+            }
+          }
+
+          return new MouseEvent(name, event);
+        };
+
+        cellEl.dispatchEvent(
+          fakeMouseEvent('mousedown', event.changedTouches[0], { button: 0, target: event.target })
+        );
+
+        tapAndHoldTimeout = setTimeout(() => {
+          unbind();
+
+          p.eventsSink.
+          add(cellEl, 'touchend.colheader', (event) => {
+            // Prevent simulated mouse events after touchend
+            if (!isInputElementEvent(event))
+            event.preventDefault();
+
+            p.eventsSink.remove(cellEl, '.colheader');
+          }, { once: true }).
+          add(cellEl, 'touchcancel.colheader', (_event) => {
+            p.eventsSink.remove(cellEl, '.colheader');
+          }, { once: true });
+
+          let distanceTravelled = Math.sqrt(Math.pow(Math.abs(currentPos.x - startPos.x), 2) + Math.pow(Math.abs(currentPos.y - startPos.y), 2));
+
+          if (distanceTravelled < distanceTreshold) {
+            this.cancelColumnResize();
+
+            cellEl.dispatchEvent(
+              fakeMouseEvent('mouseup', event.changedTouches[0], { button: 2, target: event.target })
+            );
+          }
+
+        }, 500);
+
+        p.eventsSink.
+        add(cellEl, 'touchend.colheader', (event) => {
+          let touch = find(event.changedTouches, (touch) => touch.identifier === p.currentTouchId);
+          if (!touch) return;
+
+          unbind();
+
+          // Prevent simulated mouse events after touchend
+          if (!isInputElementEvent(event))
+          event.preventDefault();
+
+          currentPos = { x: touch.pageX, y: touch.pageY };
+          let distanceTravelled = Math.sqrt(Math.pow(Math.abs(currentPos.x - startPos.x), 2) + Math.pow(Math.abs(currentPos.y - startPos.y), 2));
+
+          if (distanceTravelled < distanceTreshold || p.resizer) {
+            cellEl.dispatchEvent(
+              fakeMouseEvent('mouseup', touch, { 0: 2, target: event.target })
+            );
+
+            cellEl.dispatchEvent(
+              fakeMouseEvent('click', touch, { button: 0, target: event.target })
+            );
+          }
+
+        }).
+        add(cellEl, 'touchcancel.colheader', unbind).
+        add(cellEl, 'touchmove.colheader', (event) => {
+          let touch = find(event.changedTouches, (touch) => touch.identifier === p.currentTouchId);
+          if (!touch) return;
+
+          // Keep track of current position, so we know if we need to cancel the tap-and-hold
+          currentPos = { x: touch.pageX, y: touch.pageY };
+
+          if (p.resizer) {
+            event.preventDefault();
+
+            cellEl.dispatchEvent(
+              fakeMouseEvent('mousemove', touch, { target: event.target })
+            );
+          }
+        });
+      }
+
+      /**
+       * @param {MouseEvent} event
+       */
+      _onMouseDownColumnHeader(event) {
+        if (event.button !== 0) return this; // Only treat left-clicks
+
+        let o = this._o,
+          p = this._p,
+          col = this._getColumnByResizePosition(event);
+
+        if (col) {
+          let column = p.columns.get(col);
+          if (!o.resizableColumns || !column || !column.resizable) {
+            return false;
+          }
+
+          let rtl = this._isTableRtl();
+
+          if (p.resizer) {
+            p.resizer.remove();
+          }
+          p.resizer = createElement('div');
+          p.resizer.className = o.resizerClassName;
+          Css_js.setCssProps(p.resizer, {
+            position: 'absolute',
+            display: 'block',
+            zIndex: -1,
+            visibility: 'hidden',
+            width: '2px',
+            background: '#000',
+            opacity: 0.7
+          });
+          this.el.appendChild(p.resizer);
+
+          let selectedHeaderCell = column.element,
+            commonAncestor = p.resizer.parentNode;
+
+          const commonAncestorStyle = getComputedStyle(commonAncestor);
+          const selectedHeaderCellStyle = getComputedStyle(selectedHeaderCell);
+
+          let posCol = Css_js.getElementOffset(selectedHeaderCell),
+            posRelative = Css_js.getElementOffset(commonAncestor);
+          posRelative.left += parseFloat(commonAncestorStyle.borderLeftWidth) || 0;
+          posRelative.top += parseFloat(commonAncestorStyle.borderTopWidth) || 0;
+          posCol.left -= posRelative.left;
+          posCol.top -= posRelative.top;
+          posCol.top -= parseFloat(selectedHeaderCellStyle.borderTopWidth) || 0;
+          let resizerWidth = Css_js.getElementWidth(p.resizer, true, true, true);
+          if (rtl) {
+            posCol.left -= Math.ceil((parseFloat(selectedHeaderCellStyle.borderLeftWidth) || 0) / 2);
+            posCol.left -= Math.ceil(resizerWidth / 2);
+          } else {
+            posCol.left += Css_js.getElementWidth(selectedHeaderCell, true, true, true);
+            posCol.left += Math.ceil((parseFloat(selectedHeaderCellStyle.borderRightWidth) || 0) / 2);
+            posCol.left -= Math.ceil(resizerWidth / 2);
+          }
+
+          Css_js.setCssProps(p.resizer, {
+            'z-index': '10',
+            'visibility': 'visible',
+            'left': posCol.left + 'px',
+            'top': posCol.top + 'px',
+            'height': Css_js.getElementHeight(this.el, false, false, false) + 'px'
+          });
+          p.resizer['columnName'] = selectedHeaderCell['columnName'];
+
+          try {p.resizer.style.zIndex = '';}
+          catch (ignored) {/* we're ok with this */}
+
+          p.eventsSink.
+          add(document, 'mousemove.colresize', this._onMouseMoveResizeArea.bind(this)).
+          add(document, 'mouseup.colresize', this._onEndDragColumnHeader.bind(this));
+
+          event.preventDefault();
+        }
+      }
+
+      /**
+       * @param {MouseEvent} event event
+       */
+      _onMouseMoveColumnHeader(event) {
+        let o = this._o,
+          p = this._p;
+
+        if (o.resizableColumns) {
+          let col = this._getColumnByResizePosition(event);
+          let headerCell = event.target.closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`);
+          if (!col || !p.columns.get(col).resizable) {
+            headerCell.style.cursor = '';
+          } else {
+            headerCell.style.cursor = 'e-resize';
+          }
+        }
+      }
+
+      /**
+       * @param {MouseEvent} event
+       */
+      _onMouseUpColumnHeader(event) {
+        if (event.button === 2) {
+          let o = this._o;
+          let headerCell = event.target.closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`);
+          let bounds = Css_js.getElementOffset(headerCell);
+          bounds['width'] = Css_js.getElementWidth(headerCell, true, true, true);
+          bounds['height'] = Css_js.getElementHeight(headerCell, true, true, true);
+          this.emit('headercontextmenu', {
+            name: headerCell['columnName'],
+            pageX: event.pageX,
+            pageY: event.pageY,
+            bounds: bounds
+          });
+        }
+        return this;
+      }
+
+      /**
+       * @private
+       * @param {MouseEvent} event event
+       */
+      _onMouseLeaveColumnHeader(event) {
+        let o = this._o;
+        let headerCell = event.target.closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`);
+        headerCell.style.cursor = '';
+      }
+
+      /**
+       * @private
+       * @param {MouseEvent} event event
+       */
+      _onClickColumnHeader(event) {
+        if (isInputElementEvent(event))
+        return;
+
+        if (!this._getColumnByResizePosition(event)) {
+          let o = this._o,
+            p = this._p;
+
+          let headerCell = event.target.closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`);
+          if (o.sortableColumns) {
+            let column = p.columns.get(headerCell['columnName']);
+            let currentSort = p.rows.sortColumn;
+            if (column && column.sortable) {
+              let shouldAdd = true;
+
+              let lastSort = currentSort.length ? currentSort[currentSort.length - 1] : null;
+
+              if (lastSort && lastSort.column === column.name) {
+                if (!lastSort.descending || !o.allowCancelSort) {
+                  lastSort.descending = !lastSort.descending;
+                } else {
+                  shouldAdd = false;
+                  currentSort.splice(currentSort.length - 1, 1);
+                }
+              }
+
+              if (shouldAdd) {
+                this.sort(column.name, undefined, true).render();
+              } else {
+                this.sort(); // just refresh current situation
+              }
+            }
+          }
+        }
+      }
+
+      /**
+       * @private
+       * @param {DragEvent} event event
+       */
+      _onStartDragColumnHeader(event) {
+        let o = this._o,
+          p = this._p;
+
+        if (o.movableColumns) {
+          let headerCell = event.target.closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`);
+          let column = p.columns.get(headerCell['columnName']);
+          if (column && column.movable) {
+            headerCell.style.opacity = 0.35;
+            p.dragId = Math.random() * 0x9999999; // Recognize this ID on drop
+            event.dataTransfer.setData('text', JSON.stringify({ dragId: p.dragId, column: column.name }));
+          } else {
+            event.preventDefault();
+          }
+        } else {
+          event.preventDefault();
+        }
+
+        return undefined;
+      }
+
+      /**
+       * @private
+       * @param {MouseEvent} event event
+       */
+      _onMouseMoveResizeArea(event) {
+
+        let p = this._p;
+
+        let column = p.columns.get(p.resizer['columnName']);
+        let rtl = this._isTableRtl();
+
+        let selectedHeaderCell = column.element,
+          commonAncestor = p.resizer.parentNode;
+
+        const commonAncestorStyle = getComputedStyle(commonAncestor);
+        const selectedHeaderCellStyle = getComputedStyle(selectedHeaderCell);
+
+        let posCol = Css_js.getElementOffset(selectedHeaderCell),
+          posRelative = Css_js.getElementOffset(commonAncestor);
+        posRelative.left += parseFloat(commonAncestorStyle.borderLeftWidth) || 0;
+        posCol.left -= posRelative.left;
+        let resizerWidth = Css_js.getElementWidth(p.resizer, true, true, true);
+
+        let isBoxing = selectedHeaderCellStyle.boxSizing === 'border-box';
+
+        let actualX = event.pageX - posRelative.left;
+        let minX = posCol.left;
+
+        minX -= Math.ceil(resizerWidth / 2);
+
+        if (rtl) {
+          minX += Css_js.getElementWidth(selectedHeaderCell, true, true, true);
+          minX -= column.ignoreMin ? 0 : this._o.minColumnWidth;
+
+          if (!isBoxing) {
+            minX -= Math.ceil((parseFloat(selectedHeaderCellStyle.borderLeftWidth) || 0) / 2);
+            minX -= this._horizontalPadding(selectedHeaderCell);
+          }
+
+          if (actualX > minX) {
+            actualX = minX;
+          }
+        } else {
+          minX += column.ignoreMin ? 0 : this._o.minColumnWidth;
+
+          if (!isBoxing) {
+            minX += Math.ceil((parseFloat(selectedHeaderCellStyle.borderRightWidth) || 0) / 2);
+            minX += this._horizontalPadding(selectedHeaderCell);
+          }
+
+          if (actualX < minX) {
+            actualX = minX;
+          }
+        }
+
+        p.resizer.style.left = actualX + 'px';
+      }
+
+      /**
+       * @private
+       * @param {DragEvent} event event
+       */
+      _onEndDragColumnHeader(event) {
+
+        let o = this._o,
+          p = this._p;
+
+        if (!p.resizer) {
+          event.target.style.opacity = null;
+        } else {
+          p.eventsSink.remove(document, '.colresize');
+
+          let column = p.columns.get(p.resizer['columnName']);
+          let rtl = this._isTableRtl();
+
+          let selectedHeaderCell = column.element,
+            selectedHeaderCellInner = selectedHeaderCell.firstChild,
+            commonAncestor = p.resizer.parentNode;
+
+          const commonAncestorStyle = getComputedStyle(commonAncestor);
+          const selectedHeaderCellStyle = getComputedStyle(selectedHeaderCell);
+
+          let posCol = Css_js.getElementOffset(selectedHeaderCell),
+            posRelative = Css_js.getElementOffset(commonAncestor);
+          posRelative.left += parseFloat(commonAncestorStyle.borderLeftWidth) || 0;
+          posCol.left -= posRelative.left;
+          let resizerWidth = Css_js.getElementWidth(p.resizer, true, true, true);
+
+          let isBoxing = selectedHeaderCellStyle.boxSizing === 'border-box';
+
+          let actualX = event.pageX - posRelative.left;
+          let baseX = posCol.left,minX = posCol.left;
+          let width = 0;
+
+          baseX -= Math.ceil(resizerWidth / 2);
+
+          if (rtl) {
+            if (!isBoxing) {
+              actualX += this._horizontalPadding(selectedHeaderCell);
+              const innerComputedStyle = getComputedStyle(selectedHeaderCellInner || selectedHeaderCell);
+              actualX += parseFloat(innerComputedStyle.borderLeftWidth) || 0;
+              actualX += parseFloat(innerComputedStyle.borderRightWidth) || 0;
+              actualX += column.arrowProposedWidth || 0; // Sort-arrow width
+            }
+
+            baseX += Css_js.getElementWidth(selectedHeaderCell, true, true, true);
+
+            minX = baseX - (column.ignoreMin ? 0 : this._o.minColumnWidth);
+            if (actualX > minX) {
+              actualX = minX;
+            }
+
+            width = baseX - actualX;
+          } else {
+            if (!isBoxing) {
+              actualX -= this._horizontalPadding(selectedHeaderCell);
+              const innerComputedStyle = getComputedStyle(selectedHeaderCellInner || selectedHeaderCell);
+              actualX -= parseFloat(innerComputedStyle.borderLeftWidth) || 0;
+              actualX -= parseFloat(innerComputedStyle.borderRightWidth) || 0;
+              actualX -= column.arrowProposedWidth || 0; // Sort-arrow width
+            }
+
+            minX = baseX + (column.ignoreMin ? 0 : this._o.minColumnWidth);
+            if (actualX < minX) {
+              actualX = minX;
+            }
+
+            width = actualX - baseX;
+          }
+
+          p.resizer.remove();
+          p.resizer = null;
+
+          let sizeToSet = width;
+
+          if (column.widthMode === ColumnWidthMode.RELATIVE) {
+            let sizeLeft = this._calculateWidthAvailableForColumns();
+            //sizeLeft -= p.table.offsetWidth - p.table.clientWidth;
+
+            let totalRelativePercentage = 0;
+            let relatives = 0;
+
+            for (let i = 0; i < p.visibleColumns.length; i++) {
+              let col = p.visibleColumns[i];
+              if (col.name === column.name) continue;
+
+              if (col.widthMode === ColumnWidthMode.RELATIVE) {
+                totalRelativePercentage += col.width;
+                relatives++;
+              } else {
+                sizeLeft -= col.actualWidth;
+              }
+            }
+
+            sizeLeft = Math.max(1, sizeLeft);
+            if (sizeLeft === 1)
+            sizeLeft = p.table.clientWidth;
+            sizeToSet = width / sizeLeft;
+
+            if (relatives > 0) {
+              // When there's more than one relative overall,
+              //   we can do relative enlarging/shrinking.
+              // Otherwise, we can end up having a 0 width.
+
+              let unNormalizedSizeToSet = sizeToSet / ((1 - sizeToSet) / totalRelativePercentage);
+
+              totalRelativePercentage += sizeToSet;
+
+              // Account for relative widths scaling later
+              if (totalRelativePercentage < 1 && o.relativeWidthGrowsToFillWidth ||
+              totalRelativePercentage > 1 && o.relativeWidthShrinksToFillWidth) {
+                sizeToSet = unNormalizedSizeToSet;
+              }
+            }
+
+            sizeToSet *= 100;
+            sizeToSet += '%';
+          }
+
+          this.setColumnWidth(column.name, sizeToSet);
+        }
+      }
+
+      /**
+       * @private
+       * @param {DragEvent} event event
+       */
+      _onDragEnterColumnHeader(event) {
+        let o = this._o,
+          p = this._p;
+
+        if (o.movableColumns) {
+          let dataTransferred = event.dataTransfer.getData('text');
+          if (dataTransferred) {
+            dataTransferred = JSON.parse(dataTransferred);
+          } else
+          {
+            dataTransferred = null; // WebKit does not provide the dataTransfer on dragenter?..
+          }
+
+          let headerCell = event.target.closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`);
+          if (!dataTransferred ||
+          p.dragId === dataTransferred.dragId && headerCell['columnName'] !== dataTransferred.column) {
+
+            let column = p.columns.get(headerCell['columnName']);
+            if (column && (column.movable || column !== p.visibleColumns[0])) {
+              headerCell.classList.add('drag-over');
+            }
+          }
+        }
+      }
+
+      /**
+       * @private
+       * @param {DragEvent} event event
+       */
+      _onDragOverColumnHeader(event) {
+        event.preventDefault();
+      }
+
+      /**
+       * @private
+       * @param {DragEvent} event event
+       */
+      _onDragLeaveColumnHeader(event) {
+        let o = this._o;
+        let headerCell = event.target.closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`);
+        if (!event.relatedTarget.contains(headerCell.firstChild)) {
+          headerCell.classList.remove('drag-over');
+        }
+      }
+
+      /**
+       * @private
+       * @param {DragEvent} event event
+       */
+      _onDropColumnHeader(event) {
+        event.preventDefault();
+
+        let o = this._o,
+          p = this._p;
+
+        let dataTransferred = JSON.parse(event.dataTransfer.getData('text'));
+        let headerCell = event.target.closest(`div.${o.tableClassName}-header-cell,div.${o.cellPreviewClassName}`);
+        if (o.movableColumns && dataTransferred.dragId === p.dragId) {
+          let srcColName = dataTransferred.column,
+            destColName = headerCell['columnName'],
+            srcCol = p.columns.get(srcColName),
+            destCol = p.columns.get(destColName);
+          if (srcCol && destCol && srcCol.movable && (destCol.movable || destCol !== p.visibleColumns[0])) {
+            this.moveColumn(srcColName, destColName);
+          }
+        }
+        headerCell.classList.remove('drag-over');
+      }
+
+      /**
+       * @private
+       * @returns {DGTable} self
+       */
+      _clearSortArrows() {
+        let p = this._p;
+
+        if (p.table) {
+          let tableClassName = this._o.tableClassName;
+          let sortedColumns = DomCompat_js.scopedSelectorAll(p.headerRow, `>div.${tableClassName}-header-cell.sorted`);
+          let arrows = Array.prototype.slice.call(sortedColumns, 0).map((el) => DomCompat_js.scopedSelector(el, '>div>.sort-arrow')).filter((el) => !!el);
+          for (const arrow of arrows) {
+            let col = p.columns.get(arrow.parentNode.parentNode['columnName']);
+            if (col) {
+              col.arrowProposedWidth = 0;
+            }
+            arrow.remove();
+          }
+          for (const sortedColumn of sortedColumns) {
+            sortedColumn.classList.remove('sorted', 'desc');
+          }
+        }
+        return this;
+      }
+
+      /**
+       * @private
+       * @param {string} column the name of the sort column
+       * @param {boolean} descending table is sorted descending
+       * @returns {boolean} self
+       */
+      _showSortArrow(column, descending) {
+        let p = this._p;
+
+        let col = p.columns.get(column);
+        if (!col) return false;
+
+        let arrow = createElement('span');
+        arrow.className = 'sort-arrow';
+
+        if (col.element) {
+          col.element.className += descending ? ' sorted desc' : ' sorted';
+          col.element.firstChild.insertBefore(arrow, col.element.firstChild.firstChild);
+        }
+
+        if (col.widthMode !== ColumnWidthMode.RELATIVE && this._o.adjustColumnWidthForSortArrow) {
+          col.arrowProposedWidth = arrow.scrollWidth + (
+          parseFloat(getComputedStyle(arrow).marginRight) || 0) + (
+          parseFloat(getComputedStyle(arrow).marginLeft) || 0);
+        }
+
+        return true;
+      }
+
+      /**
+       * @private
+       * @param {number} cellIndex index of the column in the DOM
+       * @returns {DGTable} self
+       */
+      _resizeColumnElements(cellIndex) {
+        let p = this._p;
+
+        const headerCells = p.headerRow.querySelectorAll(`div.${this._o.tableClassName}-header-cell`);
+        const headerCell = headerCells[cellIndex];
+        let col = p.columns.get(headerCell['columnName']);
+
+        if (col) {
+          headerCell.style.width = (col.actualWidthConsideringScrollbarWidth || col.actualWidth) + 'px';
+
+          let width = (col.actualWidthConsideringScrollbarWidth || col.actualWidth) + 'px';
+          let tbodyChildren = p.tbody.childNodes;
+          for (let i = 0, count = tbodyChildren.length; i < count; i++) {
+            let rowEl = tbodyChildren[i];
+            if (rowEl.nodeType !== 1) continue;
+            rowEl.childNodes[cellIndex].style.width = width;
+          }
+        }
+
+        return this;
+      }
+
+      /**
+       * @returns {DGTable} self
+       * */
+      _destroyHeaderCells() {
+        let p = this._p;
+
+        if (p.headerRow) {
+          p.headerRow = null;
+        }
+        return this;
+      }
+
+      /**
+       * @private
+       * @returns {DGTable} self
+       */
+      _renderSkeletonBase() {
+        let p = this._p,
+          o = this._o;
+
+        // Clean up old elements
+
+        p.virtualListHelper?.destroy();
+        p.virtualListHelper = null;
+
+        if (p.table && o.virtualTable) {
+          p.table.remove();
+          p.table = p.tbody = null;
+        }
+
+        this._destroyHeaderCells();
+        p.currentTouchId = null;
+        if (p.header) {
+          p.header.remove();
+        }
+
+        // Create new base elements
+        let tableClassName = o.tableClassName,
+          header = createElement('div'),
+          headerRow = createElement('div');
+
+        header.className = `${tableClassName}-header`;
+        headerRow.className = `${tableClassName}-header-row`;
+
+        p.header = header;
+        p.headerRow = headerRow;
+        header.appendChild(headerRow);
+        this.el.prepend(header);
+
+        relativizeElement(this.el);
+
+        if (o.width === DGTable.Width.SCROLL) {
+          this.el.style.overflow = 'hidden';
+        } else {
+          this.el.style.overflow = '';
+        }
+
+        if (!o.height && o.virtualTable) {
+          o.height = Css_js.getElementHeight(this.el, true);
+        }
+
+        return this;
+      }
+
+      _bindHeaderColumnEvents(columnEl) {
+        const inner = columnEl.firstChild;
+        columnEl.addEventListener('mousedown', this._onMouseDownColumnHeader.bind(this));
+        columnEl.addEventListener('mousemove', this._onMouseMoveColumnHeader.bind(this));
+        columnEl.addEventListener('mouseup', this._onMouseUpColumnHeader.bind(this));
+        columnEl.addEventListener('mouseleave', this._onMouseLeaveColumnHeader.bind(this));
+        columnEl.addEventListener('touchstart', this._onTouchStartColumnHeader.bind(this));
+        columnEl.addEventListener('dragstart', this._onStartDragColumnHeader.bind(this));
+        columnEl.addEventListener('click', this._onClickColumnHeader.bind(this));
+        columnEl.addEventListener('contextmenu', (event) => {event.preventDefault();});
+        inner.addEventListener('dragenter', this._onDragEnterColumnHeader.bind(this));
+        inner.addEventListener('dragover', this._onDragOverColumnHeader.bind(this));
+        inner.addEventListener('dragleave', this._onDragLeaveColumnHeader.bind(this));
+        inner.addEventListener('drop', this._onDropColumnHeader.bind(this));
+      }
+
+      /**
+       * @private
+       * @returns {DGTable} self
+       */
+      _renderSkeletonHeaderCells() {
+        let p = this._p,
+          o = this._o;
+
+        let allowCellPreview = o.allowCellPreview,
+          allowHeaderCellPreview = o.allowHeaderCellPreview;
+
+        let tableClassName = o.tableClassName,
+          headerCellClassName = tableClassName + '-header-cell',
+          headerRow = p.headerRow;
+
+        // Create header cells
+        for (let i = 0; i < p.visibleColumns.length; i++) {
+          let column = p.visibleColumns[i];
+          if (column.visible) {
+            let cell = createElement('div');
+            cell.draggable = true;
+            cell.className = headerCellClassName;
+            cell.style.width = column.actualWidth + 'px';
+            if (o.sortableColumns && column.sortable) {
+              cell.className += ' sortable';
+            }
+            cell['columnName'] = column.name;
+            cell.setAttribute('data-column', column.name);
+
+            let cellInside = createElement('div');
+            cellInside.innerHTML = o.headerCellFormatter(column.label, column.name);
+            cell.appendChild(cellInside);
+            if (allowCellPreview && allowHeaderCellPreview) {
+              p._bindCellHoverIn(cell);
+            }
+            headerRow.appendChild(cell);
+
+            p.visibleColumns[i].element = cell;
+
+            this._bindHeaderColumnEvents(cell);
+            this._disableCssSelect(cell);
+          }
+        }
+
+        this.emit('headerrowcreate', headerRow);
+
+        return this;
+      }
+
+      /**
+       * @private
+       * @returns {DGTable} self
+       */
+      _renderSkeletonBody() {
+        let p = this._p,
+          o = this._o;
+
+        let tableClassName = o.tableClassName;
+
+        // Calculate virtual row heights
+        if (o.virtualTable && !p.virtualRowHeight) {
+          let createDummyRow = () => {
+            let row = createElement('div'),
+              cell = row.appendChild(createElement('div')),
+              cellInner = cell.appendChild(createElement('div'));
+            row.className = `${tableClassName}-row`;
+            cell.className = `${tableClassName}-cell`;
+            cellInner.innerHTML = '0';
+            row.style.visibility = 'hidden';
+            row.style.position = 'absolute';
+            return row;
+          };
+
+          const dummyWrapper = createElement('div');
+          dummyWrapper.className = this.el.className;
+          Css_js.setCssProps(dummyWrapper, {
+            'z-index': -1,
+            'position': 'absolute',
+            'left': '0',
+            'top': '-9999px',
+            'width': '1px',
+            'overflow': 'hidden'
+          });
+
+          const dummyTable = createElement('div');
+          dummyTable.className = tableClassName;
+          dummyWrapper.appendChild(dummyTable);
+
+          const dummyTbody = createElement('div');
+          dummyTbody.className = `${tableClassName}-body`;
+          dummyTbody.style.width = '99999px';
+          dummyTable.appendChild(dummyTbody);
+
+          document.body.appendChild(dummyWrapper);
+
+          let row1 = createDummyRow(),row2 = createDummyRow(),row3 = createDummyRow();
+          dummyTbody.appendChild(row1);
+          dummyTbody.appendChild(row2);
+          dummyTbody.appendChild(row3);
+
+          p.virtualRowHeightFirst = Css_js.getElementHeight(row1, true, true, true);
+          p.virtualRowHeight = Css_js.getElementHeight(row2, true, true, true);
+          p.virtualRowHeightLast = Css_js.getElementHeight(row3, true, true, true);
+
+          dummyWrapper.remove();
+        }
+
+        // Create inner table and tbody
+        if (!p.table) {
+          let fragment = document.createDocumentFragment();
+
+          // Create the inner table element
+          let table = createElement('div');
+          table.className = tableClassName;
+
+          if (o.virtualTable) {
+            table.className += ' virtual';
+          }
+
+          const tableStyle = getComputedStyle(table);
+
+          let tableHeight = o.height - Css_js.getElementHeight(p.header, true, true, true);
+          if (tableStyle.boxSizing !== 'border-box') {
+            tableHeight -= parseFloat(tableStyle.borderTopWidth) || 0;
+            tableHeight -= parseFloat(tableStyle.borderBottomWidth) || 0;
+            tableHeight -= parseFloat(tableStyle.paddingTop) || 0;
+            tableHeight -= parseFloat(tableStyle.paddingBottom) || 0;
+          }
+          p.visibleHeight = tableHeight;
+          Css_js.setCssProps(table, {
+            height: o.height ? tableHeight + 'px' : 'auto',
+            display: 'block',
+            overflowY: 'auto',
+            overflowX: o.width === DGTable.Width.SCROLL ? 'auto' : 'hidden'
+          });
+          fragment.appendChild(table);
+
+          // Create the "tbody" element
+          let tbody = createElement('div');
+          tbody.className = o.tableClassName + '-body';
+          tbody.style.minHeight = '1px';
+          p.table = table;
+          p.tbody = tbody;
+
+          relativizeElement(tbody);
+          relativizeElement(table);
+
+          table.appendChild(tbody);
+          this.el.appendChild(fragment);
+
+          this._setupVirtualTable();
+        }
+
+        return this;
+      }
+
+      /**
+       * @private
+       * @returns {DGTable} self
+       * @deprecated
+       */
+      _renderSkeleton() {
+        return this;
+      }
+
+      /**
+       * @private
+       * @returns {DGTable} self
+       */
+      _updateVirtualHeight() {
+        const o = this._o,p = this._p;
+
+        if (!p.tbody)
+        return this;
+
+        if (o.virtualTable) {
+          const virtualHeight = p.virtualListHelper.estimateFullHeight();
+          p.lastVirtualScrollHeight = virtualHeight;
+          p.tbody.style.height = virtualHeight + 'px';
+        } else {
+          p.tbody.style.height = '';
+        }
+
+        return this;
+      }
+
+      /**
+       * @private
+       * @returns {DGTable} self
+       */
+      _updateLastCellWidthFromScrollbar(force) {
+
+        const p = this._p;
+
+        // Calculate scrollbar's width and reduce from lat column's width
+        let scrollbarWidth = p.table.offsetWidth - p.table.clientWidth;
+        if (scrollbarWidth !== p.scrollbarWidth || force) {
+          p.scrollbarWidth = scrollbarWidth;
+          for (let i = 0; i < p.columns.length; i++) {
+            p.columns[i].actualWidthConsideringScrollbarWidth = null;
+          }
+
+          if (p.scrollbarWidth > 0 && p.visibleColumns.length > 0) {
+            // (There should always be at least 1 column visible, but just in case)
+            let lastColIndex = p.visibleColumns.length - 1;
+
+            p.visibleColumns[lastColIndex].actualWidthConsideringScrollbarWidth = p.visibleColumns[lastColIndex].actualWidth - p.scrollbarWidth;
+            let lastColWidth = p.visibleColumns[lastColIndex].actualWidthConsideringScrollbarWidth + 'px';
+            let tbodyChildren = p.tbody.childNodes;
+            for (let i = 0, count = tbodyChildren.length; i < count; i++) {
+              let row = tbodyChildren[i];
+              if (row.nodeType !== 1) continue;
+              row.childNodes[lastColIndex].style.width = lastColWidth;
+            }
+
+            p.headerRow.childNodes[lastColIndex].style.width = lastColWidth;
+          }
+
+          p.notifyRendererOfColumnsConfig?.();
+        }
+
+        return this;
+      }
+
+      /**
+       * Explicitly set the width of the table based on the sum of the column widths
+       * @private
+       * @param {boolean} parentSizeMayHaveChanged Parent size may have changed, treat rendering accordingly
+       * @returns {DGTable} self
+       */
+      _updateTableWidth(parentSizeMayHaveChanged) {
+        const o = this._o,p = this._p;
+        let width = this._calculateTbodyWidth();
+
+        p.tbody.style.minWidth = width + 'px';
+        p.headerRow.style.minWidth = width + (p.scrollbarWidth || 0) + 'px';
+
+        p.eventsSink.remove(p.table, 'scroll');
+
+        if (o.width === DGTable.Width.AUTO) {
+          // Update wrapper element's size to fully contain the table body
+
+          Css_js.setElementWidth(p.table, Css_js.getElementWidth(p.tbody, true, true, true));
+          Css_js.setElementWidth(this.el, Css_js.getElementWidth(p.table, true, true, true));
+
+        } else if (o.width === DGTable.Width.SCROLL) {
+
+          if (parentSizeMayHaveChanged) {
+            let lastScrollTop = p.table ? p.table.scrollTop : 0,
+              lastScrollLeft = p.table ? p.table.scrollLeft : 0;
+
+            // BUGFIX: Relayout before recording the widths
+            webkitRenderBugfix(this.el);
+
+            p.table.crollTop = lastScrollTop;
+            p.table.scrollLeft = lastScrollLeft;
+            p.header.scrollLeft = lastScrollLeft;
+          }
+
+          p.eventsSink.add(p.table, 'scroll', this._onTableScrolledHorizontally.bind(this));
+        }
+
+        return this;
+      }
+
+      /**
+       * @private
+       * @returns {boolean}
+       */
+      _isTableRtl() {
+        return getComputedStyle(this._p.table).direction === 'rtl';
+      }
+
+      /**
+       * @private
+       * @param {Object} column column object
+       * @returns {string}
+       */
+      _serializeColumnWidth(column) {
+        return column.widthMode === ColumnWidthMode.AUTO ? 'auto' :
+        column.widthMode === ColumnWidthMode.RELATIVE ? column.width * 100 + '%' :
+        column.width;
+      }
+
+      /**
+       * @private
+       * @param {HTMLElement} el
+       */
+      _disableCssSelect(el) {
+        const style = el.style;
+        // Disable these to allow our own context menu events without interruption
+        style['-webkit-touch-callout'] = 'none';
+        style['-webkit-user-select'] = 'none';
+        style['-moz-user-select'] = 'none';
+        style['-ms-user-select'] = 'none';
+        style['-o-user-select'] = 'none';
+        style['user-select'] = 'none';
+      }
+
+      /**
+       * @private
+       * @param {HTMLElement} el
+       */
+      _cellMouseOverEvent(el) {
+        const o = this._o,p = this._p;
+
+        let elInner = el.firstElementChild;
+
+        if (!(elInner.scrollWidth - elInner.clientWidth > 1 ||
+        elInner.scrollHeight - elInner.clientHeight > 1))
+        return;
+
+        this.hideCellPreview();
+        p.abortCellPreview = false;
+
+        const rowEl = el.parentElement;
+        const previewCell = createElement('div');
+        previewCell.innerHTML = el.innerHTML;
+        previewCell.className = o.cellPreviewClassName;
+
+        let isHeaderCell = el.classList.contains(`${o.tableClassName}-header-cell`);
+        if (isHeaderCell) {
+          previewCell.classList.add('header');
+          if (el.classList.contains('sortable')) {
+            previewCell.classList.add('sortable');
+          }
+
+          previewCell.draggable = true;
+
+          this._bindHeaderColumnEvents(previewCell);
+        }
+
+        const elStyle = getComputedStyle(el);
+        const elInnerStyle = getComputedStyle(elInner);
+
+        let paddingL = parseFloat(elStyle.paddingLeft) || 0,
+          paddingR = parseFloat(elStyle.paddingRight) || 0,
+          paddingT = parseFloat(elStyle.paddingTop) || 0,
+          paddingB = parseFloat(elStyle.paddingBottom) || 0;
+
+        let requiredWidth = elInner.scrollWidth + (el.clientWidth - elInner.offsetWidth);
+
+        let borderBox = elStyle.boxSizing === 'border-box';
+        if (borderBox) {
+          previewCell.style.boxSizing = 'border-box';
+        } else {
+          requiredWidth -= paddingL + paddingR;
+          previewCell.style.marginTop = (parseFloat(elStyle.borderTopWidth) || 0) + 'px';
+        }
+
+        if (!p.transparentBgColor1) {
+          // Detect browser's transparent spec
+          let tempDiv = document.createElement('div');
+          document.body.appendChild(tempDiv);
+          tempDiv.style.backgroundColor = 'transparent';
+          p.transparentBgColor1 = getComputedStyle(tempDiv).backgroundColor;
+          tempDiv.style.backgroundColor = 'rgba(0,0,0,0)';
+          p.transparentBgColor2 = getComputedStyle(tempDiv).backgroundColor;
+          tempDiv.remove();
+        }
+
+        let css = {
+          'box-sizing': borderBox ? 'border-box' : 'content-box',
+          'width': requiredWidth,
+          'min-height': Math.max(Css_js.getElementHeight(el), parseFloat(elStyle.minHeight) || 0) + 'px',
+          'padding-left': paddingL,
+          'padding-right': paddingR,
+          'padding-top': paddingT,
+          'padding-bottom': paddingB,
+          'overflow': 'hidden',
+          'position': 'absolute',
+          'z-index': '-1',
+          'left': '0',
+          'top': '0',
+          'cursor': elStyle.cursor
+        };
+
+        let bgColor = elStyle.backgroundColor;
+        if (bgColor === p.transparentBgColor1 || bgColor === p.transparentBgColor2) {
+          bgColor = getComputedStyle(rowEl).backgroundColor;
+        }
+        if (bgColor === p.transparentBgColor1 || bgColor === p.transparentBgColor2) {
+          bgColor = '#fff';
+        }
+        css['background-color'] = bgColor;
+
+        Css_js.setCssProps(previewCell, css);
+        Css_js.setCssProps(previewCell.firstChild, {
+          'direction': elInnerStyle.direction,
+          'white-space': elInnerStyle.whiteSpace,
+          'min-height': elInnerStyle.minHeight,
+          'line-height': elInnerStyle.lineHeight,
+          'font': elInnerStyle.font
+        });
+
+        this.el.appendChild(previewCell);
+
+        if (isHeaderCell) {
+          this._disableCssSelect(previewCell);
+        }
+
+        previewCell['rowVIndex'] = rowEl['vIndex'];
+        let rowIndex = previewCell['rowIndex'] = rowEl['index'];
+        previewCell['columnName'] = p.visibleColumns[nativeIndexOf.call(rowEl.childNodes, el)].name;
+
+        try {
+          let selection = SelectionHelper.saveSelection(el);
+          if (selection)
+          SelectionHelper.restoreSelection(previewCell, selection);
+        } catch (ignored) {/* we're ok with this */}
+
+        this.emit(
+          'cellpreview', {
+            el: previewCell.firstElementChild,
+            name: previewCell['columnName'],
+            rowIndex: rowIndex,
+            rowData: rowIndex == null ? null : p.rows[rowIndex],
+            cell: el,
+            cellEl: elInner
+          }
+        );
+
+        if (p.abortCellPreview) {
+          previewCell.remove();
+          return;
+        }
+
+        if (rowIndex != null) {
+          previewCell.addEventListener('click', (event) => {
+            this.emit('rowclick', {
+              event: event,
+              filteredRowIndex: rowEl['vIndex'],
+              rowIndex: rowIndex,
+              rowEl: rowEl,
+              rowData: p.rows[rowIndex]
+            });
+          });
+        }
+
+        let parent = this.el;
+        let scrollParent = parent === window ? document : parent;
+
+        const parentStyle = getComputedStyle(parent);
+
+        let offset = Css_js.getElementOffset(el);
+        let parentOffset = Css_js.getElementOffset(parent);
+        let rtl = elStyle.float === 'right';
+        let prop = rtl ? 'right' : 'left';
+
+        // Handle RTL, go from the other side
+        if (rtl) {
+          let windowWidth = window.innerWidth;
+          offset.right = windowWidth - (offset.left + Css_js.getElementWidth(el, true, true, true));
+          parentOffset.right = windowWidth - (parentOffset.left + Css_js.getElementWidth(parent, true, true, true));
+        }
+
+        // If the parent has borders, then it would offset the offset...
+        offset.left -= parseFloat(parentStyle.borderLeftWidth) || 0;
+        if (prop === 'right')
+        offset.right -= parseFloat(parentStyle.borderRightWidth) || 0;
+        offset.top -= parseFloat(parentStyle.borderTopWidth) || 0;
+
+        // Handle border widths of the element being offset
+        offset[prop] += parseFloat(elStyle[`border-${prop}-width`]) || 0;
+        offset.top += parseFloat(elStyle.borderTopWidth) || parseFloat(elStyle.borderBottomWidth) || 0;
+
+        // Subtract offsets to get offset relative to parent
+        offset.left -= parentOffset.left;
+        if (prop === 'right')
+        offset.right -= parentOffset.right;
+        offset.top -= parentOffset.top;
+
+        // Constrain horizontally
+        let minHorz = 0,
+          maxHorz = Css_js.getElementWidth(parent, false, false, false) - Css_js.getElementWidth(previewCell, true, true, true);
+        offset[prop] = offset[prop] < minHorz ?
+        minHorz :
+        offset[prop] > maxHorz ? maxHorz : offset[prop];
+
+        // Constrain vertically
+        let totalHeight = Css_js.getElementHeight(el, true, true, true);
+        let maxTop = scrollParent.scrollTop + Css_js.getElementHeight(parent, true) - totalHeight;
+        if (offset.top > maxTop) {
+          offset.top = Math.max(0, maxTop);
+        }
+
+        // Apply css to preview cell
+        let previewCss = {
+          'top': offset.top + 'px',
+          'z-index': 9999
+        };
+        previewCss[prop] = offset[prop] + 'px';
+        Css_js.setCssProps(previewCell, previewCss);
+
+        previewCell[OriginalCellSymbol] = el;
+        p.cellPreviewCell = previewCell;
+        el[PreviewCellSymbol] = previewCell;
+
+        p._bindCellHoverOut(el);
+        p._bindCellHoverOut(previewCell);
+
+        // Avoid interfering with wheel scrolling the table
+        previewCell.addEventListener('wheel', () => {
+          // Let the table naturally scroll with the wheel
+          this.hideCellPreview();
+        });
+      }
+
+      /**
+       * @private
+       * @param {HTMLElement} _el
+       */
+      _cellMouseOutEvent(_el) {
+        this.hideCellPreview();
+      }
+
+      /**
+       * Hides the current cell preview,
+       * or prevents the one that is currently trying to show (in the 'cellpreview' event)
+       * @public
+       * @expose
+       * @returns {DGTable} self
+       */
+      hideCellPreview() {
+        const p = this._p;
+
+        if (p.cellPreviewCell) {
+          let previewCell = p.cellPreviewCell;
+          let origCell = previewCell[OriginalCellSymbol];
+          let selection;
+
+          try {
+            selection = SelectionHelper.saveSelection(previewCell);
+          } catch (ignored) {/* we're ok with this */}
+
+          p.cellPreviewCell.remove();
+          p._unbindCellHoverOut(origCell);
+          p._unbindCellHoverOut(previewCell);
+
+          try {
+            if (selection)
+            SelectionHelper.restoreSelection(origCell, selection);
+          } catch (ignored) {/* we're ok with this */}
+
+          this.emit('cellpreviewdestroy', {
+            el: previewCell.firstChild,
+            name: previewCell['columnName'],
+            rowIndex: previewCell['rowIndex'],
+            rowData: previewCell['rowIndex'] == null ? null : p.rows[previewCell['rowIndex']],
+            cell: origCell,
+            cellEl: origCell.firstChild
+          });
+
+          delete origCell[PreviewCellSymbol];
+          delete previewCell[OriginalCellSymbol];
+
+          p.cellPreviewCell = null;
+          p.abortCellPreview = false;
+        } else {
+          p.abortCellPreview = true;
+        }
+
+        return this;
+      }
+    }
+
+    /**
+     * @public
+     * @expose
+     * @type {string}
+     */
+    DGTable.VERSION = '@@VERSION';
+
+    // It's a shame the Google Closure Compiler does not support exposing a nested @param
+
+    /**
+     * @typedef {Object} SERIALIZED_COLUMN
+     * @property {number|null|undefined} [order=0]
+     * @property {string|null|undefined} [width='auto']
+     * @property {boolean|null|undefined} [visible=true]
+     * */
+
+    /**
+     * @typedef {Object} SERIALIZED_COLUMN_SORT
+     * @property {string|null|undefined} [column='']
+     * @property {boolean|null|undefined} [descending=false]
+     * */
+
+    /**
+     * @enum {ColumnWidthMode|number|undefined}
+     * @const
+     * @typedef {ColumnWidthMode}
+     */
+    const ColumnWidthMode = {
+      /** @const*/AUTO: 0,
+      /** @const*/ABSOLUTE: 1,
+      /** @const*/RELATIVE: 2
+    };
+
+    /**
+     * @enum {DGTable.Width|string|undefined}
+     * @const
+     * @typedef {DGTable.Width}
+     */
+    DGTable.Width = {
+      /** @const*/NONE: 'none',
+      /** @const*/AUTO: 'auto',
+      /** @const*/SCROLL: 'scroll'
+    };
+
+    return DGTable;
+
+}));
+
+//# sourceMappingURL=lib.umd.js.map