canvas-datagrid 0.4.2 → 0.4.5

package/dist/canvas-datagrid.debug.js

@@ -1153,8 +1153,131 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
       });
     }
   }
+  /**
+   * Return a tuple if the user selected contiguous columns, otherwise `null`.
+   * Info: Because the user may reorder the columns,
+   * the schemaIndex of the first item may be greater than the schemaIndex of the second item,
+   * but the columnIndex of the firs item must less than the columnIndex of the second item.
+   * @param {any[]} schema from `self.getSchema()`
+   * @returns {any[]} column schemas tuple (each schema has an additional field `schemaIndex`)
+   */
+
+
+  function getSelectedContiguousColumns(ev, schema) {
+    var memoKey = '__contiguousColumns';
+    if (Array.isArray(ev[memoKey]) || ev[memoKey] === null) return ev[memoKey];
+    ev[memoKey] = null;
+    if (!Array.isArray(self.selections) || self.selections.length === 0) return;
+    var selection = self.selections[0];
+    if (!selection || selection.length === 0) return;
+
+    for (var rowIndex = 0; rowIndex < self.viewData.length; rowIndex++) {
+      var row = self.viewData[rowIndex];
+      if (!row) continue;
+      var compare = self.selections[rowIndex];
+      if (!compare) return;
+      if (compare.length !== selection.length) return;
+
+      for (var i = 0; i < selection.length; i++) {
+        if (selection[i] !== compare[i]) return;
+      }
+    }
+
+    selection.sort(function (a, b) {
+      return a - b;
+    });
+    /** @type {number[][]} */
+
+    var ranges = [];
+    var begin = selection[0];
+    var end = selection[0];
+
+    for (var _i = 1; _i < selection.length; _i++) {
+      var orderIndex = selection[_i];
+
+      if (orderIndex === end + 1) {
+        end = orderIndex;
+        continue;
+      }
+
+      ranges.push([begin, end]);
+      begin = orderIndex;
+      end = orderIndex;
+    }
+
+    ranges.push([begin, end]);
+    var currentOrderIndex = ev.cell.columnIndex;
+    var matchedRange = ranges.find(function (range) {
+      return currentOrderIndex >= range[0] && currentOrderIndex <= range[1] && range[0] !== range[1];
+    });
+    if (!matchedRange) return;
+    /** @type {number[]} orders[index] => columnIndex */
+
+    var orders = self.orders.columns;
+    if (!Array.isArray(orders)) return;
+    var matchedSchema = matchedRange.map(function (orderIndex) {
+      var schemaIndex = orders[orderIndex];
+      var thisSchema = schema[schemaIndex];
+      return Object.assign({}, thisSchema, {
+        orderIndex: orderIndex
+      });
+    });
+    if (matchedSchema.findIndex(function (it) {
+      return !it;
+    }) >= 0) return;
+    return ev[memoKey] = matchedSchema;
+  }
+  /**
+   * @param {boolean} [allowOnlyOneRow]
+   * @returns {number[]} a rowIndex tuple. It can contains one row index or two row indexes.
+   */
+
+
+  function getSelectedContiguousRows(allowOnlyOneRow) {
+    var range = [];
+    var prev = -2;
+    var ok = true;
+    self.selections.forEach(function (row, index) {
+      if (!ok) return;
+
+      if (prev < -1) {
+        prev = index;
+        range[0] = index;
+        return;
+      }
+
+      if (index !== prev + 1 || !row || row.length === 0) {
+        ok = false;
+        return;
+      }
+
+      prev = index;
+      range[1] = index;
+    });
+
+    if (ok) {
+      if (range.length === 1) return allowOnlyOneRow ? range : null;
+      return range;
+    }
+  }
 
   function addDefaultContextMenuItem(e) {
+    var schema = self.getSchema();
+    /**
+     * A map between columnIndex and column data
+     * @type {Map<string,any>}
+     */
+
+    var columns;
+
+    var getColumnsMap = function getColumnsMap() {
+      if (!columns) columns = new Map(schema.map(function (_col) {
+        return [_col.columnIndex, _col];
+      }));
+      return columns;
+    };
+
+    var isSorting = self.orderings.columns && self.orderings.columns.length > 0;
     var isNormalCell = !(e.cell.isBackground || e.cell.isColumnHeaderCellCap || e.cell.isScrollBar || e.cell.isCorner || e.cell.isRowHeader) && e.cell.header;
 
     if (self.attributes.showFilter && isNormalCell) {
@@ -1221,17 +1344,30 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
         //     columnIndex: columnOrderIndex,
         var columnOrderIndex = e.cell.columnIndex;
         var columnIndex = self.orders.columns[columnOrderIndex];
+        var contiguousColumns = getSelectedContiguousColumns(e, schema);
+        var title = '';
+
+        if (contiguousColumns) {
+          title = contiguousColumns.map(function (col) {
+            return col.title || col.name;
+          }).join('-');
+        } else {
+          var column = schema[columnIndex];
+          if (column) title = column.title || column.name;
+        }
+
         e.items.push({
-          title: self.attributes.hideColumnText.replace(/%s/gi, e.cell.header.title || e.cell.header.name),
+          title: self.attributes.hideColumnText.replace(/%s/gi, title),
           click: function click(ev) {
-            self.getSchema()[columnIndex].hidden = true;
             ev.preventDefault();
             self.stopPropagation(ev);
             self.disposeContextMenu();
-            self.setStorageData();
-            setTimeout(function () {
-              self.resize(true);
-            }, 10);
+
+            if (contiguousColumns) {
+              self.hideColumns(contiguousColumns[0].orderIndex, contiguousColumns[1].orderIndex);
+            } else {
+              self.hideColumns(columnOrderIndex);
+            }
           }
         });
       }
@@ -1279,7 +1415,50 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
           self.controlInput.focus();
         }
       });
-    } //#region group/ungroup columns
+    } //#region hide rows
+
+
+    var canHideRows = !isSorting && e.cell.isRowHeader && e.cell.header;
+
+    if (canHideRows) {
+      var range = getSelectedContiguousRows(true);
+
+      if (range) {
+        var boundRowIndexes = range.map(function (viewRowIndex) {
+          return self.getBoundRowIndexFromViewRowIndex(viewRowIndex);
+        });
+
+        var _title;
+
+        if (boundRowIndexes.length === 1) {
+          if (typeof boundRowIndexes[0] === 'number') _title = boundRowIndexes[0] + 1;else _title = range[0] + 1;
+          _title = self.attributes.showHideRow.replace('%s', _title); // hide one row
+
+          e.items.push({
+            title: _title,
+            click: function click(ev) {
+              ev.preventDefault();
+              self.hideRows(boundRowIndexes[0], boundRowIndexes[0]);
+            }
+          });
+        } else if (boundRowIndexes[0] <= boundRowIndexes[1]) {
+          _title = boundRowIndexes.map(function (it, index) {
+            if (typeof it === 'number') return it + 1;
+            return range[index] + 1;
+          }).join('-');
+          _title = self.attributes.showHideRows.replace('%s', _title); // hide rows
+
+          e.items.push({
+            title: _title,
+            click: function click(ev) {
+              ev.preventDefault();
+              self.hideRows(boundRowIndexes[0], boundRowIndexes[1]);
+            }
+          });
+        }
+      }
+    } //#endregion hide rows
+    //#region group/ungroup columns
 
 
     var groupAreaHeight = self.getColumnGroupAreaHeight();
@@ -1352,31 +1531,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 
     var canGroupByColumns = self.attributes.allowGroupingColumns && e.cell.isColumnHeader && e.cell.header && e.cell.header.index > 0;
     var canUngroupColumns = self.attributes.allowGroupingColumns && e.cell.isColumnHeader;
-    var canGroupByRows = self.attributes.allowGroupingRows && e.cell.isRowHeader && e.cell.header;
+    var canGroupByRows = !isSorting && self.attributes.allowGroupingRows && e.cell.isRowHeader && e.cell.header;
     var canUngroupRows = self.attributes.allowGroupingRows && e.cell.isRowHeader;
-    /**
-     * The value for storing the return value from `self.getSchema()`
-     * @type {any[]}
-     */
-
-    var schema;
-    /**
-     * A map between columnIndex and column data
-     * @type {Map<string,any>}
-     */
-
-    var columns;
-
-    var getColumnsMap = function getColumnsMap() {
-      if (!columns) {
-        if (!schema) schema = self.getSchema();
-        columns = new Map(schema.map(function (_col) {
-          return [_col.columnIndex, _col];
-        }));
-      }
-
-      return columns;
-    };
 
     if (canGroupByColumns) {
       /** @type {number[]} */
@@ -1405,11 +1561,11 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
         for (var i = 0; i < groupIndexes.length; i++) {
           var _columnIndex = groupIndexes[i];
 
-          var column = _columns.get(_columnIndex);
+          var _column = _columns.get(_columnIndex);
 
-          if (column) {
-            groupNames.push(column.name);
-            groupTitles.push(column.title || column.name || column.index);
+          if (_column) {
+            groupNames.push(_column.name);
+            groupTitles.push(_column.title || _column.name || _column.index);
           }
         }
 
@@ -1433,8 +1589,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 
       var _columns2 = getColumnsMap();
 
-      var _loop = function _loop(_i) {
-        var _groups$_i = groups[_i],
+      var _loop = function _loop(_i2) {
+        var _groups$_i = groups[_i2],
             from = _groups$_i.from,
             to = _groups$_i.to;
 
@@ -1457,44 +1613,26 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
         }
       };
 
-      for (var _i = 0; _i < groups.length; _i++) {
-        _loop(_i);
+      for (var _i2 = 0; _i2 < groups.length; _i2++) {
+        _loop(_i2);
       }
     }
 
     if (canGroupByRows) {
-      var range = [];
-      var prev = -2;
-      var ok = true;
-      self.selections.forEach(function (row, index) {
-        if (!ok) return;
-
-        if (prev < -1) {
-          prev = index;
-          range[0] = index;
-          return;
-        }
+      var _range = getSelectedContiguousRows(false) || [];
 
-        if (index !== prev + 1 || !row || row.length === 0) {
-          ok = false;
-          return;
-        }
-
-        prev = index;
-        range[1] = index;
-      });
-      var rangeTitle = range.map(function (rowIndex) {
+      var rangeTitle = _range.map(function (rowIndex) {
         var index = self.getBoundRowIndexFromViewRowIndex(rowIndex);
         if (typeof index === 'number') return index + 1;
         return rowIndex + 1;
       }).join('-');
 
-      if (ok && range.length === 2 && self.isNewGroupRangeValid(self.groupedRows, range[0], range[1])) {
+      if (_range.length === 2 && self.isNewGroupRangeValid(self.groupedRows, _range[0], _range[1])) {
         e.items.push({
           title: self.attributes.showGroupRows.replace('%s', rangeTitle),
           click: function click(ev) {
             ev.preventDefault();
-            self.groupRows(range[0], range[1]);
+            self.groupRows(_range[0], _range[1]);
           }
         });
       }
@@ -1505,8 +1643,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 
       var _groups = self.getGroupsRowBelongsTo(rowIndex);
 
-      var _loop2 = function _loop2(_i2) {
-        var _groups$_i2 = _groups[_i2],
+      var _loop2 = function _loop2(_i3) {
+        var _groups$_i2 = _groups[_i3],
             from = _groups$_i2.from,
             to = _groups$_i2.to;
         var rangeTitle = [from, to].map(function (rowIndex) {
@@ -1524,8 +1662,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
         });
       };
 
-      for (var _i2 = 0; _i2 < _groups.length; _i2++) {
-        _loop2(_i2);
+      for (var _i3 = 0; _i3 < _groups.length; _i3++) {
+        _loop2(_i3);
       }
     } //#endregion group/ungroup columns
 
@@ -1617,7 +1755,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
     function createDisposeEvent() {
       requestAnimationFrame(function () {
         document.addEventListener('click', self.disposeContextMenu);
-        document.removeEventListener('mouseup', createDisposeEvent);
+        window.removeEventListener('mouseup', createDisposeEvent);
       });
     }
 
@@ -1665,7 +1803,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
       self.contextMenu = createContextMenu(ev, contextPosition, items);
 
       if (e.type == 'mousedown') {
-        document.addEventListener('mouseup', createDisposeEvent);
+        window.addEventListener('mouseup', createDisposeEvent);
       } else {
         createDisposeEvent();
       }
@@ -1701,10 +1839,10 @@ __webpack_require__.r(__webpack_exports__);
 
 /* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(self) {
   self.defaults = {
-    attributes: [['allowColumnReordering', true], ['allowColumnResize', true], ['allowColumnResizeFromCell', false], ['allowFreezingRows', false], ['allowFreezingColumns', false], ['allowMovingSelection', true], ['allowRowHeaderResize', true], ['allowRowReordering', false], ['allowRowResize', true], ['allowRowResizeFromCell', false], ['allowSorting', true], ['allowGroupingRows', true], ['allowGroupingColumns', true], ['animationDurationShowContextMenu', 50], ['animationDurationHideContextMenu', 50], ['autoGenerateSchema', false], ['autoResizeColumns', false], ['autoResizeRows', false], ['autoScrollOnMousemove', false], ['autoScrollMargin', 5], ['blanksText', '(Blanks)'], ['borderDragBehavior', 'none'], ['borderResizeZone', 10], ['clearSettingsOptionText', 'Clear saved settings'], ['columnHeaderClickBehavior', 'sort'], ['columnSelectorHiddenText', '&nbsp;&nbsp;&nbsp;'], ['columnSelectorText', 'Add/Remove columns'], ['columnSelectorVisibleText', "\u2713"], ['contextHoverScrollAmount', 2], ['contextHoverScrollRateMs', 5], ['copyHeadersOnSelectAll', true], ['copyText', 'Copy'], ['debug', false], ['editable', true], ['ellipsisText', '...'], ['filterOptionText', 'Filter %s'], ['filterTextPrefix', '(filtered) '], ['filterFrozenRows', true], ['globalRowResize', false], ['hideColumnText', 'Hide %s'], ['hoverMode', 'cell'], ['keepFocusOnMouseOut', false], ['maxAutoCompleteItems', 200], ['multiLine', false], ['name', ''], ['pageUpDownOverlap', 1], ['pasteText', 'Paste'], ['persistantSelectionMode', false], ['removeFilterOptionText', 'Remove filter on %s'], ['reorderDeadZone', 3], ['resizeScrollZone', 20], ['rowGrabZoneSize', 5], ['columnGrabZoneSize', 30], ['saveAppearance', true], ['scrollAnimationPPSThreshold', 0.75], ['scrollPointerLock', false], ['scrollRepeatRate', 75], ['selectionFollowsActiveCell', false], ['selectionHandleBehavior', 'none'], ['selectionMode', 'cell'], ['selectionScrollIncrement', 20], ['selectionScrollZone', 20], ['showClearSettingsOption', true], ['showColumnHeaders', true], ['showColumnSelector', true], ['showCopy', false], ['showFilter', true], ['showFilterInCell', false], ['showNewRow', false], ['showOrderByOption', true], ['showOrderByOptionTextAsc', 'Order by %s ascending'], ['showOrderByOptionTextDesc', 'Order by %s descending'], //#region grouping
+    attributes: [['allowColumnReordering', true], ['allowColumnResize', true], ['allowColumnResizeFromCell', false], ['allowFreezingRows', false], ['allowFreezingColumns', false], ['allowMovingSelection', true], ['allowRowHeaderResize', true], ['allowRowReordering', false], ['allowRowResize', true], ['allowRowResizeFromCell', false], ['allowSorting', true], ['allowGroupingRows', true], ['allowGroupingColumns', true], ['animationDurationShowContextMenu', 50], ['animationDurationHideContextMenu', 50], ['autoGenerateSchema', false], ['autoResizeColumns', false], ['autoResizeRows', false], ['autoScrollOnMousemove', false], ['autoScrollMargin', 5], ['allowShrinkingSelection', false], ['blanksText', '(Blanks)'], ['borderDragBehavior', 'none'], ['borderResizeZone', 10], ['clearCellsWhenShrinkingSelection', false], ['clearSettingsOptionText', 'Clear saved settings'], ['columnHeaderClickBehavior', 'sort'], ['columnSelectorHiddenText', '&nbsp;&nbsp;&nbsp;'], ['columnSelectorText', 'Add/Remove columns'], ['columnSelectorVisibleText', "\u2713"], ['contextHoverScrollAmount', 2], ['contextHoverScrollRateMs', 5], ['copyHeadersOnSelectAll', true], ['copyText', 'Copy'], ['debug', false], ['editable', true], ['ellipsisText', '...'], ['filterOptionText', 'Filter %s'], ['filterTextPrefix', '(filtered) '], ['filterFrozenRows', true], ['globalRowResize', false], ['hideColumnText', 'Hide %s'], ['showUnhideColumnsIndicator', false], ['showUnhideRowsIndicator', false], ['showHideRow', 'Hide row %s'], ['showHideRows', 'Hide rows %s'], ['hoverMode', 'cell'], ['keepFocusOnMouseOut', false], ['maxAutoCompleteItems', 200], ['multiLine', false], ['name', ''], ['pageUpDownOverlap', 1], ['pasteText', 'Paste'], ['persistantSelectionMode', false], ['removeFilterOptionText', 'Remove filter on %s'], ['reorderDeadZone', 3], ['resizeScrollZone', 20], ['rowGrabZoneSize', 5], ['columnGrabZoneSize', 30], ['saveAppearance', true], ['scrollAnimationPPSThreshold', 0.75], ['scrollPointerLock', false], ['scrollRepeatRate', 75], ['selectionFollowsActiveCell', false], ['selectionHandleBehavior', 'none'], ['selectionMode', 'cell'], ['selectionScrollIncrement', 20], ['selectionScrollZone', 20], ['showClearSettingsOption', true], ['showColumnHeaders', true], ['showColumnSelector', true], ['showCopy', false], ['showFilter', true], ['showFilterInCell', false], ['showNewRow', false], ['showOrderByOption', true], ['showOrderByOptionTextAsc', 'Order by %s ascending'], ['showOrderByOptionTextDesc', 'Order by %s descending'], //#region grouping
     ['showGroupColumns', 'Group columns %s'], ['showGroupRows', 'Group rows %s'], ['showRemoveGroupColumns', 'Remove group %s'], ['showRemoveGroupRows', 'Remove group %s'], ['showRemoveAllGroupColumns', 'Remove all column groups'], ['showRemoveAllGroupRows', 'Remove all row groups'], ['showExpandAllGroupColumns', 'Expand all column groups'], ['showExpandAllGroupRows', 'Expand all row groups'], ['showCollapseAllGroupColumns', 'Collapse all column groups'], ['showCollapseAllGroupRows', 'Collapse all row groups'], ['columnGroupIndicatorPosition', 'right'], ['rowGroupIndicatorPosition', 'bottom'], //#endregion grouping
     ['showPaste', false], ['showPerformance', false], ['showRowHeaders', true], ['showRowNumbers', true], ['showRowNumberGaps', true], ['singleSelectionMode', false], ['snapToRow', false], ['sortFrozenRows', true], ['touchContextMenuTimeMs', 800], ['touchDeadZone', 3], ['touchEasingMethod', 'easeOutQuad'], ['touchReleaseAcceleration', 1000], ['touchReleaseAnimationDurationMs', 2000], ['touchScrollZone', 20], ['touchSelectHandleZone', 20], ['touchZoomSensitivity', 0.005], ['touchZoomMin', 0.5], ['touchZoomMax', 1.75], ['maxPixelRatio', 2], ['tree', false], ['treeHorizontalScroll', false], ['rowTree', []], ['rowTreeColIndex', 0], ['columnTree', []], ['columnTreeRowStartIndex', 0], ['columnTreeRowEndIndex', 0]],
-    styles: [['activeCellBackgroundColor', 'rgba(255, 255, 255, 1)'], ['activeCellBorderColor', 'rgba(110, 168, 255, 1)'], ['activeCellBorderWidth', 1], ['activeCellColor', 'rgba(0, 0, 0, 1)'], ['activeCellFont', '16px sans-serif'], ['activeCellHoverBackgroundColor', 'rgba(255, 255, 255, 1)'], ['activeCellHorizontalAlignment', 'left'], ['activeCellHoverColor', 'rgba(0, 0, 0, 1)'], ['activeCellOverlayBorderColor', 'rgba(66, 133, 244, 1)'], ['activeCellOverlayBorderWidth', 1], ['activeCellPaddingBottom', 5], ['activeCellPaddingLeft', 5], ['activeCellPaddingRight', 5], ['activeCellPaddingTop', 5], ['activeCellSelectedBackgroundColor', 'rgba(236, 243, 255, 1)'], ['activeCellSelectedColor', 'rgba(0, 0, 0, 1)'], ['activeCellVerticalAlignment', 'center'], ['activeColumnHeaderCellBackgroundColor', 'rgba(225, 225, 225, 1)'], ['activeColumnHeaderCellColor', 'rgba(0, 0, 0, 1)'], ['activeRowHeaderCellBackgroundColor', 'rgba(225, 225, 225, 1)'], ['activeRowHeaderCellColor', 'rgba(0, 0, 0, 1)'], ['autocompleteBottomMargin', 60], ['autosizeHeaderCellPadding', 8], ['autosizePadding', 5], ['buttonActiveBackgroundColor', 'rgba(255, 255, 255, 1)'], ['buttonActiveBorderColor', 'rgba(110, 168, 255, 1)'], ['buttonArrowColor', 'rgba(50, 50, 50, 1)'], ['buttonArrowDownHTML', '&#x25BC;'], ['buttonZIndex', 10000], ['buttonBackgroundColor', 'rgba(255, 255, 255, 1)'], ['buttonBorderColor', 'rgba(172, 172, 172, 1)'], ['buttonHoverBackgroundColor', 'rgba(240, 240, 240, 1)'], ['buttonMenuWindowMargin', 30], ['buttonPadding', '3px'], ['cellAutoResizePadding', 13], ['cellBackgroundColor', 'rgba(255, 255, 255, 1)'], ['cellBorderColor', 'rgba(195, 199, 202, 1)'], ['cellBorderWidth', 1], ['cellColor', 'rgba(0, 0, 0, 1)'], ['cellFont', '16px sans-serif'], ['cellGridHeight', 250], ['cellHeight', 24], ['cellHeightWithChildGrid', 150], ['cellHorizontalAlignment', 'left'], ['cellHoverBackgroundColor', 'rgba(255, 255, 255, 1)'], ['cellHoverColor', 'rgba(0, 0, 0, 1)'], ['cellPaddingBottom', 5], ['cellPaddingLeft', 5], ['cellPaddingRight', 5], ['cellPaddingTop', 5], ['cellSelectedBackgroundColor', 'rgba(236, 243, 255, 1)'], ['cellSelectedColor', 'rgba(0, 0, 0, 1)'], ['cellTreeIconBorderColor', 'rgba(162, 174, 207, 1)'], ['cellTreeIconFillColor', 'rgba(240, 240, 240, 1)'], ['cellTreeIconHoverFillColor', 'rgba(198, 217, 233, 1)'], ['cellTreeIconLineColor', 'rgba(43, 53, 81, 1)'], ['cellTreeIconLineWidth', 1.5], ['cellTreeIconMarginLeft', 0], ['cellTreeIconMarginRight', 5], ['cellTreeIconMarginTop', 6], ['cellTreeIconWidth', 13], ['cellVerticalAlignment', 'center'], ['cellWidth', 250], ['cellWidthWithChildGrid', 250], ['cellWhiteSpace', 'nowrap'], ['cellLineHeight', 1], ['cellLineSpacing', 3], ['childContextMenuArrowColor', 'rgba(43, 48, 43, 1)'], ['childContextMenuArrowHTML', '&#x25BA;'], ['childContextMenuMarginLeft', -11], ['childContextMenuMarginTop', -6], ['columnGroupRowHeight', 25], ['columnHeaderCellBackgroundColor', 'rgba(240, 240, 240, 1)'], ['columnHeaderCellBorderColor', 'rgba(172, 172, 172, 1)'], ['columnHeaderCellBorderWidth', 1], ['columnHeaderCellCapBackgroundColor', 'rgba(240, 240, 240, 1)'], ['columnHeaderCellCapBorderColor', 'rgba(172, 172, 172, 1)'], ['columnHeaderCellCapBorderWidth', 1], ['columnHeaderCellColor', 'rgba(50, 50, 50, 1)'], ['columnHeaderCellFont', '16px sans-serif'], ['columnHeaderCellHeight', 25], ['columnHeaderCellHorizontalAlignment', 'left'], ['columnHeaderCellHoverBackgroundColor', 'rgba(235, 235, 235, 1)'], ['columnHeaderCellHoverColor', 'rgba(0, 0, 0, 1)'], ['columnHeaderCellPaddingBottom', 5], ['columnHeaderCellPaddingLeft', 5], ['columnHeaderCellPaddingRight', 5], ['columnHeaderCellPaddingTop', 5], ['columnHeaderCellVerticalAlignment', 'center'], ['columnHeaderOrderByArrowBorderColor', 'rgba(195, 199, 202, 1)'], ['columnHeaderOrderByArrowBorderWidth', 1], ['columnHeaderOrderByArrowColor', 'rgba(155, 155, 155, 1)'], ['columnHeaderOrderByArrowHeight', 8], ['columnHeaderOrderByArrowMarginLeft', 0], ['columnHeaderOrderByArrowMarginRight', 5], ['columnHeaderOrderByArrowMarginTop', 6], ['columnHeaderOrderByArrowWidth', 13], ['contextFilterButtonBorder', 'solid 1px rgba(158, 163, 169, 1)'], ['contextFilterButtonBorderRadius', '3px'], ['contextFilterButtonHTML', '&#x25BC;'], ['contextFilterInputBackground', 'rgba(255,255,255,1)'], ['contextFilterInputBorder', 'solid 1px rgba(158, 163, 169, 1)'], ['contextFilterInputBorderRadius', '0'], ['contextFilterInputColor', 'rgba(0,0,0,1)'], ['contextFilterInputFontFamily', 'sans-serif'], ['contextFilterInputFontSize', '14px'], ['contextFilterInvalidRegExpBackground', 'rgba(180, 6, 1, 1)'], ['contextFilterInvalidRegExpColor', 'rgba(255, 255, 255, 1)'], ['contextMenuArrowColor', 'rgba(43, 48, 43, 1)'], ['contextMenuArrowDownHTML', '&#x25BC;'], ['contextMenuArrowUpHTML', '&#x25B2;'], ['contextMenuBackground', 'rgba(240, 240, 240, 1)'], ['contextMenuBorder', 'solid 1px rgba(158, 163, 169, 1)'], ['contextMenuBorderRadius', '3px'], ['contextMenuChildArrowFontSize', '12px'], ['contextMenuColor', 'rgba(43, 48, 43, 1)'], ['contextMenuCursor', 'default'], ['contextMenuFilterButtonFontFamily', 'sans-serif'], ['contextMenuFilterButtonFontSize', '10px'], ['contextMenuFilterInvalidExpresion', 'rgba(237, 155, 156, 1)'], ['contextMenuFontFamily', 'sans-serif'], ['contextMenuFontSize', '16px'], ['contextMenuHoverBackground', 'rgba(182, 205, 250, 1)'], ['contextMenuHoverColor', 'rgba(43, 48, 153, 1)'], ['contextMenuItemBorderRadius', '3px'], ['contextMenuItemMargin', '2px'], ['contextMenuLabelDisplay', 'inline-block'], ['contextMenuLabelMargin', '0 3px 0 0'], ['contextMenuLabelMaxWidth', '700px'], ['contextMenuLabelMinWidth', '75px'], ['contextMenuMarginLeft', 3], ['contextMenuMarginTop', -3], ['contextMenuOpacity', '0.98'], ['contextMenuPadding', '2px'], ['contextMenuWindowMargin', 30], ['contextMenuZIndex', 10000], ['cornerCellBackgroundColor', 'rgba(240, 240, 240, 1)'], ['cornerCellBorderColor', 'rgba(202, 202, 202, 1)'], ['debugBackgroundColor', 'rgba(0, 0, 0, .0)'], ['debugColor', 'rgba(255, 15, 24, 1)'], ['debugEntitiesColor', 'rgba(76, 231, 239, 1.00)'], ['debugFont', '11px sans-serif'], ['debugPerfChartBackground', 'rgba(29, 25, 26, 1.00)'], ['debugPerfChartTextColor', 'rgba(255, 255, 255, 0.8)'], ['debugPerformanceColor', 'rgba(252, 255, 37, 1.00)'], ['debugScrollHeightColor', 'rgba(248, 33, 103, 1.00)'], ['debugScrollWidthColor', 'rgba(66, 255, 27, 1.00)'], ['debugTouchPPSXColor', 'rgba(246, 102, 24, 1.00)'], ['debugTouchPPSYColor', 'rgba(186, 0, 255, 1.00)'], ['display', 'inline-block'], ['editCellBackgroundColor', 'white'], ['editCellBorder', 'solid 1px rgba(110, 168, 255, 1)'], ['editCellBoxShadow', '0 2px 5px rgba(0,0,0,0.4)'], ['editCellColor', 'black'], ['editCellFontFamily', 'sans-serif'], ['editCellFontSize', '16px'], ['editCellPaddingLeft', 4], ['editCellZIndex', 10000], ['filterButtonActiveBackgroundColor', 'rgba(225, 225, 225, 1)'], ['filterButtonArrowBorderColor', 'rgba(195, 199, 202, 1)'], ['filterButtonArrowBorderWidth', 1], ['filterButtonArrowClickRadius', 5], ['filterButtonArrowColor', 'rgba(50, 50, 50, 1)'], ['filterButtonArrowHeight', 5], ['filterButtonArrowWidth', 8], ['filterButtonBackgroundColor', 'rgba(240, 240, 240, 1)'], ['filterButtonBorderColor', 'rgba(172, 172, 172, 1)'], ['filterButtonBorderRadius', 3], ['filterButtonHeight', 20], ['filterButtonHoverBackgroundColor', 'rgba(235, 235, 235, 1)'], ['filterButtonMenuOffsetTop', 10], ['filterButtonWidth', 20], ['frozenMarkerHoverColor', 'rgba(236, 243, 255, 1)'], ['frozenMarkerHoverBorderColor', 'rgba(110, 168, 255, 1)'], ['frozenMarkerActiveColor', 'rgba(236, 243, 255, 1)'], ['frozenMarkerActiveBorderColor', 'rgba(110, 168, 255, 1)'], ['frozenMarkerColor', 'rgba(222, 222, 222, 1)'], ['frozenMarkerBorderColor', 'rgba(168, 168, 168, 1)'], ['frozenMarkerBorderWidth', 1], ['frozenMarkerWidth', 2], ['groupingAreaBackgroundColor', 'rgba(240, 240, 240, 1)'], ['gridBackgroundColor', 'rgba(240, 240, 240, 1)'], ['gridBorderCollapse', 'collapse'], ['gridBorderColor', 'rgba(202, 202, 202, 1)'], ['gridBorderWidth', 1], ['groupIndicatorColor', 'rgba(155, 155, 155, 1)'], ['groupIndicatorBackgroundColor', 'rgba(255, 255, 255, 1)'], ['height', 'auto'], ['maxHeight', 'inherit'], ['maxWidth', 'inherit'], ['minColumnWidth', 45], ['minHeight', 'inherit'], ['minRowHeight', 24], ['minWidth', 'inherit'], ['mobileContextMenuMargin', 10], ['mobileEditInputHeight', 30], ['mobileEditFontFamily', 'sans-serif'], ['mobileEditFontSize', '16px'], ['moveOverlayBorderWidth', 1], ['moveOverlayBorderColor', 'rgba(66, 133, 244, 1)'], ['moveOverlayBorderSegments', '12, 7'], ['name', 'default'], ['overflowY', 'auto'], ['overflowX', 'auto'], ['reorderMarkerBackgroundColor', 'rgba(0, 0, 0, 0.1)'], ['reorderMarkerBorderColor', 'rgba(0, 0, 0, 0.2)'], ['reorderMarkerBorderWidth', 1.25], ['reorderMarkerIndexBorderColor', 'rgba(66, 133, 244, 1)'], ['reorderMarkerIndexBorderWidth', 2.75], ['rowGroupColumnWidth', 25], ['rowHeaderCellBackgroundColor', 'rgba(240, 240, 240, 1)'], ['rowHeaderCellBorderColor', 'rgba(200, 200, 200, 1)'], ['rowHeaderCellBorderWidth', 1], ['rowHeaderCellColor', 'rgba(50, 50, 50, 1)'], ['rowHeaderCellFont', '16px sans-serif'], ['rowHeaderCellHeight', 25], ['rowHeaderCellHorizontalAlignment', 'left'], ['rowHeaderCellHoverBackgroundColor', 'rgba(235, 235, 235, 1)'], ['rowHeaderCellHoverColor', 'rgba(0, 0, 0, 1)'], ['rowHeaderCellPaddingBottom', 5], ['rowHeaderCellPaddingLeft', 5], ['rowHeaderCellPaddingRight', 5], ['rowHeaderCellPaddingTop', 5], ['rowHeaderCellRowNumberGapHeight', 5], ['rowHeaderCellRowNumberGapColor', 'rgba(50, 50, 50, 1)'], ['rowHeaderCellSelectedBackgroundColor', 'rgba(217, 217, 217, 1)'], ['rowHeaderCellSelectedColor', 'rgba(50, 50, 50, 1)'], ['rowHeaderCellVerticalAlignment', 'center'], ['rowHeaderCellWidth', 57], ['scrollBarActiveColor', 'rgba(125, 125, 125, 1)'], ['scrollBarBackgroundColor', 'rgba(240, 240, 240, 1)'], ['scrollBarBorderColor', 'rgba(202, 202, 202, 1)'], ['scrollBarBorderWidth', 0.5], ['scrollBarBoxBorderRadius', 4.125], ['scrollBarBoxColor', 'rgba(192, 192, 192, 1)'], ['scrollBarBoxMargin', 2], ['scrollBarBoxMinSize', 15], ['scrollBarBoxWidth', 8], ['scrollBarCornerBackgroundColor', 'rgba(240, 240, 240, 1)'], ['scrollBarCornerBorderColor', 'rgba(202, 202, 202, 1)'], ['scrollBarWidth', 11], ['selectionHandleBorderColor', 'rgba(255, 255, 255, 1)'], ['selectionHandleBorderWidth', 1.5], ['selectionHandleColor', 'rgba(66, 133, 244, 1)'], ['selectionHandleSize', 8], ['selectionHandleType', 'square'], ['selectionOverlayBorderColor', 'rgba(66, 133, 244, 1)'], ['selectionOverlayBorderWidth', 1], ['treeArrowBorderColor', 'rgba(195, 199, 202, 1)'], ['treeArrowBorderWidth', 1], ['treeArrowClickRadius', 5], ['treeArrowColor', 'rgba(155, 155, 155, 1)'], ['treeArrowHeight', 8], ['treeArrowMarginLeft', 0], ['treeArrowMarginRight', 5], ['treeArrowMarginTop', 6], ['treeArrowWidth', 13], ['treeGridHeight', 250], ['width', 'auto']]
+    styles: [['activeCellBackgroundColor', 'rgba(255, 255, 255, 1)'], ['activeCellBorderColor', 'rgba(110, 168, 255, 1)'], ['activeCellBorderWidth', 1], ['activeCellColor', 'rgba(0, 0, 0, 1)'], ['activeCellFont', '16px sans-serif'], ['activeCellHoverBackgroundColor', 'rgba(255, 255, 255, 1)'], ['activeCellHorizontalAlignment', 'left'], ['activeCellHoverColor', 'rgba(0, 0, 0, 1)'], ['activeCellOverlayBorderColor', 'rgba(66, 133, 244, 1)'], ['activeCellOverlayBorderWidth', 1], ['activeCellPaddingBottom', 5], ['activeCellPaddingLeft', 5], ['activeCellPaddingRight', 5], ['activeCellPaddingTop', 5], ['activeCellSelectedBackgroundColor', 'rgba(236, 243, 255, 1)'], ['activeCellSelectedColor', 'rgba(0, 0, 0, 1)'], ['activeCellVerticalAlignment', 'center'], ['activeColumnHeaderCellBackgroundColor', 'rgba(225, 225, 225, 1)'], ['activeColumnHeaderCellColor', 'rgba(0, 0, 0, 1)'], ['activeRowHeaderCellBackgroundColor', 'rgba(225, 225, 225, 1)'], ['activeRowHeaderCellColor', 'rgba(0, 0, 0, 1)'], ['autocompleteBottomMargin', 60], ['autosizeHeaderCellPadding', 8], ['autosizePadding', 5], ['buttonActiveBackgroundColor', 'rgba(255, 255, 255, 1)'], ['buttonActiveBorderColor', 'rgba(110, 168, 255, 1)'], ['buttonArrowColor', 'rgba(50, 50, 50, 1)'], ['buttonArrowDownHTML', '&#x25BC;'], ['buttonZIndex', 10000], ['buttonBackgroundColor', 'rgba(255, 255, 255, 1)'], ['buttonBorderColor', 'rgba(172, 172, 172, 1)'], ['buttonHoverBackgroundColor', 'rgba(240, 240, 240, 1)'], ['buttonMenuWindowMargin', 30], ['buttonPadding', '3px'], ['cellAutoResizePadding', 13], ['cellBackgroundColor', 'rgba(255, 255, 255, 1)'], ['cellBorderColor', 'rgba(195, 199, 202, 1)'], ['cellBorderWidth', 1], ['cellColor', 'rgba(0, 0, 0, 1)'], ['cellFont', '16px sans-serif'], ['cellGridHeight', 250], ['cellHeight', 24], ['cellHeightWithChildGrid', 150], ['cellHorizontalAlignment', 'left'], ['cellHoverBackgroundColor', 'rgba(255, 255, 255, 1)'], ['cellHoverColor', 'rgba(0, 0, 0, 1)'], ['cellPaddingBottom', 5], ['cellPaddingLeft', 5], ['cellPaddingRight', 5], ['cellPaddingTop', 5], ['cellSelectedBackgroundColor', 'rgba(236, 243, 255, 1)'], ['cellSelectedColor', 'rgba(0, 0, 0, 1)'], ['cellTreeIconBorderColor', 'rgba(162, 174, 207, 1)'], ['cellTreeIconFillColor', 'rgba(240, 240, 240, 1)'], ['cellTreeIconHoverFillColor', 'rgba(198, 217, 233, 1)'], ['cellTreeIconLineColor', 'rgba(43, 53, 81, 1)'], ['cellTreeIconLineWidth', 1.5], ['cellTreeIconMarginLeft', 0], ['cellTreeIconMarginRight', 5], ['cellTreeIconMarginTop', 6], ['cellTreeIconWidth', 13], ['cellVerticalAlignment', 'center'], ['cellWidth', 250], ['cellWidthWithChildGrid', 250], ['cellWhiteSpace', 'nowrap'], ['cellLineHeight', 1], ['cellLineSpacing', 3], ['childContextMenuArrowColor', 'rgba(43, 48, 43, 1)'], ['childContextMenuArrowHTML', '&#x25BA;'], ['childContextMenuMarginLeft', -11], ['childContextMenuMarginTop', -6], ['columnGroupRowHeight', 25], ['columnHeaderCellBackgroundColor', 'rgba(240, 240, 240, 1)'], ['columnHeaderCellBorderColor', 'rgba(172, 172, 172, 1)'], ['columnHeaderCellBorderWidth', 1], ['columnHeaderCellCapBackgroundColor', 'rgba(240, 240, 240, 1)'], ['columnHeaderCellCapBorderColor', 'rgba(172, 172, 172, 1)'], ['columnHeaderCellCapBorderWidth', 1], ['columnHeaderCellColor', 'rgba(50, 50, 50, 1)'], ['columnHeaderCellFont', '16px sans-serif'], ['columnHeaderCellHeight', 25], ['columnHeaderCellHorizontalAlignment', 'left'], ['columnHeaderCellHoverBackgroundColor', 'rgba(235, 235, 235, 1)'], ['columnHeaderCellHoverColor', 'rgba(0, 0, 0, 1)'], ['columnHeaderCellPaddingBottom', 5], ['columnHeaderCellPaddingLeft', 5], ['columnHeaderCellPaddingRight', 5], ['columnHeaderCellPaddingTop', 5], ['columnHeaderCellVerticalAlignment', 'center'], ['columnHeaderOrderByArrowBorderColor', 'rgba(195, 199, 202, 1)'], ['columnHeaderOrderByArrowBorderWidth', 1], ['columnHeaderOrderByArrowColor', 'rgba(155, 155, 155, 1)'], ['columnHeaderOrderByArrowHeight', 8], ['columnHeaderOrderByArrowMarginLeft', 0], ['columnHeaderOrderByArrowMarginRight', 5], ['columnHeaderOrderByArrowMarginTop', 6], ['columnHeaderOrderByArrowWidth', 13], ['contextFilterButtonBorder', 'solid 1px rgba(158, 163, 169, 1)'], ['contextFilterButtonBorderRadius', '3px'], ['contextFilterButtonHTML', '&#x25BC;'], ['contextFilterInputBackground', 'rgba(255,255,255,1)'], ['contextFilterInputBorder', 'solid 1px rgba(158, 163, 169, 1)'], ['contextFilterInputBorderRadius', '0'], ['contextFilterInputColor', 'rgba(0,0,0,1)'], ['contextFilterInputFontFamily', 'sans-serif'], ['contextFilterInputFontSize', '14px'], ['contextFilterInvalidRegExpBackground', 'rgba(180, 6, 1, 1)'], ['contextFilterInvalidRegExpColor', 'rgba(255, 255, 255, 1)'], ['contextMenuArrowColor', 'rgba(43, 48, 43, 1)'], ['contextMenuArrowDownHTML', '&#x25BC;'], ['contextMenuArrowUpHTML', '&#x25B2;'], ['contextMenuBackground', 'rgba(240, 240, 240, 1)'], ['contextMenuBorder', 'solid 1px rgba(158, 163, 169, 1)'], ['contextMenuBorderRadius', '3px'], ['contextMenuChildArrowFontSize', '12px'], ['contextMenuColor', 'rgba(43, 48, 43, 1)'], ['contextMenuCursor', 'default'], ['contextMenuFilterButtonFontFamily', 'sans-serif'], ['contextMenuFilterButtonFontSize', '10px'], ['contextMenuFilterInvalidExpresion', 'rgba(237, 155, 156, 1)'], ['contextMenuFontFamily', 'sans-serif'], ['contextMenuFontSize', '16px'], ['contextMenuHoverBackground', 'rgba(182, 205, 250, 1)'], ['contextMenuHoverColor', 'rgba(43, 48, 153, 1)'], ['contextMenuItemBorderRadius', '3px'], ['contextMenuItemMargin', '2px'], ['contextMenuLabelDisplay', 'inline-block'], ['contextMenuLabelMargin', '0 3px 0 0'], ['contextMenuLabelMaxWidth', '700px'], ['contextMenuLabelMinWidth', '75px'], ['contextMenuMarginLeft', 3], ['contextMenuMarginTop', -3], ['contextMenuOpacity', '0.98'], ['contextMenuPadding', '2px'], ['contextMenuWindowMargin', 30], ['contextMenuZIndex', 10000], ['cornerCellBackgroundColor', 'rgba(240, 240, 240, 1)'], ['cornerCellBorderColor', 'rgba(202, 202, 202, 1)'], ['debugBackgroundColor', 'rgba(0, 0, 0, .0)'], ['debugColor', 'rgba(255, 15, 24, 1)'], ['debugEntitiesColor', 'rgba(76, 231, 239, 1.00)'], ['debugFont', '11px sans-serif'], ['debugPerfChartBackground', 'rgba(29, 25, 26, 1.00)'], ['debugPerfChartTextColor', 'rgba(255, 255, 255, 0.8)'], ['debugPerformanceColor', 'rgba(252, 255, 37, 1.00)'], ['debugScrollHeightColor', 'rgba(248, 33, 103, 1.00)'], ['debugScrollWidthColor', 'rgba(66, 255, 27, 1.00)'], ['debugTouchPPSXColor', 'rgba(246, 102, 24, 1.00)'], ['debugTouchPPSYColor', 'rgba(186, 0, 255, 1.00)'], ['display', 'inline-block'], ['editCellBackgroundColor', 'white'], ['editCellBorder', 'solid 1px rgba(110, 168, 255, 1)'], ['editCellBoxShadow', '0 2px 5px rgba(0,0,0,0.4)'], ['editCellColor', 'black'], ['editCellFontFamily', 'sans-serif'], ['editCellFontSize', '16px'], ['editCellPaddingLeft', 4], ['editCellZIndex', 10000], ['filterButtonActiveBackgroundColor', 'rgba(225, 225, 225, 1)'], ['filterButtonArrowBorderColor', 'rgba(195, 199, 202, 1)'], ['filterButtonArrowBorderWidth', 1], ['filterButtonArrowClickRadius', 5], ['filterButtonArrowColor', 'rgba(50, 50, 50, 1)'], ['filterButtonArrowHeight', 5], ['filterButtonArrowWidth', 8], ['filterButtonBackgroundColor', 'rgba(240, 240, 240, 1)'], ['filterButtonBorderColor', 'rgba(172, 172, 172, 1)'], ['filterButtonBorderRadius', 3], ['filterButtonHeight', 20], ['filterButtonHoverBackgroundColor', 'rgba(235, 235, 235, 1)'], ['filterButtonMenuOffsetTop', 10], ['filterButtonWidth', 20], ['frozenMarkerHoverColor', 'rgba(165, 198, 254, 1)'], ['frozenMarkerHoverBorderColor', 'rgba(165, 198, 254, 1)'], ['frozenMarkerActiveColor', 'rgba(165, 198, 254, 0.2)'], ['frozenMarkerActiveBorderColor', 'rgba(165, 198, 254, 0.5)'], ['frozenMarkerActiveHeaderColor', 'rgba(165, 198, 254, 1)'], ['frozenMarkerColor', 'rgba(221, 221, 221, 1)'], ['frozenMarkerBorderColor', 'rgba(221, 221, 221, 1)'], ['frozenMarkerBorderWidth', 1], ['frozenMarkerHeaderColor', 'rgba(188, 188, 188, 1)'], ['frozenMarkerWidth', 4], ['groupingAreaBackgroundColor', 'rgba(240, 240, 240, 1)'], ['gridBackgroundColor', 'rgba(240, 240, 240, 1)'], ['gridBorderCollapse', 'collapse'], ['gridBorderColor', 'rgba(202, 202, 202, 1)'], ['gridBorderWidth', 1], ['groupIndicatorColor', 'rgba(155, 155, 155, 1)'], ['groupIndicatorBackgroundColor', 'rgba(255, 255, 255, 1)'], ['height', 'auto'], ['maxHeight', 'inherit'], ['maxWidth', 'inherit'], ['minColumnWidth', 45], ['minHeight', 'inherit'], ['minRowHeight', 24], ['minWidth', 'inherit'], ['mobileContextMenuMargin', 10], ['mobileEditInputHeight', 30], ['mobileEditFontFamily', 'sans-serif'], ['mobileEditFontSize', '16px'], ['moveOverlayBorderWidth', 1], ['moveOverlayBorderColor', 'rgba(66, 133, 244, 1)'], ['moveOverlayBorderSegments', '12, 7'], ['name', 'default'], ['overflowY', 'auto'], ['overflowX', 'auto'], ['reorderMarkerBackgroundColor', 'rgba(0, 0, 0, 0.1)'], ['reorderMarkerBorderColor', 'rgba(0, 0, 0, 0.2)'], ['reorderMarkerBorderWidth', 1.25], ['reorderMarkerIndexBorderColor', 'rgba(66, 133, 244, 1)'], ['reorderMarkerIndexBorderWidth', 2.75], ['rowGroupColumnWidth', 25], ['rowHeaderCellBackgroundColor', 'rgba(240, 240, 240, 1)'], ['rowHeaderCellBorderColor', 'rgba(200, 200, 200, 1)'], ['rowHeaderCellBorderWidth', 1], ['rowHeaderCellColor', 'rgba(50, 50, 50, 1)'], ['rowHeaderCellFont', '16px sans-serif'], ['rowHeaderCellHeight', 25], ['rowHeaderCellHorizontalAlignment', 'left'], ['rowHeaderCellHoverBackgroundColor', 'rgba(235, 235, 235, 1)'], ['rowHeaderCellHoverColor', 'rgba(0, 0, 0, 1)'], ['rowHeaderCellPaddingBottom', 5], ['rowHeaderCellPaddingLeft', 5], ['rowHeaderCellPaddingRight', 5], ['rowHeaderCellPaddingTop', 5], ['rowHeaderCellRowNumberGapHeight', 5], ['rowHeaderCellRowNumberGapColor', 'rgba(50, 50, 50, 1)'], ['rowHeaderCellSelectedBackgroundColor', 'rgba(217, 217, 217, 1)'], ['rowHeaderCellSelectedColor', 'rgba(50, 50, 50, 1)'], ['rowHeaderCellVerticalAlignment', 'center'], ['rowHeaderCellWidth', 57], ['scrollBarActiveColor', 'rgba(125, 125, 125, 1)'], ['scrollBarBackgroundColor', 'rgba(240, 240, 240, 1)'], ['scrollBarBorderColor', 'rgba(202, 202, 202, 1)'], ['scrollBarBorderWidth', 0.5], ['scrollBarBoxBorderRadius', 4.125], ['scrollBarBoxColor', 'rgba(192, 192, 192, 1)'], ['scrollBarBoxMargin', 2], ['scrollBarBoxMinSize', 15], ['scrollBarBoxWidth', 8], ['scrollBarCornerBackgroundColor', 'rgba(240, 240, 240, 1)'], ['scrollBarCornerBorderColor', 'rgba(202, 202, 202, 1)'], ['scrollBarWidth', 11], ['selectionHandleBorderColor', 'rgba(255, 255, 255, 1)'], ['selectionHandleBorderWidth', 1.5], ['selectionHandleColor', 'rgba(66, 133, 244, 1)'], ['selectionHandleSize', 8], ['selectionHandleType', 'square'], ['fillOverlayBorderColor', 'rgba(127, 127, 127, 1)'], ['fillOverlayBorderWidth', 2], ['selectionOverlayBorderColor', 'rgba(66, 133, 244, 1)'], ['selectionOverlayBorderWidth', 1], ['treeArrowBorderColor', 'rgba(195, 199, 202, 1)'], ['treeArrowBorderWidth', 1], ['treeArrowClickRadius', 5], ['treeArrowColor', 'rgba(155, 155, 155, 1)'], ['treeArrowHeight', 8], ['treeArrowMarginLeft', 0], ['treeArrowMarginRight', 5], ['treeArrowMarginTop', 6], ['treeArrowWidth', 13], ['treeGridHeight', 250], ['unhideIndicatorColor', 'rgba(0, 0, 0, 1)'], ['unhideIndicatorBackgroundColor', 'rgba(255, 255, 255, 1)'], ['unhideIndicatorBorderColor', 'rgba(174, 193, 232, 1)'], ['unhideIndicatorSize', 16], ['width', 'auto']]
   };
 }
 
@@ -2108,6 +2246,16 @@ __webpack_require__.r(__webpack_exports__);
     var cellValueIsEmpty = [null, undefined].indexOf(cell.value) !== -1;
     var shouldClearCellValue = cellValueIsEmpty || inEnterMode;
     self.input.value = shouldClearCellValue ? '' : cell.value;
+    var width = Math.round(self.input.value.length * parseInt(self.style.editCellFontSize, 10) * 0.7 * self.scale);
+
+    if (width + self.style.cellPaddingLeft < cell.width) {
+      width = cell.width - self.style.cellPaddingLeft;
+    } else if (width > self.width - cell.x - self.style.scrollBarWidth) {
+      width = self.width - cell.x - self.style.scrollBarWidth;
+      self.input.style.height = 'auto';
+    }
+
+    self.input.style.width = width + 'px';
     self.input.focus();
     self.input.addEventListener('click', self.stopPropagation);
     self.input.addEventListener('dblclick', self.stopPropagation);
@@ -2191,6 +2339,17 @@ __webpack_require__.r(__webpack_exports__);
 
         self.scrollIntoView(nx, ny);
         self.beginEditAt(nx, ny, e);
+      } else {
+        var _width = Math.round(self.input.value.length * parseInt(self.style.editCellFontSize, 10) * 0.7 * self.scale);
+
+        if (_width + self.style.cellPaddingLeft < cell.width) {
+          _width = cell.width - self.style.cellPaddingLeft;
+        } else if (_width > self.width - cell.x - self.style.scrollBarWidth) {
+          _width = self.width - cell.x - self.style.scrollBarWidth;
+          self.input.style.height = 'auto';
+        }
+
+        self.input.style.width = _width + 'px';
       }
     });
     self.dispatchEvent('beginedit', {
@@ -2521,11 +2680,11 @@ __webpack_require__.r(__webpack_exports__);
     });
     self.eventParent.addEventListener('scroll', self.resize, false);
     self.eventParent.addEventListener('touchstart', self.touchstart, false);
-    self.eventParent.addEventListener('mouseup', self.mouseup, false);
     self.eventParent.addEventListener('mousedown', self.mousedown, false);
     self.eventParent.addEventListener('dblclick', self.dblclick, false);
     self.eventParent.addEventListener('click', self.click, false);
-    document.body.addEventListener('mousemove', self.mousemove);
+    window.addEventListener('mouseup', self.mouseup, false);
+    window.addEventListener('mousemove', self.mousemove);
     self[self.isChildGrid ? 'parentGrid' : 'eventParent'].addEventListener('wheel', self.scrollWheel, false);
     self.canvas.addEventListener('contextmenu', self.contextmenuEvent, false);
     self.controlInput.addEventListener('copy', self.copy);
@@ -2560,6 +2719,14 @@ __webpack_require__.r(__webpack_exports__);
 /*globals XMLSerializer: false, define: true, Blob: false, MutationObserver: false, requestAnimationFrame: false, performance: false, btoa: false*/
 
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -2675,10 +2842,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
   }
   /**
    * @param {number[]} coords [x0,y0, x1,y1, x2,y2, ...]
+   * @param {boolean} [fill] fill the area that construct by these lines but not stroke
    */
 
 
-  function strokeLines(coords) {
+  function drawLines(coords, fill) {
     if (coords.length < 4) return;
     self.ctx.beginPath();
     self.ctx.moveTo(coords[0] + self.canvasOffsetLeft, coords[1] + self.canvasOffsetTop);
@@ -2689,7 +2857,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       self.ctx.lineTo(x, y);
     }
 
-    self.ctx.stroke();
+    if (fill) self.ctx.fill();else self.ctx.stroke();
   }
   /**
    * @param {number} x based-X (left-top)
@@ -2704,8 +2872,72 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     strokeRect(x, y, width, width);
     var cx = x + width * 0.5;
     var cy = y + width * 0.5;
-    strokeLines([x + width * 0.2, cy, x + width * 0.78, cy]);
-    if (collapsed) strokeLines([cx, y + width * 0.22, cx, y + width * 0.8]);
+    drawLines([x + width * 0.2, cy, x + width * 0.78, cy]);
+    if (collapsed) drawLines([cx, y + width * 0.22, cx, y + width * 0.8]);
+  }
+  /**
+   * @param {number} x
+   * @param {number} y
+   * @param {number} size
+   * @param {string} dir Direction of the triangle, one of the 't','b','l' and 'r'
+   * @param {boolean} [active]
+   */
+
+
+  function drawUnhideIndicator(x, y, size, dir, active) {
+    var minPadding = size * 0.2;
+    var maxPadding = size * 0.3;
+    /** The long edge width of the triangle */
+
+    var longEdge = size - 2 * minPadding;
+    /** The median width of the triangle */
+
+    var median = size - 2 * maxPadding;
+    var halfLongEdge = longEdge * 0.5;
+    var x0, y0;
+    var coords, borderCoords;
+
+    switch (dir) {
+      case 'r':
+        x0 = x + maxPadding;
+        y0 = y + minPadding;
+        borderCoords = [x, y, x + size, y, x + size, y + size, x, y + size];
+        coords = [x0, y0, x0, y0 + longEdge, x0 + median, y0 + halfLongEdge];
+        break;
+
+      case 'l':
+        x0 = x + size - maxPadding;
+        y0 = y + minPadding;
+        borderCoords = [x + size, y, x, y, x, y + size, x + size, y + size];
+        coords = [x0, y0, x0, y0 + longEdge, x0 - median, y0 + halfLongEdge];
+        break;
+
+      case 't':
+        x0 = x + minPadding;
+        y0 = y + size - maxPadding;
+        borderCoords = [x, y + size, x, y, x + size, y, x + size, y + size];
+        coords = [x0, y0, x0 + longEdge, y0, x0 + halfLongEdge, y0 - median];
+        break;
+
+      case 'b':
+        x0 = x + minPadding;
+        y0 = y + maxPadding;
+        borderCoords = [x, y, x, y + size, x + size, y + size, x + size, y];
+        coords = [x0, y0, x0 + longEdge, y0, x0 + halfLongEdge, y0 + median];
+        break;
+    }
+
+    if (active) {
+      self.ctx.strokeStyle = self.style.unhideIndicatorBorderColor;
+      self.ctx.lineWidth = 2;
+      drawLines(borderCoords);
+      self.ctx.fillStyle = self.style.unhideIndicatorBackgroundColor;
+      var offset = dir === 'r' || dir === 'b' ? 1 : 0;
+      if (dir === 'l' || dir === 'r') fillRect(x - offset, y, size + offset, size);else fillRect(x, y - offset, size, size + offset);
+    }
+
+    self.ctx.fillStyle = self.style.unhideIndicatorColor;
+    drawLines(coords, true);
   }
 
   function drawOrderByArrow(x, y) {
@@ -3292,7 +3524,18 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     columnGroupsRectInfo = {},
         collapsedColumnGroups = self.getCollapsedColumnGroups(),
         collapsedRowGroups = self.getCollapsedRowGroups(),
-        cellHeight = self.style.cellHeight;
+        cellHeight = self.style.cellHeight,
+        currentRowIndexOffset = 0,
+
+    /** @type {Array<{from:number,plus:number}>} */
+    rowIndexOffsetByHiddenRows = self.hiddenRowRanges.map(function (range) {
+      return {
+        from: range[0],
+        plus: range[1] - range[0] + 1
+      };
+    }).sort(function (a, b) {
+      return a.from - b.from;
+    });
     drawCount += 1;
     p = performance.now();
     self.visibleRowHeights = []; // if data length has changed, there is no way to know
@@ -3407,9 +3650,18 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
           cell.selectionHandle = 'tr';
         }
 
-        if (cell.selectionBorderTop && cell.selectionBorderLeft && self.mobile) {
-          selectionHandles.push([cell, 'tl']);
-          cell.selectionHandle = 'tl';
+        if (cell.selectionBorderTop && cell.selectionBorderLeft) {
+          if (self.mobile) {
+            selectionHandles.push([cell, 'tl']);
+            cell.selectionHandle = 'tl';
+          }
+
+          if (self.fillOverlay.handle) {
+            self.fillOverlay.snapTo = {
+              x: cell.x,
+              y: cell.y
+            };
+          }
         }
 
         if (cell.selectionBorderBottom && cell.selectionBorderLeft && self.mobile) {
@@ -3420,6 +3672,23 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         if (cell.selectionBorderBottom && cell.selectionBorderRight && (self.attributes.selectionHandleBehavior !== 'none' || self.mobile)) {
           selectionHandles.push([cell, 'br']);
           cell.selectionHandle = 'br';
+
+          if (self.fillOverlay.handle) {
+            self.fillOverlay.handle.x = cell.x + cell.width;
+            self.fillOverlay.handle.y = cell.y + cell.height;
+          }
+        }
+
+        if (self.fillOverlay.handle) {
+          // Some corners may not be displaying, so we get at least
+          // one correct axis in order to display a fill overlay.
+          if (self.fillOverlay.snapTo.x === -1 && cell.selectionBorderLeft) {
+            self.fillOverlay.snapTo.x = cell.x;
+          }
+
+          if (self.fillOverlay.snapTo.y === -1 && cell.selectionBorderTop) {
+            self.fillOverlay.snapTo.y = cell.y;
+          }
         }
       }
     }
@@ -3480,7 +3749,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
             isColumnHeaderCellCap = cellStyle === 'columnHeaderCellCap',
             rawValue = rowData ? rowData[header.name] : undefined,
             isGrid = header.type === 'canvas-datagrid',
-            activeHeader = (self.orders.rows[self.activeCell.rowIndex] === rowOrderIndex || self.orders.columns[self.activeCell.columnIndex] === headerIndex) && (columnOrderIndex === -1 || rowOrderIndex === -1) ? isRowHeader ? 'activeRowHeaderCell' : 'activeColumnHeaderCell' : false,
+            activeHeader = (self.orders.rows[self.activeCell.rowIndex] === rowOrderIndex || self.selectedRows.indexOf(rowOrderIndex) >= 0 || self.orders.columns[self.activeCell.columnIndex] === headerIndex || self.selectedColumns.indexOf(headerIndex) >= 0) && (columnOrderIndex === -1 || rowOrderIndex === -1) ? isRowHeader ? 'activeRowHeaderCell' : 'activeColumnHeaderCell' : false,
             val,
             f = self.formatters[header.type || 'string'],
             orderByArrowSize = 0,
@@ -3800,6 +4069,20 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
             hasRowGap = collapsedRowGroups.find(function (group) {
               return group.from === previousRowNumber && group.to === cell.boundRowIndex;
             }) >= 0;
+          } // We don't treat the row index difference from hidden rows as the row gap.
+
+
+          if (hasRowGap && self.hiddenRowRanges.length > 0) {
+            for (var i = 0; i < self.hiddenRowRanges.length; i++) {
+              var _self$hiddenRowRanges = _slicedToArray(self.hiddenRowRanges[i], 2),
+                  beginRowIndex = _self$hiddenRowRanges[0],
+                  endRowIndex = _self$hiddenRowRanges[1];
+
+              if (cell.boundRowIndex === endRowIndex + 1 && previousRowNumber === beginRowIndex - 1) {
+                hasRowGap = false;
+                break;
+              }
+            }
           }
 
           if (hasRowGap) {
@@ -3810,11 +4093,162 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
             fillRect(cell.x, cell.y - barHeight / 2, cell.width, barHeight);
             self.ctx.restore();
           }
-        }
+        } //#region draw unhide indicator for column headers
+
+
+        if (isColumnHeader && self.attributes.showUnhideColumnsIndicator) {
+          var _hovered = self.hovers.unhideIndicator;
+          var size = self.style.unhideIndicatorSize;
+          var cellX = x;
+          var topY = cell.y + Math.max(0.5 * (cell.height - size), 0);
+
+          var isActive = function isActive(orderIndex) {
+            return _hovered && (_hovered.dir === 'l' || _hovered.dir === 'r') && orderIndex >= _hovered.orderIndex0 && orderIndex <= _hovered.orderIndex1;
+          };
+
+          var isHiddenColumn = function isHiddenColumn(columnIndex) {
+            return columnIndex >= 0 && schema[columnIndex] && schema[columnIndex].hidden;
+          };
+
+          var orderIndex0, orderIndex1;
+
+          var drawIndicator = function drawIndicator(leftX, dir, active) {
+            self.visibleUnhideIndicators.push({
+              x: leftX - 1,
+              y: topY - 1,
+              x2: leftX + size + 2,
+              y2: topY + size + 2,
+              orderIndex0: orderIndex0,
+              orderIndex1: orderIndex1,
+              dir: dir
+            });
+
+            if (!active) {
+              var line = cell.text && cell.text.lines && cell.text.lines[0];
+
+              if (line) {
+                var iconsWidth = orderByArrowSize + treeArrowSize;
+                var lineX0 = iconsWidth > 0 ? iconsWidth : line.x;
+                var lineX1 = line.x + line.width;
+                if (leftX + size >= lineX0 && leftX <= lineX1) return;
+              }
+            }
+
+            drawUnhideIndicator(leftX, topY, size, dir, active);
+          }; // end of drawIndicator
+
+
+          var orderIndexPtr = columnOrderIndex - 1;
+          var prevColumnIndex = self.orders.columns[orderIndexPtr];
+
+          if (isHiddenColumn(prevColumnIndex)) {
+            var _active = isActive(prevColumnIndex);
+
+            orderIndex0 = orderIndexPtr;
+            orderIndex1 = orderIndexPtr;
+
+            while (--orderIndexPtr >= 0) {
+              if (isHiddenColumn(self.orders.columns[orderIndexPtr])) orderIndex0 = orderIndexPtr;else break;
+            }
+
+            drawIndicator(cellX, 'r', _active);
+          }
+
+          orderIndexPtr = columnOrderIndex + 1;
+          var nextColumnIndex = self.orders.columns[orderIndexPtr];
+
+          if (isHiddenColumn(nextColumnIndex)) {
+            var _active2 = isActive(nextColumnIndex);
+
+            orderIndex0 = orderIndexPtr;
+            orderIndex1 = orderIndexPtr;
+
+            while (++orderIndexPtr < self.orders.columns.length) {
+              if (isHiddenColumn(self.orders.columns[orderIndexPtr])) orderIndex1 = orderIndexPtr;else break;
+            }
+
+            var indicatorX = x + cell.width - size;
+            drawIndicator(indicatorX, 'l', _active2);
+          }
+        } //#endregion draw unhide indicator for column headers
+        //#region draw unhide indicator for row headers
+
+
+        if (isRowHeader && self.attributes.showUnhideRowsIndicator && self.hiddenRowRanges.length > 0) {
+          // Leo's comment:
+          // from the first row to the last row, `rowIndex` is from 0 to the count of rows
+          // but `boundRowIndex` can be disordered if there are any ordered columns or filtered columns
+          // Like this statement:
+          // console.log(rowIndex, cell.boundRowIndex, cell.formattedValue);
+          // can output the result like this:
+          // 0 1 '2'
+          // 1 3 '4'
+          var _hovered2 = self.hovers.unhideIndicator;
+          var _size = self.style.unhideIndicatorSize;
+          var leftX = cell.x + cell.width - _size - 2;
+          var cellY = y;
+          var topIndicators = {};
+          var bottomIndicators = {};
+          self.hiddenRowRanges.forEach(function (it) {
+            topIndicators[it[0] - 1] = it;
+            bottomIndicators[it[1] + 1] = it;
+          });
+
+          var _rowIndex = cell.rowIndex + currentRowIndexOffset;
+
+          var _isActive = function _isActive() {
+            return _hovered2 && (_hovered2.dir === 't' || _hovered2.dir === 'b') && _rowIndex >= _hovered2.orderIndex0 - 1 && _rowIndex <= _hovered2.orderIndex1 + 1;
+          };
+
+          var _orderIndex, _orderIndex2;
+
+          var _drawIndicator = function _drawIndicator(topY, dir, active) {
+            self.visibleUnhideIndicators.push({
+              x: leftX - 1,
+              y: topY - 1,
+              x2: leftX + _size + 2,
+              y2: topY + _size + 2,
+              orderIndex0: _orderIndex,
+              orderIndex1: _orderIndex2,
+              dir: dir
+            });
+            drawUnhideIndicator(leftX, topY, _size, dir, active);
+          }; // end of drawIndicator
+
+
+          var matched = topIndicators[_rowIndex];
+
+          if (matched) {
+            var indicatorY = cellY + cell.height - _size;
+            var _matched = matched;
+
+            var _matched2 = _slicedToArray(_matched, 2);
+
+            _orderIndex = _matched2[0];
+            _orderIndex2 = _matched2[1];
+
+            _drawIndicator(indicatorY, 't', _isActive());
+          }
+
+          matched = bottomIndicators[_rowIndex];
+
+          if (matched) {
+            var _indicatorY = cellY;
+            var _matched3 = matched;
+
+            var _matched4 = _slicedToArray(_matched3, 2);
+
+            _orderIndex = _matched4[0];
+            _orderIndex2 = _matched4[1];
+
+            _drawIndicator(_indicatorY, 'b', _isActive());
+          }
+        } //#endregion draw unhide indicator for row headers
+
 
         x += cell.width + (bc ? 0 : self.style.cellBorderWidth);
         return cell.width;
-      };
+      }; // end of drawEach
     }
 
     function drawFilterButton(cell, ev) {
@@ -3851,8 +4285,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         // row index + 1. If rowIndex > viewData.length, it's a new row
         // added to the end, and we want to render that new row's number
 
-        var filteredRowNumber = self.viewData && rowIndex < self.viewData.length ? self.getBoundRowIndexFromViewRowIndex(rowIndex) + 1 : self.originalData ? self.originalData.length + 1 : rowOrderIndex + 1;
+        var filteredRowNumber;
+        if (self.viewData && rowIndex < self.viewData.length) filteredRowNumber = self.getBoundRowIndexFromViewRowIndex(rowIndex) + 1;else filteredRowNumber = self.originalData ? self.originalData.length + 1 : rowOrderIndex + 1;
         var rowHeaderValue = self.hasActiveFilters() || self.hasCollapsedRowGroup() ? filteredRowNumber : rowIndex + 1;
+        rowHeaderValue += currentRowIndexOffset;
         var _rowHeaderCell = {
           rowHeaderCell: rowHeaderValue
         };
@@ -3866,6 +4302,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         };
         rowOpen = self.openChildren[rowIndex];
         drawCell(_rowHeaderCell, rowOrderIndex, rowIndex)(headerDescription, -1, -1);
+
+        if (rowIndexOffsetByHiddenRows[0] && rowHeaderValue >= rowIndexOffsetByHiddenRows[0].from) {
+          var _rowIndexOffsetByHidd = rowIndexOffsetByHiddenRows.shift(),
+              plus = _rowIndexOffsetByHidd.plus;
+
+          currentRowIndexOffset += plus;
+        }
       }
     }
 
@@ -4017,7 +4460,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       } //draw frozen columns
 
 
-      x = 0;
+      x = 1;
 
       if (self.attributes.showRowHeaders) {
         x += rowHeaderCellWidth;
@@ -4094,10 +4537,18 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       schema = self.getSchema();
       self.visibleCells = [];
       self.visibleGroups = [];
+      self.visibleUnhideIndicators = [];
       self.canvasOffsetTop = self.isChildGrid ? self.parentNode.offsetTop : 0.5;
       self.canvasOffsetLeft = self.isChildGrid ? self.parentNode.offsetLeft : -0.5;
       h = self.height;
-      w = self.width;
+      w = self.width; // patch for first row being hidden
+
+      var firstRowIndexOffset = rowIndexOffsetByHiddenRows[0];
+
+      if (firstRowIndexOffset && firstRowIndexOffset.from === 0) {
+        currentRowIndexOffset = firstRowIndexOffset.plus;
+        rowIndexOffsetByHiddenRows.shift();
+      }
     }
 
     function drawBackground() {
@@ -4312,7 +4763,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
               if (containsEnd) rightX += toggleHandleSize;
             }
 
-            strokeLines(lineCoords);
+            drawLines(lineCoords);
             ctx.restore();
             pushToVisibleGroups(leftX, rightX);
           };
@@ -4383,13 +4834,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
 
               if (group.from > 0) {
-                var _rowIndex = group.to + 1;
+                var _rowIndex2 = group.to + 1;
 
-                var _row = rowGroupsRectInfo[_rowIndex];
+                var _row = rowGroupsRectInfo[_rowIndex2];
 
                 if (!_row) {
-                  _rowIndex = group.from - 1;
-                  _row = rowGroupsRectInfo[_rowIndex];
+                  _rowIndex2 = group.from - 1;
+                  _row = rowGroupsRectInfo[_rowIndex2];
                   if (!_row) return "continue"; // don't draw this group indicator because it is invisible
 
                   _topY = _row.y + _row.h - toggleHandleSize * 0.5;
@@ -4397,7 +4848,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
                   _topY = _row.y;
                 }
 
-                if (_rowIndex >= self.frozenRow) {
+                if (_rowIndex2 >= self.frozenRow) {
                   var compare = frozenRowsHeight + columnHeaderCellHeight - toggleHandlePadding; // don't draw this group indicator because it is hidden by frozen columns
 
                   if (_topY < compare) return "continue";
@@ -4513,7 +4964,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
               if (containsEnd) bottomY += toggleHandleSize;
             }
 
-            strokeLines(lineCoords);
+            drawLines(lineCoords);
             ctx.restore();
             pushToVisibleGroups(topY, bottomY);
           };
@@ -4545,7 +4996,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       if (self.attributes.allowFreezingRows) {
         // HACK great, another stupid magic number.
         // Background will appear as a 0.5px artifact behind the row freeze bar without this hack
-        y += self.style.frozenMarkerBorderWidth + self.style.frozenMarkerWidth - 0.4999999999;
+        if (y > columnHeaderCellHeight) y += self.style.frozenMarkerWidth;
+        y += self.style.frozenMarkerBorderWidth - 0.4999999999;
       }
 
       self.lastFrozenRowPixel = y;
@@ -4656,14 +5108,16 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         self.ctx.lineWidth = self.style.reorderMarkerIndexBorderWidth;
         self.ctx.strokeStyle = self.style.reorderMarkerIndexBorderColor;
 
-        if (self.currentCell.rowIndex !== self.reorderObject.rowIndex && self.currentCell.rowIndex > -1 && self.currentCell.rowIndex < l) {
+        if (self.selectedRows.indexOf(self.reorderTarget.sortRowIndex) === -1 && self.currentCell.rowIndex !== self.reorderObject.rowIndex && self.currentCell.rowIndex > -1 && self.currentCell.rowIndex < l) {
           addBorderLine(m, self.reorderTarget.sortRowIndex > self.reorderObject.sortRowIndex ? 'b' : 't');
         }
       } else if (self.dragMode === 'column-reorder' && self.reorderObject) {
         var selectedColumns = self.selections[0];
 
-        for (var k = 1; k < selectedColumns.length; k++) {
-          b.width += self.getColumnWidth(self.orders.columns[selectedColumns[k]]);
+        if (selectedColumns) {
+          for (var k = 1; k < selectedColumns.length; k++) {
+            b.width += self.getColumnWidth(self.orders.columns[selectedColumns[k]]);
+          }
         }
 
         b.height = h;
@@ -4677,7 +5131,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         self.ctx.lineWidth = self.style.reorderMarkerIndexBorderWidth;
         self.ctx.strokeStyle = self.style.reorderMarkerIndexBorderColor;
 
-        if (self.currentCell.sortColumnIndex !== self.reorderObject.sortColumnIndex && self.currentCell.sortColumnIndex > -1 && self.currentCell.sortColumnIndex < schema.length) {
+        if (self.selectedColumns.indexOf(self.reorderTarget.sortColumnIndex) === -1 && self.currentCell.sortColumnIndex !== self.reorderObject.sortColumnIndex && self.reorderTarget.columnIndex !== self.reorderObject.columnIndex && self.currentCell.sortColumnIndex > -1 && self.currentCell.sortColumnIndex < schema.length) {
           addBorderLine(m, self.reorderTarget.columnIndex > self.reorderObject.columnIndex ? 'r' : 'l');
         }
       }
@@ -4690,11 +5144,12 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     }
 
     function drawSelectionBorders() {
-      self.ctx.lineWidth = self.style.selectionOverlayBorderWidth;
-      self.ctx.strokeStyle = self.style.selectionOverlayBorderColor;
-
       function dsb(c) {
-        addBorderLine(c[0], c[1]);
+        if (!self.fillOverlay.handle) {
+          self.ctx.lineWidth = self.style.selectionOverlayBorderWidth;
+          self.ctx.strokeStyle = self.style.selectionOverlayBorderColor;
+          addBorderLine(c[0], c[1]);
+        }
       }
 
       selectionBorders.filter(function (c) {
@@ -4718,10 +5173,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         return c[0].rowIndex < self.frozenRow && c[0].columnIndex >= self.frozenColumn;
       }).forEach(dsb);
       self.ctx.restore();
+      drawFillOverlay();
     }
 
     function drawSelectionHandles() {
-      if (self.mobile || self.attributes.allowMovingSelection) {
+      if ((self.mobile || self.attributes.allowMovingSelection) && self.attributes.editable) {
         self.ctx.lineWidth = self.style.selectionHandleBorderWidth;
         self.ctx.strokeStyle = self.style.selectionHandleBorderColor;
         self.ctx.fillStyle = self.style.selectionHandleColor;
@@ -4741,6 +5197,47 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       }
     }
 
+    function drawFillOverlay() {
+      if (!self.fillOverlay.handle || !self.fillOverlay.snapTo) {
+        return;
+      }
+
+      self.ctx.save();
+      var overlay = self.fillOverlay;
+      var handle = overlay.handle;
+      var toX = overlay.snapTo.x;
+      var toY = overlay.snapTo.y; // The cell that the cursor is moving over. This may be unavailable
+      // when the cursor is outside the grid or is pointing to something else.
+      //
+      // When unavailable, we use the actual position of the cursor to draw
+      // the overlay.
+
+      var snap = overlay.snap; // Calculate the X, Y coordinates of the cursor with snap positions and
+      // the direction of the movement in mind.
+      //
+      // When the movement is horizontal, we get the Y coordinate from the handle,
+      // and vice-versa.
+
+      var cursorX = overlay.direction === 'x' ? snap ? snap.x + (overlay.x < toX ? 0 : snap.width) : overlay.x : handle.x;
+      var cursorY = overlay.direction === undefined || overlay.direction === 'y' ? snap ? snap.y + (overlay.y < toY ? 0 : snap.height) : overlay.y : handle.y; // The final coordinates of the rect. We use 'minX' and 'minY' to avoid
+      // drawing on the frozen area.
+
+      var x = Math.max(Math.min(toX, cursorX), overlay.minX);
+      var y = Math.max(Math.min(toY, cursorY), overlay.minY); // Width and height of the rect are the difference between the
+      // coordinates of both the rect and the cursor. The user may be pointing
+      // behind and/or upwards of the rect, so we need to take that into
+      // account.
+
+      var width = Math.max(toX, cursorX) - x;
+      var height = Math.max(toY, cursorY) - y;
+      self.ctx.strokeStyle = self.style.fillOverlayBorderColor;
+      self.ctx.lineWidth = self.style.fillOverlayBorderWidth;
+      self.ctx.setLineDash([3, 3]);
+      strokeRect(x, y, width, height);
+      self.ctx.setLineDash([]);
+      self.ctx.restore();
+    }
+
     function drawActiveCell() {
       if (!aCell) {
         return;
@@ -4771,40 +5268,67 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     }
 
     function drawFrozenMarkers() {
-      if (self.dragStartObject !== undefined) return;
       var my = self.lastFrozenRowPixel - self.style.frozenMarkerWidth,
-          mx = self.lastFrozenColumnPixel - self.style.frozenMarkerBorderWidth,
+          mx = self.lastFrozenColumnPixel - self.style.frozenMarkerWidth,
           xHover = self.currentCell && self.currentCell.style === 'frozen-row-marker',
           yHover = self.currentCell && self.currentCell.style === 'frozen-column-marker';
+      var rowHeaderCellWidth = self.getRowHeaderCellWidth();
       self.ctx.lineWidth = self.style.frozenMarkerBorderWidth;
 
       if (self.attributes.allowFreezingColumns) {
-        self.ctx.fillStyle = yHover ? self.style.frozenMarkerHoverColor : self.style.frozenMarkerColor;
-        self.ctx.strokeStyle = yHover ? self.style.frozenMarkerHoverBorderColor : self.style.frozenMarkerBorderColor;
-        fillRect(mx, 0, self.style.frozenMarkerWidth, self.height);
-        strokeRect(mx, 0, self.style.frozenMarkerWidth, self.height);
-        self.visibleCells.unshift({
-          x: mx,
-          y: 0,
-          height: self.height,
-          width: self.style.frozenMarkerWidth + self.style.frozenMarkerBorderWidth,
-          style: 'frozen-column-marker'
-        });
+        if (!self.freezeMarkerPosition || self.freezeMarkerPosition && self.dragMode === 'frozen-row-marker') {
+          if (mx > self.style.rowHeaderCellWidth) {
+            self.ctx.fillStyle = self.style.frozenMarkerColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerBorderColor;
+            fillRect(mx, 0, self.style.frozenMarkerWidth, self.height);
+            strokeRect(mx, 0, self.style.frozenMarkerWidth, self.height);
+          }
+
+          self.ctx.fillStyle = yHover ? self.style.frozenMarkerHoverColor : self.style.frozenMarkerHeaderColor;
+          self.ctx.strokeStyle = yHover ? self.style.frozenMarkerHoverBorderColor : self.style.frozenMarkerHeaderColor;
+          fillRect(mx, 0, self.style.frozenMarkerWidth, self.style.columnHeaderCellHeight);
+          strokeRect(mx, 0, self.style.frozenMarkerWidth, self.style.columnHeaderCellHeight);
+        }
+
+        if (!self.dragStartObject || self.dragStartObject && self.dragStartObject.style !== 'rowHeaderCell') {
+          self.visibleCells.unshift({
+            x: mx,
+            y: 0,
+            height: self.height,
+            width: self.style.frozenMarkerWidth,
+            // + self.style.frozenMarkerBorderWidth,
+            style: 'frozen-column-marker'
+          });
+        }
       }
 
       if (self.attributes.allowFreezingRows) {
-        self.ctx.fillStyle = xHover ? self.style.frozenMarkerHoverColor : self.style.frozenMarkerColor;
-        self.ctx.strokeStyle = xHover ? self.style.frozenMarkerHoverBorderColor : self.style.frozenMarkerBorderColor;
-        fillRect(0, my, self.width, self.style.frozenMarkerWidth);
-        strokeRect(0, my, self.width, self.style.frozenMarkerWidth);
+        if (!self.freezeMarkerPosition || self.freezeMarkerPosition && self.dragMode === 'frozen-column-marker') {
+          if (my > rowHeaderCellWidth) {
+            self.ctx.fillStyle = self.style.frozenMarkerColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerBorderColor;
+            fillRect(0, my, self.width, self.style.frozenMarkerWidth);
+            strokeRect(0, my, self.width, self.style.frozenMarkerWidth);
+          }
+
+          self.ctx.fillStyle = xHover ? self.style.frozenMarkerHoverColor : self.style.frozenMarkerHeaderColor;
+          self.ctx.strokeStyle = xHover ? self.style.frozenMarkerHoverBorderColor : self.style.frozenMarkerHeaderColor;
+          fillRect(0, my, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+          strokeRect(0, my, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+        }
+
         var height = self.style.frozenMarkerWidth + self.style.frozenMarkerBorderWidth;
-        self.visibleCells.unshift({
-          x: 0,
-          y: my,
-          height: height,
-          width: self.width,
-          style: 'frozen-row-marker'
-        });
+
+        if (!self.dragStartObject || self.dragStartObject && self.dragStartObject.style !== 'columnHeaderCell') {
+          self.visibleCells.unshift({
+            x: 0,
+            y: my,
+            height: height,
+            width: self.width,
+            style: 'frozen-row-marker'
+          });
+        }
+
         rowGroupsFrozenInfo = {
           y: my,
           h: height
@@ -4816,11 +5340,59 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         self.ctx.strokeStyle = self.style.frozenMarkerActiveBorderColor;
 
         if (self.dragMode === 'frozen-column-marker') {
-          fillRect(self.freezeMarkerPosition.x, 0, self.style.frozenMarkerWidth, self.height);
-          strokeRect(self.freezeMarkerPosition.x, 0, self.style.frozenMarkerWidth, self.height);
+          var posX = self.freezeMarkerPosition.x;
+          var nearCell = self.getCellAt(posX, 0);
+          if (self.freezeMarkerPosition.isGrab) posX = mx;
+
+          if (posX > rowHeaderCellWidth) {
+            var _x = nearCell.x - self.style.frozenMarkerWidth - self.style.frozenMarkerBorderWidth;
+
+            if (posX > _x + nearCell.width / 2) _x = _x + nearCell.width;
+            self.ctx.fillStyle = self.style.frozenMarkerColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerBorderColor;
+            fillRect(_x, 0, self.style.frozenMarkerWidth, self.height);
+            strokeRect(_x, 0, self.style.frozenMarkerWidth, self.height);
+            self.ctx.fillStyle = self.style.frozenMarkerHeaderColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerHeaderColor;
+            fillRect(_x, 0, self.style.frozenMarkerWidth, self.style.columnHeaderCellHeight);
+            strokeRect(_x, 0, self.style.frozenMarkerWidth, self.style.columnHeaderCellHeight);
+          }
+
+          self.ctx.fillStyle = self.style.frozenMarkerActiveHeaderColor;
+          self.ctx.strokeStyle = self.style.frozenMarkerActiveBorderColor;
+          fillRect(posX, 0, self.style.frozenMarkerWidth, self.style.columnHeaderCellHeight);
+          strokeRect(posX, 0, self.style.frozenMarkerWidth, self.style.columnHeaderCellHeight);
+          self.ctx.fillStyle = self.style.frozenMarkerActiveColor;
+          fillRect(posX, 0, self.style.frozenMarkerWidth, self.height);
+          strokeRect(posX, 0, self.style.frozenMarkerWidth, self.height);
         } else {
-          fillRect(0, self.freezeMarkerPosition.y, self.width, self.style.frozenMarkerWidth);
-          strokeRect(0, self.freezeMarkerPosition.y, self.width, self.style.frozenMarkerWidth);
+          var posY = self.freezeMarkerPosition.y;
+
+          var _nearCell = self.getCellAt(0, posY);
+
+          if (self.freezeMarkerPosition.isGrab) posY = my;
+
+          if (posY > self.style.columnHeaderCellHeight) {
+            var _y = _nearCell.y - self.style.frozenMarkerWidth - self.style.frozenMarkerBorderWidth;
+
+            if (posY > _y + _nearCell.height / 2) _y = _y + _nearCell.height;
+            self.ctx.fillStyle = self.style.frozenMarkerColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerBorderColor;
+            fillRect(0, _y, self.width, self.style.frozenMarkerWidth);
+            strokeRect(0, _y, self.width, self.style.frozenMarkerWidth);
+            self.ctx.fillStyle = self.style.frozenMarkerHeaderColor;
+            self.ctx.strokeStyle = self.style.frozenMarkerHeaderColor;
+            fillRect(0, _y, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+            strokeRect(0, _y, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+          }
+
+          self.ctx.fillStyle = self.style.frozenMarkerActiveHeaderColor;
+          self.ctx.strokeStyle = self.style.frozenMarkerActiveBorderColor;
+          fillRect(0, posY, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+          strokeRect(0, posY, rowHeaderCellWidth, self.style.frozenMarkerWidth);
+          self.ctx.fillStyle = self.style.frozenMarkerActiveColor;
+          fillRect(0, posY, self.width, self.style.frozenMarkerWidth);
+          strokeRect(0, posY, self.width, self.style.frozenMarkerWidth);
         }
       }
     }
@@ -5024,6 +5596,12 @@ __webpack_require__.r(__webpack_exports__);
 /*globals define: true, MutationObserver: false, requestAnimationFrame: false, performance: false, btoa: false*/
 
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -5103,6 +5681,43 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
   self.getRatio = function () {
     return Math.min(self.attributes.maxPixelRatio, (window.devicePixelRatio || 1) / (self.ctx.webkitBackingStorePixelRatio || self.ctx.mozBackingStorePixelRatio || self.ctx.msBackingStorePixelRatio || self.ctx.oBackingStorePixelRatio || self.ctx.backingStorePixelRatio || 1));
   };
+  /**
+   * @returns {number} dataWidth
+   */
+
+
+  self.refreshScrollCacheX = function () {
+    var s = self.getSchema();
+    self.scrollCache.x = [];
+    /** @type {number} it will be used in `reduceSchema` only  */
+
+    var frozenWidth = 0;
+    var collapsedColumnGroups = self.getCollapsedColumnGroups();
+
+    var isColumnCollapsed = function isColumnCollapsed(columnIndex) {
+      return collapsedColumnGroups.findIndex(function (group) {
+        return columnIndex >= group.from && columnIndex <= group.to;
+      }) >= 0;
+    };
+
+    var dataWidth = s.reduce(function reduceSchema(accumulator, column, columnIndex) {
+      // intentional redefintion of column.  This causes scrollCache to be in the correct order
+      var schemaIndex = self.orders.columns[columnIndex];
+      var columnWidth = self.getColumnWidth(schemaIndex);
+      column = s[schemaIndex];
+      if (!column.hidden && !isColumnCollapsed(columnIndex)) accumulator += columnWidth;
+
+      if (columnIndex < self.frozenColumn) {
+        self.scrollCache.x[columnIndex] = accumulator;
+        frozenWidth = accumulator;
+      } else {
+        self.scrollCache.x[columnIndex] = Math.max(frozenWidth + columnWidth, accumulator);
+      }
+
+      return accumulator;
+    }, 0) || 0;
+    return dataWidth;
+  };
 
   self.resize = function (drawAfterResize) {
     if (!self.canvas) {
@@ -5163,8 +5778,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         rowHeaderCellWidth = self.getRowHeaderCellWidth(),
         topGroupAreaHeight = self.getColumnGroupAreaHeight(),
         leftGroupAreaWidth = self.getRowGroupAreaWidth(),
-        ch = self.style.cellHeight,
-        s = self.getSchema(); // sets actual DOM canvas element
+        ch = self.style.cellHeight; // sets actual DOM canvas element
 
     function checkScrollBoxVisibility() {
       self.scrollBox.horizontalBarVisible = self.style.width !== 'auto' && dataWidth > self.scrollBox.width && self.style.overflowX !== 'hidden' || self.style.overflowX === 'scroll';
@@ -5202,7 +5816,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       });
     }
 
-    self.scrollCache.x = [];
+    dataWidth = self.refreshScrollCacheX();
     self.scrollCache.y = [];
 
     for (x = 0; x < l; x += 1) {
@@ -5215,34 +5829,6 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       self.scrollCache.y[x] = dataHeight;
     }
 
-    var collapsedColumnGroups = self.getCollapsedColumnGroups();
-
-    var isColumnCollapsed = function isColumnCollapsed(columnIndex) {
-      return collapsedColumnGroups.findIndex(function (group) {
-        return columnIndex >= group.from && columnIndex <= group.to;
-      }) >= 0;
-    };
-    /** @type {number} it will be used in `reduceSchema` only  */
-
-
-    var frozenWidth = 0;
-    dataWidth = s.reduce(function reduceSchema(accumulator, column, columnIndex) {
-      // intentional redefintion of column.  This causes scrollCache to be in the correct order
-      var schemaIndex = self.orders.columns[columnIndex];
-      var columnWidth = self.getColumnWidth(schemaIndex);
-      column = s[schemaIndex];
-      if (!column.hidden && !isColumnCollapsed(columnIndex)) accumulator += columnWidth;
-
-      if (columnIndex < self.frozenColumn) {
-        self.scrollCache.x[columnIndex] = accumulator;
-        frozenWidth = accumulator;
-      } else {
-        self.scrollCache.x[columnIndex] = Math.max(frozenWidth + columnWidth, accumulator);
-      }
-
-      return accumulator;
-    }, 0) || 0;
-
     if (self.attributes.showNewRow) {
       dataHeight += ch;
     }
@@ -5359,9 +5945,17 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     self.page = Math.max(1, self.visibleRows.length - 3 - self.attributes.pageUpDownOverlap); // set canvas drawing related items
 
     if (!self.isChildGrid) {
-      self.canvas.width = self.width * ratio;
-      self.canvas.height = self.height * ratio;
-      self.ctx.scale(ratio, ratio);
+      var newWidth = self.width * ratio;
+      var newHeight = self.height * ratio; // We need to check is settings size to canvas necessary,
+      // because settings the canvas'size will cause the canvas and its state be cleared
+      // even if the size is the same.
+      // Notes: Please don't call `self.resize()` without a subsequent call to `self.draw()`
+
+      if (self.canvas.width !== newWidth || self.canvas.height !== newHeight) {
+        self.canvas.width = newWidth;
+        self.canvas.height = newHeight;
+        self.ctx.scale(ratio, ratio);
+      }
     } // resize any open dom elements (input/textarea)
 
 
@@ -5451,6 +6045,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         y = self.mouse.y,
         cell = self.getCellAt(x, y),
         delta,
+        disallowVerticalAutoScroll = false,
+        disallowHorizontalAutoScroll = false,
         ev = {
       NativeEvent: e,
       cell: cell,
@@ -5486,6 +6082,21 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     }
 
     self.currentCell = cell;
+
+    if (!self.draggingItem && // It is not in dragging mode (avoid changing hovers frequent)
+    cell && (cell.context === 'cell' || cell.context === self.cursorGrab)) {
+      var indicator = self.getUnhideIndicator(self.mouse.x, self.mouse.y);
+
+      if (indicator) {
+        self.cursor = 'pointer';
+        self.hovers = {
+          unhideIndicator: indicator
+        };
+        self.draw();
+        return;
+      }
+    }
+
     self.hovers = {};
 
     if (!self.draggingItem && cell) {
@@ -5556,6 +6167,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
           dragBounds.top = -1;
           dragBounds.bottom = self.viewData.length - 1;
           if (dragBounds.left < 0) dragBounds.left = 0;
+          if (dragBounds.left != dragBounds.right) self.isMultiColumnsSelected = true;else self.isMultiRowsSelected = false;
         }
 
         if (self.dragStartObject.rowIndex !== cell.rowIndex || self.dragStartObject.columnIndex !== cell.columnIndex) {
@@ -5638,6 +6250,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         if ((!self.selectionBounds || dragBounds.top !== self.selectionBounds.top || dragBounds.left !== self.selectionBounds.left || dragBounds.bottom !== self.selectionBounds.bottom || dragBounds.right !== self.selectionBounds.right) && !ctrl) {
           if (!(cell.hovered && self.hovers.onFilterButton)) {
             self.selections = [];
+            self.selectedRows = [];
+            self.selectedColumns = [];
           }
 
           if (dragBounds.top === -1) {
@@ -5652,13 +6266,34 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
             }
           } else {
             self.selectArea(sBounds, true);
-            if (sBounds.left == -1 && sBounds.top !== sBounds.bottom) self.isMultiRowsSelected = true;
+            self.activeCell.rowIndex = sBounds.top;
+            self.activeCell.columnIndex = sBounds.left;
+
+            if (sBounds.left == -1 && sBounds.top !== sBounds.bottom) {
+              self.activeCell.columnIndex = 0;
+              self.isMultiRowsSelected = true;
+              self.isMultiColumnsSelected = false;
+            }
           }
         }
+      } else if (self.movingSelectionHandle) {
+        delta = {
+          x: Math.abs(self.dragStart.x - x),
+          y: Math.abs(self.dragStart.y - y)
+        }; // Disallow auto-scroll to the direction that overlay is not
+        // moving towards.
+
+        if (self.fillOverlay.direction === 'y') {
+          disallowHorizontalAutoScroll = true;
+        } else if (self.fillOverlay.direction === 'x') {
+          disallowVerticalAutoScroll = true;
+        }
+      }
 
-        if (self.attributes.autoScrollOnMousemove) {
-          var movedVertically = delta.y > self.attributes.autoScrollMargin;
-          var movedHorizontally = delta.x > self.attributes.autoScrollMargin;
+      if (delta) {
+        if (self.attributes.autoScrollOnMousemove || disallowVerticalAutoScroll || disallowHorizontalAutoScroll) {
+          var movedVertically = !disallowVerticalAutoScroll && delta.y > self.attributes.autoScrollMargin;
+          var movedHorizontally = !disallowHorizontalAutoScroll && delta.x > self.attributes.autoScrollMargin;
           if (movedVertically && !movedHorizontally) self.autoScrollZone(e, -1, y, ctrl);else if (movedHorizontally && !movedVertically) self.autoScrollZone(e, x, -1, ctrl);else if (movedHorizontally && movedVertically) self.autoScrollZone(e, x, y, ctrl);
         } else {
           self.autoScrollZone(e, x, y, ctrl);
@@ -5726,6 +6361,16 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       return;
     }
 
+    var unhideIndicator = self.getUnhideIndicator(pos.x, pos.y);
+
+    if (unhideIndicator) {
+      var dir = unhideIndicator.dir,
+          orderIndex0 = unhideIndicator.orderIndex0,
+          orderIndex1 = unhideIndicator.orderIndex1;
+      if (dir === 'l' || dir === 'r') self.unhideColumns(orderIndex0, orderIndex1);else self.unhideRows(orderIndex0, orderIndex1);
+      return;
+    }
+
     var group = self.getColumnGroupAt(pos.x, pos.y);
     if (!group) group = self.getRowGroupAt(pos.x, pos.y);
 
@@ -5865,8 +6510,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     }
 
     self.resize();
-    document.body.removeEventListener('mousemove', self.dragResizeColumn, false);
-    document.body.removeEventListener('mouseup', self.stopDragResize, false);
+    window.removeEventListener('mousemove', self.dragResizeColumn, false);
+    window.removeEventListener('mouseup', self.stopDragResize, false);
     self.setStorageData();
     self.draw(true);
     self.ignoreNextClick = true;
@@ -5943,7 +6588,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       document.exitPointerLock();
     }
 
-    document.removeEventListener('mousemove', self.scrollGrid, false);
+    window.removeEventListener('mousemove', self.scrollGrid, false);
   };
 
   self.dragReorder = function (e) {
@@ -5965,7 +6610,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     }
 
     if ((e.ctrlKey || e.metaKey || e.shiftKey) && self.reorderObject) {
-      if (self.dragMode === 'column-reorder' && !self.isMultiColumnsSelected(self.draggingItem.header.index)) {
+      if (self.dragMode === 'column-reorder' && !self.isMultiColumnsSelected) {
         self.selectColumn(self.draggingItem.header.index, false, false);
       }
     }
@@ -5982,6 +6627,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     if (Math.abs(x) > self.attributes.reorderDeadZone || Math.abs(y) > self.attributes.reorderDeadZone) {
       self.reorderObject = self.draggingItem;
       if (self.isMultiRowsSelected) self.reorderObject = self.getVisibleCellByIndex(-1, self.activeCell.rowIndex);
+      if (self.isMultiColumnsSelected) self.reorderObject = self.getVisibleCellByIndex(self.activeCell.columnIndex, -1);
       if (!self.reorderObject) return;
       self.reorderTarget = self.currentCell;
       self.reorderObject.dragOffset = {
@@ -6004,8 +6650,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       'row-reorder': 'rowIndex',
       'column-reorder': 'sortColumnIndex'
     }[self.dragMode];
-    document.body.removeEventListener('mousemove', self.dragReorder, false);
-    document.body.removeEventListener('mouseup', self.stopDragReorder, false);
+    window.removeEventListener('mousemove', self.dragReorder, false);
+    window.removeEventListener('mouseup', self.stopDragReorder, false);
 
     if (self.reorderObject && self.reorderTarget && (self.dragMode === 'column-reorder' && self.reorderTarget.sortColumnIndex > -1 && self.reorderTarget.sortColumnIndex < self.getSchema().length || self.dragMode === 'row-reorder' && self.reorderTarget.rowIndex > -1 && self.reorderTarget.rowIndex < self.viewData.length) && self.reorderObject[i] !== self.reorderTarget[i] && !self.dispatchEvent('reorder', {
       NativeEvent: e,
@@ -6019,27 +6665,34 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
       if (self.dragMode === 'column-reorder') {
         var sortColumnIndices = [];
-        var seletedColumnIndices = [];
+        var selectedColumnIndices = [];
 
         if (self.selections[0]) {
+          oIndex = self.selections[0][0];
           self.selections[0].forEach(function (value) {
             sortColumnIndices.push(self.orders.columns[value]);
           });
         }
 
         var deleteCount = sortColumnIndices.length;
-        cr[self.dragMode].splice(oIndex, deleteCount);
-        if (tIndex > oIndex) tIndex = tIndex - (deleteCount - 1);
 
-        for (var i = 0; i < sortColumnIndices.length; i++) {
-          seletedColumnIndices.push(tIndex + i);
-          cr[self.dragMode].splice(tIndex + i, 0, sortColumnIndices[i]);
-        }
+        if (tIndex < oIndex || tIndex > oIndex && Math.abs(tIndex - oIndex) >= deleteCount) {
+          cr[self.dragMode].splice(oIndex, deleteCount);
+          if (tIndex > oIndex) tIndex = tIndex - (deleteCount - 1);
+          self.selectedColumns = [];
 
-        self.orders.columns = cr[self.dragMode];
-        self.viewData.forEach(function (row, rowIndex) {
-          self.selections[rowIndex] = seletedColumnIndices;
-        });
+          for (var i = 0; i < sortColumnIndices.length; i++) {
+            if (i === 0) self.activeCell.columnIndex = tIndex;
+            selectedColumnIndices.push(tIndex + i);
+            self.selectedColumns.push(sortColumnIndices[i]);
+            cr[self.dragMode].splice(tIndex + i, 0, sortColumnIndices[i]);
+          }
+
+          self.orders.columns = cr[self.dragMode];
+          self.viewData.forEach(function (row, rowIndex) {
+            self.selections[rowIndex] = selectedColumnIndices;
+          });
+        }
       } else {
         var selectedRows = [];
         self.selections.forEach(function (row, rowIndex) {
@@ -6048,14 +6701,19 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
             odata.push(self.viewData[rowIndex]);
           }
         });
-        self.viewData.splice(oIndex, odata.length);
-        self.selections = [];
-        if (tIndex > oIndex) tIndex = tIndex - (odata.length - 1);
-        self.activeCell.rowIndex = tIndex;
 
-        for (var i = 0; i < odata.length; i++) {
-          self.viewData.splice(tIndex + i, 0, odata[i]);
-          self.selections[tIndex + i] = selectedRows[i];
+        if (tIndex < oIndex || tIndex > oIndex && Math.abs(tIndex - oIndex) >= odata.length) {
+          self.viewData.splice(oIndex, odata.length);
+          self.selections = [];
+          self.selectedRows = [];
+          if (tIndex > oIndex) tIndex = tIndex - (odata.length - 1);
+          self.activeCell.rowIndex = tIndex;
+
+          for (var i = 0; i < odata.length; i++) {
+            self.viewData.splice(tIndex + i, 0, odata[i]);
+            self.selections[tIndex + i] = selectedRows[i];
+            self.selectedRows.push(tIndex + i);
+          }
         }
       }
 
@@ -6090,8 +6748,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
   };
 
   self.stopDragMove = function (e) {
-    document.body.removeEventListener('mousemove', self.dragMove, false);
-    document.body.removeEventListener('mouseup', self.stopDragMove, false);
+    window.removeEventListener('mousemove', self.dragMove, false);
+    window.removeEventListener('mouseup', self.stopDragMove, false);
     var b = self.getSelectionBounds();
 
     if (self.dispatchEvent('endmove', {
@@ -6122,13 +6780,25 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       return;
     }
 
+    var pos = self.getLayerPos(e);
+    self.ignoreNextClick = true;
+    self.freezeMarkerPosition = pos;
+    pos.x -= self.getRowGroupAreaWidth();
+    pos.y -= self.getColumnGroupAreaHeight();
+
+    if (Math.abs(pos.x) > self.attributes.reorderDeadZone || Math.abs(pos.y) > self.attributes.reorderDeadZone) {
+      setTimeout(function () {
+        self.autoScrollZone(e, pos.x, pos.y, false);
+      }, 1);
+    }
+  };
+
+  self.stopFreezeMove = function (e) {
     var pos = self.getLayerPos(e),
         bm = self.style.gridBorderCollapse === 'collapse' ? 1 : 2,
         columnHeaderCellBorder = self.style.columnHeaderCellBorderWidth * bm,
         columnHeaderCellHeight = self.getColumnHeaderCellHeight(),
         rowHeaderCellWidth = self.getRowHeaderCellWidth();
-    self.ignoreNextClick = true;
-    self.freezeMarkerPosition = pos;
     pos.x -= self.getRowGroupAreaWidth();
     pos.y -= self.getColumnGroupAreaHeight();
 
@@ -6145,12 +6815,12 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     }
 
     if (self.currentCell && self.currentCell.columnIndex !== undefined && self.dragMode === 'frozen-column-marker') {
+      var dataWidth = self.refreshScrollCacheX();
       self.scrollBox.scrollLeft = 0;
-      self.frozenColumn = self.currentCell.columnIndex + 1;
-      self.scrollBox.bar.h.x = rowHeaderCellWidth + self.scrollCache.x[self.frozenColumn - 1];
-      self.scrollBox.box.h.x = rowHeaderCellWidth + self.scrollCache.x[self.frozenColumn - 1];
-      var dataWidth = self.scrollCache.x[self.scrollCache.x.length - 1];
-      self.scrollBox.widthBoxRatio = (self.scrollBox.width - self.scrollCache.x[self.frozenColumn - 1]) / dataWidth;
+      var x = self.currentCell.x - self.style.frozenMarkerWidth - self.style.frozenMarkerBorderWidth;
+      if (pos.x > x + self.currentCell.width / 2) self.frozenColumn = self.currentCell.columnIndex + 1;else if (self.currentCell.columnIndex >= 0) self.frozenColumn = self.currentCell.columnIndex;
+      self.scrollBox.bar.h.x = rowHeaderCellWidth + self.scrollCache.x[self.frozenColumn];
+      self.scrollBox.widthBoxRatio = (self.scrollBox.width - self.scrollCache.x[self.frozenColumn]) / dataWidth;
       self.scrollBox.scrollBoxWidth = self.scrollBox.width * self.scrollBox.widthBoxRatio - self.style.scrollBarWidth;
       self.scrollBox.scrollBoxWidth = Math.max(self.scrollBox.scrollBoxWidth, self.style.scrollBarBoxMinSize);
       self.scrollBox.box.h.width = self.scrollBox.scrollBoxWidth;
@@ -6161,11 +6831,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         self.autoScrollZone(e, pos.x, pos.y, false);
       }, 1);
     }
-  };
 
-  self.stopFreezeMove = function (e) {
-    document.body.removeEventListener('mousemove', self.freezeMove, false);
-    document.body.removeEventListener('mouseup', self.stopFreezeMove, false);
+    window.removeEventListener('mousemove', self.freezeMove, false);
+    window.removeEventListener('mouseup', self.stopFreezeMove, false);
     self.freezeMarkerPosition = undefined;
 
     if (self.dispatchEvent('endfreezemove', {
@@ -6179,6 +6847,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     }
 
     self.draw(true);
+    self.resize();
   };
 
   self.mousedown = function (e, overridePos) {
@@ -6202,7 +6871,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     var ctrl = e.ctrlKey || e.metaKey,
         move = /-move/.test(self.dragMode),
         freeze = /frozen-row-marker|frozen-column-marker/.test(self.dragMode),
-        resize = /-resize/.test(self.dragMode);
+        resize = /-resize/.test(self.dragMode),
+        selectionHandleMove = /selection-handle-br/.test(self.dragMode);
+    var onUnhideIndicator = self.hovers && self.hovers.unhideIndicator;
     self.dragStart = overridePos || self.getLayerPos(e);
     self.scrollStart = {
       left: self.scrollBox.scrollLeft,
@@ -6211,9 +6882,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     self.dragStartObject = self.getCellAt(self.dragStart.x, self.dragStart.y);
     self.dragAddToSelection = !self.dragStartObject.selected;
 
-    if (!ctrl && !e.shiftKey && !/(vertical|horizontal)-scroll-(bar|box)/.test(self.dragStartObject.context) && self.currentCell && !self.currentCell.isColumnHeader && !move && !freeze && !resize) {
+    if (!ctrl && !e.shiftKey && !/(vertical|horizontal)-scroll-(bar|box)/.test(self.dragStartObject.context) && self.currentCell && !self.currentCell.isColumnHeader && !move && !freeze && !resize && !selectionHandleMove) {
       if (!(self.dragMode == 'row-reorder' && self.isMultiRowsSelected) && !(self.currentCell.hovered && self.hovers.onFilterButton)) {
         self.selections = [];
+        self.selectedRows = [];
+        self.selectedColumns = [];
       }
     }
 
@@ -6221,7 +6894,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       return;
     }
 
-    if (self.scrollModes.indexOf(self.dragStartObject.context) !== -1) {
+    if (self.scrollModes.indexOf(self.dragStartObject.context) !== -1 && !onUnhideIndicator) {
       self.scrollMode = self.dragStartObject.context;
       self.scrollStartMode = self.dragStartObject.context;
       self.scrollGrid(e);
@@ -6234,8 +6907,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         self.canvas.requestPointerLock();
       }
 
-      document.addEventListener('mousemove', self.scrollGrid, false);
-      document.addEventListener('mouseup', self.stopScrollGrid, false);
+      window.addEventListener('mousemove', self.scrollGrid, false);
+      window.addEventListener('mouseup', self.stopScrollGrid, false);
       self.ignoreNextClick = true;
       return;
     }
@@ -6247,11 +6920,39 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         self.selectRow(self.dragStartObject.rowIndex, ctrl, null);
       } else if ((self.attributes.selectionMode === 'column' || self.dragStartObject.rowIndex === -1) && self.dragStartObject.columnIndex > -1) {
         self.selectColumn(self.currentCell.header.index, ctrl, e.shiftKey);
-      } else if (self.attributes.selectionMode !== 'row') {
+        return;
+      }
+
+      if (self.attributes.selectionMode !== 'row') {
         self.mousemove(e);
       }
 
-      return;
+      return;
+    }
+
+    if (selectionHandleMove) {
+      self.movingSelectionHandle = true;
+      self.fillOverlay = {
+        handle: {
+          x: self.dragStartObject.x + self.dragStartObject.width / 2,
+          y: self.dragStartObject.y + self.dragStartObject.height / 2
+        },
+        snapTo: {
+          x: -1,
+          y: -1
+        },
+        selection: self.getSelectionBounds()
+      };
+
+      if (self.dispatchEvent('beginselectionhandlemove', {
+        NativeEvent: e
+      })) {
+        return;
+      }
+
+      window.addEventListener('mousemove', self.selectionHandleMove, false);
+      window.addEventListener('mouseup', self.stopSelectionHandleMove, false);
+      return self.selectionHandleMove(e);
     }
 
     if (move) {
@@ -6266,8 +6967,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         return;
       }
 
-      document.body.addEventListener('mousemove', self.dragMove, false);
-      document.body.addEventListener('mouseup', self.stopDragMove, false);
+      window.addEventListener('mousemove', self.dragMove, false);
+      window.addEventListener('mouseup', self.stopDragMove, false);
       return self.mousemove(e);
     }
 
@@ -6284,12 +6985,14 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         return;
       }
 
-      document.body.addEventListener('mousemove', self.freezeMove, false);
-      document.body.addEventListener('mouseup', self.stopFreezeMove, false);
+      self.freezeMarkerPosition = self.getLayerPos(e);
+      self.freezeMarkerPosition.isGrab = true;
+      window.addEventListener('mousemove', self.freezeMove, false);
+      window.addEventListener('mouseup', self.stopFreezeMove, false);
       return self.mousemove(e);
     }
 
-    if (resize) {
+    if (resize && !onUnhideIndicator) {
       self.draggingItem = self.dragItem;
 
       if (self.draggingItem.rowOpen) {
@@ -6299,22 +7002,22 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       }
 
       self.resizingStartingWidth = self.sizes.columns[self.draggingItem.header.style === 'rowHeaderCell' ? 'cornerCell' : self.draggingItem.sortColumnIndex] || self.draggingItem.width;
-      document.body.addEventListener('mousemove', self.dragResizeColumn, false);
-      document.body.addEventListener('mouseup', self.stopDragResize, false);
+      window.addEventListener('mousemove', self.dragResizeColumn, false);
+      window.addEventListener('mouseup', self.stopDragResize, false);
       return;
     }
 
     if (['row-reorder', 'column-reorder'].indexOf(self.dragMode) !== -1) {
       self.draggingItem = self.dragStartObject;
 
-      if (self.dragMode === 'column-reorder' && !self.isMultiColumnsSelected(self.currentCell.header.index)) {
+      if (self.dragMode === 'column-reorder' && !self.isMultiColumnsSelected) {
         self.selectColumn(self.currentCell.header.index, ctrl, e.shiftKey);
       } else if (self.dragMode === 'row-reorder' && !self.isMultiRowsSelected) {
         self.selectRow(self.dragStartObject.rowIndex, ctrl, null);
       }
 
-      document.body.addEventListener('mousemove', self.dragReorder, false);
-      document.body.addEventListener('mouseup', self.stopDragReorder, false);
+      window.addEventListener('mousemove', self.dragReorder, false);
+      window.addEventListener('mouseup', self.stopDragReorder, false);
       return;
     }
   };
@@ -6559,6 +7262,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       if (!e.shiftKey && self.attributes.selectionFollowsActiveCell) {
         if (!ctrl) {
           self.selections = [];
+          self.selectedRows = [];
+          self.selectedColumns = [];
         }
 
         self.selections[y] = self.selections[y] || [];
@@ -6685,17 +7390,22 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
   };
 
   self.pasteData = function (pasteValue, mimeType, startRowIndex, startColIndex) {
+    var minRowsLength = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+    var minColumnsLength = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+
     if (mimeType === 'text/html' && !(0,_util__WEBPACK_IMPORTED_MODULE_1__.isSupportedHtml)(pasteValue)) {
       console.warn('Unrecognized HTML format. HTML must be a simple table, e.g.: <table><tr><td>data</td></tr></table>.');
       console.warn('Data with the mime type text/html not in this format will not be imported as row data.');
       return;
     }
 
-    var schema = self.getSchema();
-    var rows = (0,_util__WEBPACK_IMPORTED_MODULE_1__.parseData)(pasteValue, mimeType); // selected cell. This mimics Excel's paste functionality, and works
+    self.selectedRows = [];
+    self.selectedColumns = [];
+    var rows = (0,_util__WEBPACK_IMPORTED_MODULE_1__.parseData)(pasteValue, mimeType);
+    var columnsLength = rows[0].length; // selected cell. This mimics Excel's paste functionality, and works
     // as a poor-man's fill-down.
 
-    if (rows.length === 1 && rows[0].length === 1) {
+    if (rows.length === 1 && columnsLength === 1 && minRowsLength <= 1 && minColumnsLength <= 1) {
       var cellData = rows[0][0].value.map(function (item) {
         return item.value;
       }).join();
@@ -6703,62 +7413,169 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         data[rowIndex][colName] = cellData;
       });
     } else {
-      var selections = [];
-
-      for (var rowIndex = 0; rowIndex < rows.length; rowIndex++) {
-        // Rows may have been moved by user, so get the actual row index
-        // (instead of the row index at which the row is rendered):
-        var realRowIndex = self.orders.rows[startRowIndex + rowIndex];
-        var cells = rows[rowIndex];
-        var existingRowData = self.viewData[realRowIndex];
-        var newRowData = Object.assign({}, existingRowData);
+      var direction = null;
+
+      if (minRowsLength > rows.length && minColumnsLength > columnsLength) {
+        direction = 'both';
+      } else if (minRowsLength > rows.length) {
+        direction = 'vertical';
+      } else if (minColumnsLength > columnsLength) {
+        direction = 'horizontal';
+      }
+
+      self.insert({
+        rows: rows,
+        startRowIndex: startRowIndex,
+        startColumnIndex: startColIndex,
+        minRowsLength: minRowsLength,
+        minColumnsLength: minColumnsLength,
+        reverseRows: false,
+        reverseColumns: false,
+        clearSelections: true,
+        alwaysFilling: false,
+        direction: direction
+      });
+    } // selections is a sparse array, so we condense:
+
+
+    var affectedCells = [];
+    self.selections.forEach(function (row, rowIndex) {
+      if (rowIndex === undefined) return;
+      row.forEach(function (columnIndex) {
+        affectedCells.push([rowIndex, columnIndex, self.getBoundRowIndexFromViewRowIndex(rowIndex), self.getBoundColumnIndexFromViewColumnIndex(columnIndex)]);
+      });
+    });
+    self.dispatchEvent('afterpaste', {
+      cells: affectedCells
+    });
+    return rows.length;
+  };
+
+  self.insert = function (_ref) {
+    var _ref$rows = _ref.rows,
+        rows = _ref$rows === void 0 ? [] : _ref$rows,
+        _ref$startRowIndex = _ref.startRowIndex,
+        startRowIndex = _ref$startRowIndex === void 0 ? 0 : _ref$startRowIndex,
+        _ref$startColumnIndex = _ref.startColumnIndex,
+        startColumnIndex = _ref$startColumnIndex === void 0 ? 0 : _ref$startColumnIndex,
+        _ref$minRowsLength = _ref.minRowsLength,
+        minRowsLength = _ref$minRowsLength === void 0 ? 0 : _ref$minRowsLength,
+        _ref$minColumnsLength = _ref.minColumnsLength,
+        minColumnsLength = _ref$minColumnsLength === void 0 ? 0 : _ref$minColumnsLength,
+        _ref$reverseRows = _ref.reverseRows,
+        reverseRows = _ref$reverseRows === void 0 ? false : _ref$reverseRows,
+        _ref$reverseColumns = _ref.reverseColumns,
+        reverseColumns = _ref$reverseColumns === void 0 ? false : _ref$reverseColumns,
+        _ref$clearSelections = _ref.clearSelections,
+        clearSelections = _ref$clearSelections === void 0 ? false : _ref$clearSelections,
+        _ref$alwaysFilling = _ref.alwaysFilling,
+        alwaysFilling = _ref$alwaysFilling === void 0 ? false : _ref$alwaysFilling,
+        _ref$direction = _ref.direction,
+        direction = _ref$direction === void 0 ? 'both' : _ref$direction;
+    var schema = self.getSchema();
+    var rowsLength = Math.max(rows.length, minRowsLength);
+    var fillCellCallback = self.fillCellCallback;
+    var selections = clearSelections ? [] : self.selections;
+    var filledCells = [];
+
+    for (var rowPosReal = 0, rowDataPos = 0; rowPosReal < rowsLength; rowPosReal++, rowDataPos++) {
+      if (rowDataPos >= rows.length) {
+        rowDataPos = 0;
+      }
+
+      var fillingRow = rowPosReal >= rows.length;
+      var rowPosition = reverseRows ? rowsLength - rowPosReal - 1 : rowPosReal; // Rows may have been moved by user, so get the actual row index
+      // (instead of the row index at which the row is rendered):
+
+      var realRowIndex = self.orders.rows[startRowIndex + rowPosition];
+      var cells = rows[rowDataPos];
+      var cellsLength = Math.max(cells.length, minColumnsLength);
+      var existingRowData = self.viewData[realRowIndex];
+      var newRowData = Object.assign({}, existingRowData);
+      var fillArgs = fillCellCallback ? {
+        rows: rows,
+        direction: direction,
+        rowData: newRowData,
+        existingRowData: existingRowData,
+        rowIndex: realRowIndex,
+        rowOffset: rowDataPos,
+        cells: cells,
+        reversed: direction === 'horizontal' ? reverseColumns : reverseRows,
+        isFillingRow: fillingRow || alwaysFilling,
+        fillingRowPosition: alwaysFilling ? rowPosReal : fillingRow ? rowPosReal - rows.length : -1,
+        fillingRowLength: alwaysFilling ? rowsLength : fillingRow ? rowsLength - rows.length : -1
+      } : undefined;
+      self.selectedRows.push(realRowIndex);
+
+      if (selections[realRowIndex] === undefined) {
         selections[realRowIndex] = [];
+      }
 
-        for (var colIndex = 0; colIndex < cells.length; colIndex++) {
-          var column = schema[startColIndex + colIndex];
+      for (var colPosReal = 0, cellDataPos = 0; colPosReal < cellsLength; colPosReal++, cellDataPos++) {
+        if (cellDataPos >= cells.length) {
+          cellDataPos = 0;
+        }
 
-          if (!column) {
-            console.warn('Paste data exceeded grid bounds. Skipping.');
-            continue;
-          }
+        var fillingColumn = colPosReal >= cells.length;
+        var colPosition = reverseColumns ? cellsLength - colPosReal - 1 : colPosReal;
+        var columnIndex = startColumnIndex + colPosition;
+        var column = schema[columnIndex];
 
-          var columnName = column.name;
-          var cellData = cells[colIndex].value.map(function (item) {
+        if (!column) {
+          console.warn('Paste data exceeded grid bounds. Skipping.');
+          continue;
+        }
+
+        var columnName = column.name;
+        var cellData = cells[cellDataPos];
+
+        if (cellData && cellData.value) {
+          cellData = cellData.value.map(function (item) {
             return item.value;
           }).join('');
+        }
 
-          if (cellData === undefined || cellData === null) {
-            newRowData[columnName] = existingRowData[columnName];
-            continue;
-          }
+        var existingCellData = existingRowData[columnName];
 
-          selections[realRowIndex].push(startColIndex + colIndex);
-          newRowData[columnName] = cellData;
+        if (fillCellCallback && (fillingColumn || fillingRow || alwaysFilling)) {
+          newRowData[columnName] = fillCellCallback(_objectSpread(_objectSpread({}, fillArgs), {}, {
+            column: column,
+            columnIndex: columnIndex,
+            columnOffset: cellDataPos,
+            newCellData: cellData,
+            existingCellData: existingCellData,
+            isFillingColumn: fillingColumn || alwaysFilling,
+            fillingColumnPosition: alwaysFilling ? colPosReal : fillingColumn ? colPosReal - cells.length : -1,
+            fillingColumnLength: alwaysFilling ? cellsLength : fillingColumn ? cellsLength - cells.length : -1
+          }));
+        } else {
+          newRowData[columnName] = cellData === undefined || cellData === null ? existingCellData : cellData;
         }
 
-        self.originalData[self.boundRowIndexMap.get(realRowIndex)] = newRowData; // Update view date here to avoid a full refresh of `viewData`.
-        // To stay in line with Excel and Google Sheet behaviour,
-        // don't perform a full refresh (and filter/sort results)
-        // as this would make any pasted values disappear and/or suddenly change position.
+        selections[realRowIndex].push(columnIndex);
+
+        if (alwaysFilling || fillingRow || fillingColumn) {
+          filledCells.push([realRowIndex, columnIndex, self.getBoundRowIndexFromViewRowIndex(realRowIndex), self.getBoundColumnIndexFromViewColumnIndex(columnIndex)]);
+        }
 
-        self.viewData[realRowIndex] = newRowData;
+        if (self.selectedColumns.indexOf(columnIndex) === -1) self.selectedColumns.push(columnIndex);
       }
 
-      self.selections = selections;
-    } // selections is a sparse array, so we condense:
+      self.originalData[self.boundRowIndexMap.get(realRowIndex)] = newRowData; // Update view date here to avoid a full refresh of `viewData`.
+      // To stay in line with Excel and Google Sheet behaviour,
+      // don't perform a full refresh (and filter/sort results)
+      // as this would make any pasted values disappear and/or suddenly change position.
 
+      self.viewData[realRowIndex] = newRowData;
+    }
 
-    var affectedCells = [];
-    self.selections.forEach(function (row, rowIndex) {
-      if (rowIndex === undefined) return;
-      row.forEach(function (columnIndex) {
-        affectedCells.push([rowIndex, columnIndex, self.getBoundRowIndexFromViewRowIndex(rowIndex), self.getBoundColumnIndexFromViewColumnIndex(columnIndex)]);
+    self.selections = selections;
+
+    if (filledCells.length > 0 || alwaysFilling) {
+      self.dispatchEvent('afterfill', {
+        filledCells: filledCells
       });
-    });
-    self.dispatchEvent('afterpaste', {
-      cells: affectedCells
-    });
-    return rows.length;
+    }
   };
 
   self.getNextVisibleColumnIndex = function (visibleColumnIndex) {
@@ -6787,6 +7604,24 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     return -1;
   };
 
+  self.getSelectionIndex = function () {
+    for (var rowIndex = 0, len = self.selections.length; rowIndex < len; rowIndex++) {
+      var row = self.selections[rowIndex];
+
+      if (row) {
+        if (row[0] === undefined) break;
+        return {
+          row: rowIndex,
+          column: row[0] < 0 ? row[1] : row[0],
+          rowLength: len - rowIndex,
+          columnLength: row.length - (row[0] < 0 ? 1 : 0)
+        };
+      }
+    }
+
+    return null;
+  };
+
   self.paste = function (event) {
     if (!self.attributes.editable) {
       return;
@@ -6820,24 +7655,14 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       return;
     }
 
-    var itemToPaste = pasteableItems[0];
-    var startCell = [];
-
-    for (var rowIndex = 0, len = self.selections.length; rowIndex < len; rowIndex++) {
-      var row = self.selections[rowIndex];
-
-      if (row) {
-        if (row[0] === undefined) return;
-        startCell = [rowIndex, row[0] < 0 ? row[1] : row[0]];
-        break;
-      }
-    } // itemToPaste is cleared once accessed (getData or getAsString),
+    var selectionIndex = self.getSelectionIndex();
+    if (!selectionIndex) return;
+    var itemToPaste = pasteableItems[0]; // itemToPaste is cleared once accessed (getData or getAsString),
     // so we need to store the type here, before reading its value:
 
-
     var pasteType = itemToPaste.type;
     itemToPaste.getAsString(function (pasteValue) {
-      self.pasteData(pasteValue, pasteType, startCell[0], startCell[1]);
+      self.pasteData(pasteValue, pasteType, selectionIndex.row, selectionIndex.column, selectionIndex.rowLength, selectionIndex.columnLength);
       self.draw();
     });
   };
@@ -6881,6 +7706,145 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     event.preventDefault();
   };
 
+  self.selectionHandleMove = function (e) {
+    if (!self.movingSelectionHandle) {
+      return;
+    }
+
+    var clippingRect = self.getClippingRect(e);
+    var rowIndex = self.currentCell.rowIndex;
+    var columnIndex = self.currentCell.columnIndex;
+    var isInSelectionBounds = rowIndex >= -1 && columnIndex >= -1 && self.fillOverlay.selection.left <= columnIndex && self.fillOverlay.selection.right >= columnIndex && self.fillOverlay.selection.top <= rowIndex && self.fillOverlay.selection.bottom >= rowIndex;
+    self.fillOverlay.minX = clippingRect.x;
+    self.fillOverlay.minY = clippingRect.y;
+    self.fillOverlay.x = Math.max(clippingRect.x, e.clientX);
+    self.fillOverlay.y = Math.max(clippingRect.y, e.clientY); // If we are in the selection bounds, allow user to change directions.
+
+    if (isInSelectionBounds) {
+      self.fillOverlay.lastInBoundsLocation = {
+        x: e.clientX,
+        y: e.clientY
+      };
+    } else if (self.fillOverlay.lastInBoundsLocation || !self.fillOverlay.direction) {
+      var lastInBoundsLocation = self.fillOverlay.lastInBoundsLocation;
+      self.fillOverlay.lastInBoundsLocation = undefined;
+      var x = lastInBoundsLocation ? lastInBoundsLocation.x : self.fillOverlay.handle.x;
+      var y = lastInBoundsLocation ? lastInBoundsLocation.y : self.fillOverlay.handle.y;
+      var dx = Math.abs(e.clientX - x);
+      var dy = Math.abs(e.clientY - y);
+
+      if (dx > 5 || dy > 5) {
+        self.fillOverlay.direction = dx > dy ? 'x' : 'y';
+      }
+    }
+
+    if (rowIndex >= 0) {
+      self.fillOverlay.rowIndex = rowIndex;
+    }
+
+    if (columnIndex >= 0) {
+      self.fillOverlay.columnIndex = columnIndex;
+
+      if (rowIndex === -1 && self.visibleRows.length) {
+        self.fillOverlay.rowIndex = self.visibleRows[0];
+      }
+    }
+
+    if (rowIndex >= -1 && columnIndex >= -1) {
+      self.fillOverlay.snap = self.currentCell;
+    } else {
+      self.fillOverlay.snap = undefined;
+    }
+  };
+
+  self.stopSelectionHandleMove = function (e) {
+    if (!self.fillOverlay.handle) {
+      return false;
+    }
+
+    self.ignoreNextClick = true;
+    window.removeEventListener('mousemove', self.selectionHandleMove, false);
+    window.removeEventListener('mouseup', self.stopSelectionHandleMove, false);
+    var overlay = self.fillOverlay;
+    var selectionIndex = self.getSelectionIndex();
+    var bounds = overlay.selection;
+    if (!selectionIndex) return;
+    self.movingSelectionHandle = undefined;
+    self.fillOverlay = {};
+
+    if (overlay.rowIndex >= 0 && overlay.columnIndex >= 0) {
+      var boundsOld = _objectSpread({}, bounds);
+
+      var isVertical = overlay.direction === 'y';
+      var isHorizontal = overlay.direction === 'x';
+      var startRow,
+          rowLength,
+          startColumn,
+          columnLength,
+          reverseVertically = false,
+          reverseHorizontally = false;
+
+      if (isVertical) {
+        if (overlay.rowIndex < bounds.top) {
+          bounds.top = overlay.rowIndex;
+          reverseVertically = true;
+        } else if (overlay.rowIndex > bounds.bottom) {
+          bounds.bottom = overlay.rowIndex;
+        }
+
+        startRow = bounds.top < boundsOld.top ? bounds.top : boundsOld.bottom + 1;
+        rowLength = bounds.top < boundsOld.top ? boundsOld.top - bounds.top : bounds.bottom - boundsOld.bottom;
+        startColumn = selectionIndex.column;
+        columnLength = selectionIndex.columnLength;
+      } else if (isHorizontal) {
+        if (overlay.columnIndex < bounds.left) {
+          bounds.left = overlay.columnIndex;
+          reverseHorizontally = true;
+        } else if (overlay.columnIndex > bounds.right) {
+          bounds.right = overlay.columnIndex;
+        }
+
+        startColumn = bounds.left < boundsOld.left ? bounds.left : boundsOld.right + 1;
+        columnLength = bounds.left < boundsOld.left ? boundsOld.left - bounds.left : bounds.right - boundsOld.right;
+        startRow = selectionIndex.row;
+        rowLength = selectionIndex.rowLength;
+      }
+
+      if (bounds.left <= bounds.right && bounds.top <= bounds.bottom && (bounds.left < boundsOld.left || bounds.top < boundsOld.top || bounds.right > boundsOld.right || bounds.bottom > boundsOld.bottom)) {
+        var schema = self.getSchema();
+        var rows = [];
+
+        for (var rowIndex = 0; rowIndex < Math.min(rowLength, selectionIndex.rowLength); rowIndex++) {
+          var rowData = self.viewData[selectionIndex.row + rowIndex];
+          rows[rowIndex] = [];
+
+          for (var columnIndex = 0; columnIndex < Math.min(columnLength, selectionIndex.columnLength); columnIndex++) {
+            var column = schema[selectionIndex.column + columnIndex];
+            if (!column) continue;
+            var cellData = rowData[column.name];
+            rows[rowIndex][columnIndex] = cellData;
+          }
+        }
+
+        self.insert({
+          rows: rows,
+          startRowIndex: startRow,
+          startColumnIndex: startColumn,
+          minRowsLength: rowLength,
+          minColumnsLength: columnLength,
+          reverseRows: reverseVertically,
+          reverseColumns: reverseHorizontally,
+          clearSelections: false,
+          alwaysFilling: true,
+          direction: isHorizontal ? 'horizontal' : 'vertical'
+        });
+        self.draw();
+      }
+    }
+
+    return true;
+  };
+
   return;
 }
 
@@ -7070,6 +8034,90 @@ var createHTMLString = function createHTMLString(selectedData, isNeat) {
 
 
 
+/***/ }),
+
+/***/ "./lib/groups/util.js":
+/*!****************************!*\
+  !*** ./lib/groups/util.js ***!
+  \****************************/
+/*! namespace exports */
+/*! export mergeHiddenRowRanges [provided] [no usage info] [missing usage info prevents renaming] */
+/*! other exports [not provided] [no usage info] */
+/*! runtime requirements: __webpack_require__.r, __webpack_exports__, __webpack_require__.d, __webpack_require__.* */
+/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "mergeHiddenRowRanges": function() { return /* binding */ mergeHiddenRowRanges; }
+/* harmony export */ });
+
+/**
+ * Merge a new hidden row range into existed ranges array
+ * @param {any[]} hiddenRowRanges tuples: Array<[bgeinRowIndex, endRowIndex]>
+ * @param {number[]} newRange tuple: [beginRowIndex, endRowIndex]
+ * @returns {boolean}
+ */
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var mergeHiddenRowRanges = function mergeHiddenRowRanges(hiddenRowRanges, newRange) {
+  var _newRange = _slicedToArray(newRange, 2),
+      beginRowIndex = _newRange[0],
+      endRowIndex = _newRange[1];
+
+  if (endRowIndex < beginRowIndex) return false;
+  var inserted = false;
+
+  for (var i = 0; i < hiddenRowRanges.length; i++) {
+    var range = hiddenRowRanges[i];
+    if (beginRowIndex > range[1] + 1) continue;
+
+    if (beginRowIndex <= range[0] && endRowIndex >= range[0]) {
+      hiddenRowRanges[i] = [beginRowIndex, Math.max(endRowIndex, range[1])];
+      inserted = true;
+      break;
+    }
+
+    if (beginRowIndex >= range[0]) {
+      hiddenRowRanges[i] = [range[0], Math.max(endRowIndex, range[1])];
+      inserted = true;
+      break;
+    }
+  }
+
+  if (!inserted) hiddenRowRanges.push([beginRowIndex, endRowIndex]); // merge intersections after sorting ranges
+
+  hiddenRowRanges.sort(function (a, b) {
+    return a[0] - b[0];
+  });
+
+  for (var _i2 = 0; _i2 < hiddenRowRanges.length - 1; _i2++) {
+    var _range = hiddenRowRanges[_i2];
+    var nextRange = hiddenRowRanges[_i2 + 1];
+
+    if (nextRange[0] <= _range[1] + 1) {
+      hiddenRowRanges[_i2] = [_range[0], Math.max(_range[1], nextRange[1])];
+      hiddenRowRanges.splice(_i2 + 1, 1);
+      _i2--;
+    }
+  }
+
+  return true;
+};
+
+
+
 /***/ }),
 
 /***/ "./lib/intf.js":
@@ -7171,6 +8219,21 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
   self.scrollBox = {};
   self.visibleRows = [];
   self.visibleCells = [];
+  /**
+   * Each item of this  array contains these properties:
+   * - `x`, `y`, `x2`, `y2`
+   * - `orderIndex0`, `orderIndex1`: The closed interval of the hiding rows/columns.
+   * - `dir`: The directon of the unhide indicator. 'l' and 'r' for columns, 't' and 'b' for rows
+   */
+
+  self.visibleUnhideIndicators = [];
+  /**
+   * Each item is a tuple conatins two numbers:
+   * its type difination: Array<[beginRowIndex, endRowIndex]>
+   * Each tuple represents a closed Interval
+   */
+
+  self.hiddenRowRanges = [];
   /**
    * This array stored all groups information with context for drawing,
    * it is generated by drawing functions,
@@ -7192,6 +8255,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     trees: {}
   };
   self.selections = [];
+  self.selectedRows = [];
+  self.selectedColumns = [];
+  self.fillOverlay = {};
   self.filterable = {
     rows: [],
     columns: []
@@ -7251,7 +8317,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
   self.groupedRows = [];
   self.scrollModes = ['vertical-scroll-box', 'vertical-scroll-top', 'vertical-scroll-bottom', 'horizontal-scroll-box', 'horizontal-scroll-right', 'horizontal-scroll-left'];
   self.componentL1Events = {};
-  self.eventNames = ['afterdraw', 'afterrendercell', 'afterrenderfilterbutton', 'aftercreategroup', 'attributechanged', 'beforebeginedit', 'beforecreatecellgrid', 'beforedraw', 'beforeendedit', 'beforerendercell', 'beforerendercellgrid', 'beforerenderfilterbutton', 'beginedit', 'cellmouseout', 'cellmouseover', 'click', 'collapsetree', 'contextmenu', 'copy', 'datachanged', 'dblclick', 'endedit', 'expandtree', 'formatcellvalue', 'keydown', 'keypress', 'keyup', 'mousedown', 'mousemove', 'mouseup', 'newrow', 'ordercolumn', 'rendercell', 'rendercellgrid', 'renderorderbyarrow', 'rendertext', 'rendertreearrow', 'reorder', 'reordering', 'resize', 'resizecolumn', 'resizerow', 'schemachanged', 'scroll', 'selectionchanged', 'stylechanged', 'touchcancel', 'touchend', 'touchmove', 'touchstart', 'wheel'];
+  self.eventNames = ['afterdraw', 'afterrendercell', 'afterrenderfilterbutton', 'aftercreategroup', 'attributechanged', 'beforebeginedit', 'beforecreatecellgrid', 'beforedraw', 'beforeendedit', 'beforerendercell', 'beforerendercellgrid', 'beforerenderfilterbutton', 'beginedit', 'cellmouseout', 'cellmouseover', 'click', 'collapsetree', 'columnhide', 'columnunhide', 'contextmenu', 'copy', 'datachanged', 'dblclick', 'endedit', 'expandtree', 'formatcellvalue', 'keydown', 'keypress', 'keyup', 'mousedown', 'mousemove', 'mouseup', 'newrow', 'ordercolumn', 'rendercell', 'rendercellgrid', 'renderorderbyarrow', 'rendertext', 'rendertreearrow', 'reorder', 'reordering', 'resize', 'resizecolumn', 'resizerow', 'schemachanged', 'scroll', 'selectionchanged', 'stylechanged', 'touchcancel', 'touchend', 'touchmove', 'touchstart', 'wheel'];
   self.mouse = {
     x: 0,
     y: 0
@@ -7469,7 +8535,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
             if (columnIndex < 0) continue;
             var boundColumnIndex = self.getBoundColumnIndexFromViewColumnIndex(columnIndex);
             var columnName = schema[boundColumnIndex].name;
-            self.originalData[boundRowIndex][columnName] = '';
+            self.viewData[boundRowIndex][columnName] = '';
             affectedCells.push([rowIndex, columnIndex, boundRowIndex, boundColumnIndex]);
           }
         } catch (err) {
@@ -7832,7 +8898,23 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     // useful when emitting cell events.
     var newViewData = originalData.map(function (row, originalRowIndex) {
       return [row, originalRowIndex];
-    }); // Apply filtering
+    }); // Remove hidden rows here. So we can keep the bound indexes correct
+
+    if (self.hiddenRowRanges.length > 0) {
+      var ranges = self.hiddenRowRanges.sort(function (a, b) {
+        return b[1] - a[1];
+      });
+
+      for (var i = 0; i < ranges.length; i++) {
+        var _ranges$i = _slicedToArray(ranges[i], 2),
+            beginRowIndex = _ranges$i[0],
+            endRowIndex = _ranges$i[1];
+
+        var countOfRows = endRowIndex - beginRowIndex + 1;
+        newViewData.splice(beginRowIndex, countOfRows);
+      }
+    } // Apply filtering
+
 
     var _loop = function _loop() {
       var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i4], 2),
@@ -7867,8 +8949,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
     var collapsedGroups = [];
 
-    for (var i = 0; i < self.groupedRows.length; i++) {
-      var rows = self.groupedRows[i];
+    for (var _i5 = 0; _i5 < self.groupedRows.length; _i5++) {
+      var rows = self.groupedRows[_i5];
 
       for (var j = 0; j < rows.length; j++) {
         var r = rows[j];
@@ -7885,17 +8967,17 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       var newLen = 0;
       var len = collapsedGroups.length;
 
-      for (var _i5 = 0; _i5 < len; _i5++) {
-        var _r = collapsedGroups[_i5];
+      for (var _i6 = 0; _i6 < len; _i6++) {
+        var _r = collapsedGroups[_i6];
 
-        if (_i5 === len - 1) {
+        if (_i6 === len - 1) {
           collapsedGroups[newLen++] = _r;
           break;
         }
 
         var to = _r[1];
 
-        var _collapsedGroups = _slicedToArray(collapsedGroups[_i5 + 1], 2),
+        var _collapsedGroups = _slicedToArray(collapsedGroups[_i6 + 1], 2),
             from2 = _collapsedGroups[0],
             to2 = _collapsedGroups[1];
 
@@ -7904,8 +8986,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
           continue;
         }
 
-        collapsedGroups[_i5 + 1] = _r;
-        if (to2 > to) collapsedGroups[_i5 + 1][1] = to2;
+        collapsedGroups[_i6 + 1] = _r;
+        if (to2 > to) collapsedGroups[_i6 + 1][1] = to2;
       }
 
       collapsedGroups = collapsedGroups.slice(0, newLen); //#endregion merge groups
@@ -8099,7 +9181,6 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       document.body.removeChild(self.controlInput);
     }
 
-    self.eventParent.removeEventListener('mouseup', self.mouseup, false);
     self.eventParent.removeEventListener('mousedown', self.mousedown, false);
     self.eventParent.removeEventListener('dblclick', self.dblclick, false);
     self.eventParent.removeEventListener('click', self.click, false);
@@ -8113,7 +9194,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     self.controlInput.removeEventListener('keypress', self.keypress, false);
     self.controlInput.removeEventListener('keyup', self.keyup, false);
     self.controlInput.removeEventListener('keydown', self.keydown, false);
-    document.body.removeEventListener('mousemove', self.mousemove);
+    window.removeEventListener('mouseup', self.mouseup, false);
+    window.removeEventListener('mousemove', self.mousemove);
     window.removeEventListener('resize', self.resize);
 
     if (self.observer && self.observer.disconnect) {
@@ -8707,6 +9789,10 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     self.intf.cut = self.cut;
     self.intf.paste = self.paste;
     self.intf.setStyleProperty = self.setStyleProperty;
+    self.intf.hideColumns = self.hideColumns;
+    self.intf.unhideColumns = self.unhideColumns;
+    self.intf.hideRows = self.hideRows;
+    self.intf.unhideRows = self.unhideRows;
     Object.defineProperty(self.intf, 'defaults', {
       get: function get() {
         return {
@@ -9260,6 +10346,14 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       self.cellGridAttributes = value;
     }
   });
+  Object.defineProperty(self.intf, 'fillCellCallback', {
+    get: function get() {
+      return self.fillCellCallback;
+    },
+    set: function setFillCellCallback(value) {
+      self.fillCellCallback = value;
+    }
+  });
   Object.defineProperty(self.intf, 'ctx', {
     get: function get() {
       return self.ctx;
@@ -9701,7 +10795,7 @@ if (window && !window.canvasDatagrid && !window.require && // Present to exclude
 function canvasDatagrid(args) {
   args = args || {};
   var i,
-      tKeys = ['style', 'formatters', 'sorters', 'filters', 'treeGridAttributes', 'cellGridAttributes', 'data', 'schema'];
+      tKeys = ['style', 'formatters', 'sorters', 'filters', 'treeGridAttributes', 'cellGridAttributes', 'fillCellCallback', 'data', 'schema'];
 
   if (window.customElements) {
     i = document.createElement('canvas-datagrid');
@@ -9770,7 +10864,7 @@ function canvasDatagrid(args) {
 /*! namespace exports */
 /*! export default [provided] [no usage info] [missing usage info prevents renaming] */
 /*! other exports [not provided] [no usage info] */
-/*! runtime requirements: __webpack_require__.r, __webpack_exports__, __webpack_require__.d, __webpack_require__.* */
+/*! runtime requirements: __webpack_require__, __webpack_require__.r, __webpack_exports__, __webpack_require__.d, __webpack_require__.* */
 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -9778,6 +10872,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 /* harmony export */   "default": function() { return /* export default binding */ __WEBPACK_DEFAULT_EXPORT__; }
 /* harmony export */ });
+/* harmony import */ var _groups_util__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./groups/util */ "./lib/groups/util.js");
 /*jslint browser: true, unparam: true, todo: true*/
 
 /*globals define: true, MutationObserver: false, requestAnimationFrame: false, performance: false, btoa: false*/
@@ -9789,6 +10884,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
+
 /* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(self) {
   /**
    * Converts a integer into a letter A - ZZZZZ...
@@ -10228,6 +11324,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
 
   self.setActiveCell = function (x, y) {
+    if (typeof x === 'undefined') return;
+
     if (x < 0) {
       x = 0;
     }
@@ -10252,6 +11350,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
   self.selectNone = function (dontDraw) {
     self.selections = [];
+    self.selectedRows = [];
+    self.selectedColumns = [];
     self.dispatchEvent('selectionchanged', {
       selectedData: self.getSelectedData(),
       selections: self.selections,
@@ -10289,51 +11389,42 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     self.draw();
   };
   /**
-   * Returns true if indices of columns next to the selected columnIndex is selected on every row.
+   * Returns true if the selected columnIndex is selected on every row.
    * @memberof canvasDatagrid
-   * @name isMultiColumnsSelected
+   * @name isColumnSelected
    * @method
    * @param {number} columnIndex The column index to check.
    */
 
 
-  self.isMultiColumnsSelected = function (columnIndex) {
-    var multiColIsSelected = true;
+  self.isColumnSelected = function (columnIndex) {
+    var colIsSelected = true;
     self.viewData.forEach(function (row, rowIndex) {
-      var columnIndices = self.selections[rowIndex];
-
-      if (!columnIndices || columnIndices.length <= 1 || columnIndices.indexOf(columnIndex) === -1) {
-        multiColIsSelected = false;
-      } else if (columnIndices.length > 1) {
-        if (columnIndices[0] != columnIndex) multiColIsSelected = false;else {
-          for (var i = 0; i < columnIndices.length - 1; i++) {
-            if (columnIndices[i] + 1 != columnIndices[i + 1]) {
-              multiColIsSelected = false;
-              break;
-            }
-          }
-        }
+      if (!self.selections[rowIndex] || self.selections[rowIndex].indexOf(columnIndex) === -1) {
+        colIsSelected = false;
       }
     });
-    return multiColIsSelected;
+    return colIsSelected;
   };
   /**
-   * Returns true if the selected columnIndex is selected on every row.
+   * Returns true if the selected rowIndex is selected on every column.
    * @memberof canvasDatagrid
-   * @name isColumnSelected
+   * @name isRowSelected
    * @method
-   * @param {number} columnIndex The column index to check.
+   * @param {number} rowIndex The row index to check.
    */
 
 
-  self.isColumnSelected = function (columnIndex) {
-    var colIsSelected = true;
-    self.viewData.forEach(function (row, rowIndex) {
-      if (!self.selections[rowIndex] || self.selections[rowIndex].indexOf(columnIndex) === -1) {
-        colIsSelected = false;
+  self.isRowSelected = function (rowIndex) {
+    if (!self.selections[rowIndex]) return false;
+    var rowIsSelected = true;
+    var schema = self.getVisibleSchema();
+    schema.forEach(function (col, index) {
+      if (!self.selections[rowIndex] || self.selections[rowIndex].indexOf(index) === -1) {
+        rowIsSelected = false;
       }
     });
-    return colIsSelected;
+    return rowIsSelected;
   };
   /**
    * Runs the defined method on each selected cell.
@@ -10383,6 +11474,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
   self.selectColumn = function (columnIndex, ctrl, shift, supressEvent) {
     var s, e, x;
+    self.isMultiRowsSelected = false;
+    self.isMultiColumnsSelected = false;
 
     function addCol(i) {
       self.viewData.forEach(function (row, rowIndex) {
@@ -10414,19 +11507,25 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
       for (x = s; e > x; x += 1) {
         addCol(x);
+        if (self.selectedColumns.indexOf(x) === -1) self.selectedColumns.push(x);
       }
+
+      if (s != e) self.isMultiColumnsSelected = true;
     }
 
     if (!ctrl && !shift) {
       self.selections = [];
+      self.selectedColumns = [];
       self.activeCell.columnIndex = columnIndex;
       self.activeCell.rowIndex = self.scrollIndexTop;
     }
 
     if (ctrl && self.isColumnSelected(columnIndex)) {
       removeCol(columnIndex);
+      self.selectedColumns.splice(columnIndex, 1);
     } else {
       addCol(columnIndex);
+      self.selectedColumns.push(columnIndex);
     }
 
     if (supressEvent) {
@@ -10477,6 +11576,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       self.selections[ri].push(-1);
       s.forEach(function (col, index) {
         self.selections[ri].push(self.orders.columns.indexOf(col.index));
+        if (col.index !== -1 && self.selectedColumns.indexOf(self.orders.columns.indexOf(col.index)) === -1) self.selectedColumns.push(self.orders.columns.indexOf(col.index));
       });
     }
 
@@ -10501,9 +11601,12 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
         for (x = st; en >= x; x += 1) {
           addRow(x);
+          self.selectedRows.push(x);
         }
       } else {
         addRow(rowIndex);
+        self.selectedRows = [];
+        self.selectedRows.push(rowIndex);
       }
     }
 
@@ -10627,6 +11730,102 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       }
     }
   };
+  /**
+   * Hide column/columns
+   * @memberof canvasDatagrid
+   * @name hideColumns
+   * @method
+   * @param {number} beginColumnOrderIndex The begin column order index
+   * @param {number} [endColumnOrderIndex] The end column order index
+   */
+
+
+  self.hideColumns = function (beginColumnOrderIndex, endColumnOrderIndex) {
+    var schema = self.getSchema();
+    var orders = self.orders.columns;
+    var hiddenColumns = [];
+    if (typeof endColumnOrderIndex !== 'number') endColumnOrderIndex = beginColumnOrderIndex;
+
+    for (var orderIndex = beginColumnOrderIndex; orderIndex <= endColumnOrderIndex; orderIndex++) {
+      var columnIndex = orders[orderIndex];
+
+      if (columnIndex >= 0 && !schema[columnIndex].hidden) {
+        hiddenColumns.push(columnIndex);
+        schema[columnIndex].hidden = true;
+        self.dispatchEvent('columnhide', {
+          columnIndex: columnIndex
+        });
+      }
+    }
+
+    if (hiddenColumns.length > 0) {
+      self.setStorageData();
+      setTimeout(function () {
+        self.resize(true);
+      }, 10);
+    }
+
+    self.dispatchEvent('hidecolumns', {
+      hiddenColumns: hiddenColumns
+    });
+  };
+  /**
+   * Unihde column/columns
+   * @memberof canvasDatagrid
+   * @name unhideColumns
+   * @method
+   * @param {number} beginColumnOrderIndex The begin column order index
+   * @param {number} [endColumnOrderIndex] The end column order index
+   */
+
+
+  self.unhideColumns = function (beginColumnOrderIndex, endColumnOrderIndex) {
+    var orders = self.orders.columns;
+    var schema = self.getSchema();
+
+    for (var i = beginColumnOrderIndex; i <= endColumnOrderIndex; i++) {
+      var columnIndex = orders[i];
+      var s = schema[columnIndex];
+
+      if (s && s.hidden) {
+        s.hidden = false;
+        self.dispatchEvent('columnunhide', {
+          columnIndex: columnIndex
+        });
+      }
+    }
+
+    self.refresh();
+  };
+  /**
+   * Hide rows
+   * @memberof canvasDatagrid
+   * @name hideRows
+   * @method
+   * @param {number} beginRowIndex The begin row index
+   * @param {number} endRowIndex The end row index
+   */
+
+
+  self.hideRows = function (beginRowIndex, endRowIndex) {
+    if ((0,_groups_util__WEBPACK_IMPORTED_MODULE_0__.mergeHiddenRowRanges)(self.hiddenRowRanges, [beginRowIndex, endRowIndex])) self.refresh();
+  };
+  /**
+   * Unhide rows
+   * @memberof canvasDatagrid
+   * @name unhideRows
+   * @method
+   * @param {number} beginRowIndex The begin row index
+   * @param {number} endRowIndex The end row index
+   */
+
+
+  self.unhideRows = function (beginRowIndex, endRowIndex) {
+    self.hiddenRowRanges = self.hiddenRowRanges.filter(function (range) {
+      return range[0] !== beginRowIndex || range[1] !== endRowIndex;
+    });
+    self.refresh();
+  };
   /**
    * Resizes a column to fit the longest value in the column. Call without a value to resize all columns.
    * Warning, can be slow on very large record sets (1m records ~3-5 seconds on an i7).
@@ -10745,6 +11944,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
   /**
    * Add grouping
    * @param {'columns'|'rows'} groupFor
+   * @method
    * @param {number} from
    * @param {number} to
    */
@@ -10836,6 +12036,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
   /**
    * Remove grouping
    * @param {Array<Array<{from:number,to:number,collapsed:boolean}>>} allGroups
+   * @method
    * @param {number} from
    * @param {number} to
    */
@@ -11071,10 +12272,14 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
   self.moveSelection = function (offsetX, offsetY) {
     var sel = [];
+    self.selectedRows = [];
+    self.selectedColumns = [];
     self.selections.forEach(function (row, rowIndex) {
       sel[rowIndex + offsetY] = [];
+      self.selectedRows.push(rowIndex + offsetY);
       row.forEach(function (colIndex) {
         sel[rowIndex + offsetY].push(colIndex + offsetX);
+        if (self.selectedColumns.indexOf(colIndex + offsetX) === -1) self.selectedColumns.push(colIndex + offsetX);
       });
     });
     self.selections = sel;
@@ -11287,6 +12492,25 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       return c.columnIndex === x && c.rowIndex === y;
     })[0];
   };
+  /**
+   * Get an unhide indicator at grid pixel coordinate x and y.
+   * @memberof canvasDatagrid
+   * @name getUnhideIndicator
+   * @method
+   * @param {number} x Number of pixels from the left.
+   * @param {number} y Number of pixels from the top.
+   */
+
+
+  self.getUnhideIndicator = function (x, y) {
+    var indicators = self.visibleUnhideIndicators;
+    if (indicators.length <= 0) return;
+
+    for (var i = 0; i < indicators.length; i++) {
+      var indicator = indicators[i];
+      if (x >= indicator.x && y >= indicator.y && x <= indicator.x2 && y <= indicator.y2) return indicator;
+    }
+  };
   /**
    * Get a column group at grid pixel coordinate x and y.
    * @memberof canvasDatagrid
@@ -11367,6 +12591,14 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
     x -= self.getRowGroupAreaWidth();
     y -= self.getColumnGroupAreaHeight();
+
+    if (self.dragStartObject !== undefined) {
+      if (x <= 0) x = 1;
+      if (x >= self.width) x = self.width - 1;
+      if (y <= 0) y = 1;
+      if (y >= self.height) y = self.height - 1;
+    }
+
     var border,
         tsz = useTouchScrollZones ? self.attributes.touchScrollZone : 0,
         moveMode = self.attributes.borderDragBehavior === 'move',
@@ -11411,14 +12643,16 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
       if (entitiy.x - self.style.cellBorderWidth < x && entitiy.x + entitiy.width + self.style.cellBorderWidth > x && entitiy.y - self.style.cellBorderWidth < y && entitiy.y + entitiy.height + self.style.cellBorderWidth > y) {
         if (/frozen-row-marker/.test(cell.style)) {
+          if (self.dragMode === 'frozen-column-marker') continue;
           cell.dragContext = cell.style;
-          cell.context = 'row-resize';
+          cell.context = 'grab';
           return cell;
         }
 
         if (/frozen-column-marker/.test(cell.style)) {
+          if (self.dragMode === 'frozen-row-marker') continue;
           cell.dragContext = cell.style;
-          cell.context = 'col-resize';
+          cell.context = 'grab';
           return cell;
         }
 
@@ -11497,7 +12731,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         }
 
         if (cell.style === 'columnHeaderCell') {
-          if (cell.x + cell.width - self.attributes.columnGrabZoneSize - self.style.cellBorderWidth > x || !self.attributes.allowRowReordering) {
+          if (!self.isColumnSelected(cell.columnIndex) && cell.x + cell.width - self.attributes.columnGrabZoneSize - self.style.cellBorderWidth > x || !self.attributes.allowRowReordering) {
             cell.dragContext = 'cell';
             cell.context = 'cell';
           } else {
@@ -11509,7 +12743,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         }
 
         if (cell.style === 'rowHeaderCell') {
-          if (self.attributes.rowGrabZoneSize + (cell.y - self.style.cellBorderWidth) < y || !self.attributes.allowRowReordering) {
+          if (!self.isRowSelected(cell.rowIndex) && self.attributes.rowGrabZoneSize + (cell.y - self.style.cellBorderWidth) < y || !self.attributes.allowRowReordering) {
             cell.dragContext = 'cell';
             cell.context = 'cell';
           } else {
@@ -11646,6 +12880,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
     if (!ctrl) {
       self.selections = [];
+      self.selectedRows = [];
+      self.selectedColumns = [];
     }
 
     if (self.selectionBounds.top < -1 || self.selectionBounds.bottom > self.viewData.length || self.selectionBounds.left < -1 || self.selectionBounds.right > s.length) {
@@ -11654,11 +12890,16 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
     for (x = self.selectionBounds.top; x <= self.selectionBounds.bottom; x += 1) {
       self.selections[x] = [];
+      self.selectedRows.push(x);
 
       for (y = self.selectionBounds.left; y <= self.selectionBounds.right; y += 1) {
         if (self.selections[x].indexOf(y) === -1) {
           self.selections[x].push(y);
         }
+
+        if (y !== -1 && self.selectedColumns.indexOf(y) === -1) {
+          self.selectedColumns.push(y);
+        }
       }
     }
 
@@ -11699,7 +12940,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       }
 
       self.ctx.font = self.style.columnHeaderCellFont;
-      var t = self.ctx.measureText(col.title || col.name).width + self.style.headerCellPaddingRight + self.style.headerCellPaddingLeft;
+      var t = self.ctx.measureText(col.title || col.name).width + self.style.columnHeaderCellPaddingRight + self.style.columnHeaderCellPaddingLeft + self.style.cellAutoResizePadding;
       m = t > m ? t : m;
       formatter = self.formatters[col.type];
     });