canvas-datagrid 0.4.1 → 0.4.4

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;
-        }
-
-        if (index !== prev + 1 || !row || row.length === 0) {
-          ok = false;
-          return;
-        }
+      var _range = getSelectedContiguousRows(false) || [];
 
-        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], ['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'], ['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'], ['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
@@ -3480,7 +3723,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 +4043,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 +4067,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 +4259,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 +4276,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 +4434,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 +4511,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 +4737,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 +4808,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 +4822,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 +4938,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 +4970,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 +5082,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 +5105,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');
         }
       }
@@ -4771,40 +5199,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 +5271,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);
         }
       }
     }
@@ -5103,6 +5606,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 +5703,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 +5741,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 +5754,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 +5870,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)
 
 
@@ -5432,6 +5951,13 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
   self.mousemove = function (e, overridePos) {
     if (self.contextMenu || self.input) {
       return;
+    } // Cancel dragging action if user ventures outside grid
+
+
+    if (self.draggingItem && e.which === 0) {
+      self.stopFreezeMove(e);
+      self.mouseup(e);
+      return;
     }
 
     self.mouse = overridePos || self.getLayerPos(e);
@@ -5479,6 +6005,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) {
@@ -5549,6 +6090,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) {
@@ -5631,6 +6173,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) {
@@ -5645,7 +6189,14 @@ 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;
+            }
           }
         }
 
@@ -5719,6 +6270,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);
 
@@ -5858,8 +6419,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;
@@ -5936,7 +6497,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) {
@@ -5958,7 +6519,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);
       }
     }
@@ -5975,6 +6536,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 = {
@@ -5997,8 +6559,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,
@@ -6012,27 +6574,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) {
@@ -6041,14 +6610,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);
+          }
         }
       }
 
@@ -6083,8 +6657,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', {
@@ -6115,13 +6689,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();
 
@@ -6138,12 +6724,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;
@@ -6154,11 +6740,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', {
@@ -6172,6 +6756,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     }
 
     self.draw(true);
+    self.resize();
   };
 
   self.mousedown = function (e, overridePos) {
@@ -6196,6 +6781,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         move = /-move/.test(self.dragMode),
         freeze = /frozen-row-marker|frozen-column-marker/.test(self.dragMode),
         resize = /-resize/.test(self.dragMode);
+    var onUnhideIndicator = self.hovers && self.hovers.unhideIndicator;
     self.dragStart = overridePos || self.getLayerPos(e);
     self.scrollStart = {
       left: self.scrollBox.scrollLeft,
@@ -6207,6 +6793,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     if (!ctrl && !e.shiftKey && !/(vertical|horizontal)-scroll-(bar|box)/.test(self.dragStartObject.context) && self.currentCell && !self.currentCell.isColumnHeader && !move && !freeze && !resize) {
       if (!(self.dragMode == 'row-reorder' && self.isMultiRowsSelected) && !(self.currentCell.hovered && self.hovers.onFilterButton)) {
         self.selections = [];
+        self.selectedRows = [];
+        self.selectedColumns = [];
       }
     }
 
@@ -6214,7 +6802,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);
@@ -6227,8 +6815,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;
     }
@@ -6240,7 +6828,10 @@ 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);
       }
 
@@ -6259,8 +6850,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);
     }
 
@@ -6277,12 +6868,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) {
@@ -6292,22 +6885,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;
     }
   };
@@ -6552,6 +7145,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] || [];
@@ -6697,6 +7292,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       });
     } else {
       var selections = [];
+      self.selectedRows = [];
+      self.selectedColumns = [];
 
       for (var rowIndex = 0; rowIndex < rows.length; rowIndex++) {
         // Rows may have been moved by user, so get the actual row index
@@ -6706,6 +7303,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
         var existingRowData = self.viewData[realRowIndex];
         var newRowData = Object.assign({}, existingRowData);
         selections[realRowIndex] = [];
+        self.selectedRows.push(realRowIndex);
 
         for (var colIndex = 0; colIndex < cells.length; colIndex++) {
           var column = schema[startColIndex + colIndex];
@@ -6727,6 +7325,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
           selections[realRowIndex].push(startColIndex + colIndex);
           newRowData[columnName] = cellData;
+          if (self.selectedColumns.indexOf(startColIndex + colIndex) === -1) self.selectedColumns.push(startColIndex + colIndex);
         }
 
         self.originalData[self.boundRowIndexMap.get(realRowIndex)] = newRowData; // Update view date here to avoid a full refresh of `viewData`.
@@ -7063,6 +7662,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":
@@ -7164,6 +7847,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,
@@ -7185,6 +7883,8 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
     trees: {}
   };
   self.selections = [];
+  self.selectedRows = [];
+  self.selectedColumns = [];
   self.filterable = {
     rows: [],
     columns: []
@@ -7244,7 +7944,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
@@ -7825,7 +8525,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),
@@ -7860,8 +8576,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];
@@ -7878,17 +8594,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];
 
@@ -7897,8 +8613,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
@@ -8092,7 +8808,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);
@@ -8106,7 +8821,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) {
@@ -8700,6 +9416,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 {
@@ -9763,7 +10483,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";
@@ -9771,6 +10491,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*/
@@ -9782,6 +10503,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...
@@ -10221,6 +10943,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;
     }
@@ -10245,6 +10969,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,
@@ -10282,51 +11008,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.
@@ -10376,6 +11093,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) {
@@ -10407,19 +11126,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) {
@@ -10470,6 +11195,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));
       });
     }
 
@@ -10494,9 +11220,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);
       }
     }
 
@@ -10620,6 +11349,102 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
       }
     }
   };
+  /**
+   * Hide column/columns
+   * @memberof canvasDatagrid
+   * @name hideColumns
+   * @method
+   * @param {number} beginColumnOrderIndex
+   * @param {number} [endColumnOrderIndex]
+   */
+
+
+  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
+   * @param {number} [endColumnOrderIndex]
+   */
+
+
+  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
+   * @param {number} endRowIndex
+   */
+
+
+  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
+   * @param {number} endRowIndex
+   */
+
+
+  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).
@@ -10738,6 +11563,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
    */
@@ -10829,6 +11655,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
    */
@@ -11064,10 +11891,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;
@@ -11280,6 +12111,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
@@ -11360,6 +12210,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',
@@ -11404,14 +12262,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;
         }
 
@@ -11490,7 +12350,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 {
@@ -11502,7 +12362,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 {
@@ -11639,6 +12499,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) {
@@ -11647,11 +12509,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);
+        }
       }
     }
 
@@ -11692,7 +12559,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];
     });