canvas-datagrid 0.25.3 → 0.26.0

package/lib/publicMethods.js

@@ -2,6 +2,8 @@
 /*globals define: true, MutationObserver: false, requestAnimationFrame: false, performance: false, btoa: false*/
 'use strict';
 
+import { mergeHiddenRowRanges } from './groups/util';
+
 export default function (self) {
   /**
    * Converts a integer into a letter A - ZZZZZ...
@@ -37,10 +39,14 @@ export default function (self) {
     }
     self.validateColumn(c, s);
     s.splice(index, 0, c);
-    self.data.forEach(function (row) {
-      self.applyDefaultValue(row, c);
+
+    self.originalData.forEach(function (row, rowIndex) {
+      self.applyDefaultValue(row, c, rowIndex);
     });
     self.intf.schema = s;
+
+    self.refresh();
+    self.dispatchDataChanged('insertcolumn', { column: c, index: index });
   };
   /**
    * Deletes a column from the schema at the specified index.
@@ -51,13 +57,18 @@ export default function (self) {
    * @param {number} index The index of the column to delete.
    */
   self.deleteColumn = function (index) {
-    var s = self.getSchema();
+    var schema = self.getSchema();
+
     // remove data matching this column name from data
-    self.data.forEach(function (row) {
-      delete row[s[index].name];
+    self.originalData.forEach(function (row) {
+      delete row[schema[index].name];
     });
-    s.splice(index, 1);
-    self.intf.schema = s;
+
+    schema.splice(index, 1);
+    self.intf.schema = schema;
+
+    self.refresh();
+    self.dispatchDataChanged('deletecolumn', { index: index });
   };
   /**
    * Adds a new column into the schema.
@@ -71,10 +82,13 @@ export default function (self) {
     var s = self.getSchema();
     self.validateColumn(c, s);
     s.push(c);
-    self.data.forEach(function (row) {
-      self.applyDefaultValue(row, c);
+    self.originalData.forEach(function (row, rowIndex) {
+      self.applyDefaultValue(row, c, rowIndex);
     });
     self.intf.schema = s;
+
+    self.refresh();
+    self.dispatchDataChanged('addcolumn', { column: c });
   };
   /**
    * Deletes a row from the dataset at the specified index.
@@ -87,6 +101,7 @@ export default function (self) {
     self.originalData.splice(index, 1);
     self.setFilter();
     self.resize(true);
+    self.dispatchDataChanged('deleterow', { index: index });
   };
   /**
    * Inserts a new row into the dataset before the specified index.
@@ -103,11 +118,15 @@ export default function (self) {
     self.originalData.splice(index, 0, d);
     self.getSchema().forEach(function (c) {
       if (d[c.name] === undefined) {
-        self.applyDefaultValue(self.originalData[index], c);
+        self.applyDefaultValue(self.originalData[index], c, index);
       }
     });
+
+    // setFilter calls .refresh(), so we need not call it again:
     self.setFilter();
+
     self.resize(true);
+    self.dispatchDataChanged('insertrow', { row: d, index: index });
   };
   /**
    * Adds a new row into the dataset.
@@ -123,11 +142,16 @@ export default function (self) {
         self.applyDefaultValue(
           self.originalData[self.originalData.length - 1],
           c,
+          self.originalData.length - 1,
         );
       }
     });
+
+    // setFilter calls .refresh(), so we need not call it again:
     self.setFilter();
+
     self.resize(true);
+    self.dispatchDataChanged('addrow', { row: d });
   };
   /**
    * Sets the height of a given row by index number.
@@ -190,8 +214,20 @@ export default function (self) {
       delete self.columnFilters[column];
     } else {
       self.columnFilters[column] = value;
+      if (self.attributes.showFilterInCell) {
+        self.filterable.rows.push(0);
+        self.orders.columns.forEach(function (value, index) {
+          self.filterable.columns.push(index);
+        });
+      }
+    }
+    if (!Object.keys(self.columnFilters).length) {
+      self.filterable = {
+        rows: [],
+        columns: [],
+      };
     }
-    self.applyDataTransforms();
+    self.refresh();
   };
   /**
    * Returns the number of pixels to scroll down to line up with row rowIndex.
@@ -202,7 +238,9 @@ export default function (self) {
    */
   self.findRowScrollTop = function (rowIndex) {
     if (self.scrollCache.y[rowIndex] === undefined) {
-      throw new RangeError('Row index out of range.');
+      throw new RangeError(
+        `Row index ${rowIndex} out of range: ${self.scrollCache.y.length}.`,
+      );
     }
     return self.scrollCache.y[rowIndex];
   };
@@ -220,7 +258,7 @@ export default function (self) {
     }
     return (
       self.scrollCache.x[i] -
-      self.getColummnWidth(self.orders.columns[columnIndex])
+      self.getColumnWidth(self.orders.columns[columnIndex])
     );
   };
   /**
@@ -249,6 +287,11 @@ export default function (self) {
     targetY -= sbh * offsetY;
     if (x !== undefined && y !== undefined) {
       self.scrollBox.scrollTo(targetX, targetY);
+      if (!offsetX && !offsetY) {
+        // nothing to correct; a deferred re-scroll would only undo a scroll
+        // the user made in the meantime (#313)
+        return;
+      }
       requestAnimationFrame(function () {
         cell = self.getVisibleCellByIndex(x, y);
         // HACK: just don't offset if the target cell cannot be seen
@@ -276,6 +319,64 @@ export default function (self) {
   self.gotoRow = function (y) {
     self.gotoCell(0, y);
   };
+  /**
+   * Add a button into the cell.
+   * @memberof canvasDatagrid
+   * @name addButton
+   * @method
+   * @param {number} columnIndex The column index of the cell to to add a button.
+   * @param {number} rowIndex The row index of the cell to to add a button.
+   * @param {object} offset Offset how far go away from cell.
+   * @param {object} items a list of items to add into button menu.
+   * @param {string} imgSrc icon path to add into button.
+   */
+  self.addButton = function (columnIndex, rowIndex, offset, items, imgSrc) {
+    var cells = self.visibleCells.filter(function (c) {
+      return c.sortColumnIndex === columnIndex && c.sortRowIndex === rowIndex;
+    });
+
+    self.attachButton(
+      {
+        top: cells[0].y + cells[0].height + offset.y,
+        left: cells[0].x + cells[0].width + offset.x,
+      },
+      items,
+      imgSrc,
+    );
+  };
+
+  /**
+   * Expand/Collapse CellTree.
+   * @memberof canvasDatagrid
+   * @name toggleCellCollapseTree
+   * @method
+   * @param {array} treeData The array of cellTree to expand or collapse.
+   */
+
+  self.toggleCellCollapseTree = function (treeData) {
+    for (let type in treeData) {
+      for (let t of treeData[type])
+        if (t.length > 0) self.toggleCollapseTree(t[0], t[1], type);
+    }
+    self.draw();
+  };
+
+  /**
+   * Expand/Collapse CellTree.
+   * @memberof canvasDatagrid
+   * @name expandCollapseCellTree
+   * @method
+   * @param {array} treeData The array of cellTree to expand or collapse.
+   */
+
+  self.expandCollapseCellTree = function (treeData) {
+    for (let type in treeData) {
+      for (let t of treeData[type])
+        if (t.length > 0) self.cellTreeExpandCollapse(t[0], t[1], type);
+    }
+    self.draw();
+  };
+
   /**
    * Scrolls the cell at cell x, row y into view if it is not already.
    * @memberof canvasDatagrid
@@ -287,18 +388,25 @@ export default function (self) {
    * @param {number} [offsetY=0] Percentage offset the cell should be from the top edge (not including headers).  The default is 0, meaning the cell will appear at the top edge. Valid values are 0 through 1. 1 = Bottom, 0 = Top, 0.5 = Center.
    */
   self.scrollIntoView = function (x, y, offsetX, offsetY) {
-    if (
-      self.visibleCells.filter(function (cell) {
-        return (
-          (cell.rowIndex === y || y === undefined) &&
-          (cell.columnIndex === x || x === undefined) &&
-          cell.x > 0 &&
-          cell.y > 0 &&
-          cell.x + cell.width < self.width &&
-          cell.y + cell.height < self.height
-        );
-      }).length === 0
-    ) {
+    const matched = self.visibleCells.filter(function (cell) {
+      return (
+        (cell.rowIndex === y || y === undefined) &&
+        (cell.columnIndex === x || x === undefined) &&
+        cell.x > 0 &&
+        cell.y > 0 &&
+        cell.x + cell.width < self.width &&
+        cell.y + cell.height < self.height
+      );
+    });
+    if (matched.length === 1 && x !== undefined && y !== undefined) {
+      // goto specific cell and its part be hidden by header
+      if (
+        matched[0].x < self.getRowHeaderCellWidth() ||
+        matched[0].y < self.getColumnHeaderCellHeight()
+      )
+        matched.length = 0;
+    }
+    if (matched.length === 0) {
       self.gotoCell(x, y, offsetX, offsetY);
     }
   };
@@ -311,6 +419,7 @@ export default function (self) {
    * @param {number} y The row index of the cell to set active.
    */
   self.setActiveCell = function (x, y) {
+    if (typeof x === 'undefined') return;
     if (x < 0) {
       x = 0;
     }
@@ -321,213 +430,40 @@ export default function (self) {
       rowIndex: y,
       columnIndex: x,
     };
-  };
-  /**
-   * Removes the selection.
-   * @memberof canvasDatagrid
-   * @name selectNone
-   * @param {boolean} dontDraw Suppress the draw method after the selection change.
-   * @method
-   */
-  self.selectNone = function (dontDraw) {
-    self.selections = [];
-    self.dispatchEvent('selectionchanged', {
-      selectedData: self.getSelectedData(),
-      selections: self.selections,
-      selectionBounds: self.selectionBounds,
-    });
-    if (dontDraw) {
-      return;
-    }
-    self.draw();
-  };
-  /**
-   * Selects every visible cell.
-   * @memberof canvasDatagrid
-   * @name selectAll
-   * @param {boolean} dontDraw Suppress the draw method after the selection change.
-   * @method
-   */
-  self.selectAll = function (dontDraw) {
-    self.selectArea({
-      top: 0,
-      left: -1,
-      right: self.getSchema().length - 1,
-      bottom: self.data.length - 1,
-    });
-    if (dontDraw) {
-      return;
-    }
-    self.draw();
-  };
-  /**
-   * Returns true if the selected columnIndex is selected on every row.
-   * @memberof canvasDatagrid
-   * @name isColumnSelected
-   * @method
-   * @param {number} columnIndex The column index to check.
-   */
-  self.isColumnSelected = function (columnIndex) {
-    var colIsSelected = true;
-    self.data.forEach(function (row, rowIndex) {
-      if (
-        !self.selections[rowIndex] ||
-        self.selections[rowIndex].indexOf(self.orders.columns[columnIndex]) ===
-          -1
-      ) {
-        colIsSelected = false;
-      }
-    });
-    return colIsSelected;
-  };
-  /**
-   * Runs the defined method on each selected cell.
-   * @memberof canvasDatagrid
-   * @name forEachSelectedCell
-   * @method
-   * @param {number} fn The function to execute.  The signature of the function is: (data, rowIndex, columnName).
-   * @param {number} expandToRow When true the data in the array is expanded to the entire row.
-   */
-  self.forEachSelectedCell = function (fn, expandToRow) {
-    var d = [],
-      s = expandToRow ? self.getSchema() : self.getVisibleSchema(),
-      l = self.data.length;
-    self.selections.forEach(function (row, index) {
-      if (index === l) {
-        return;
-      }
-      if (row.length === 0) {
-        d[index] = null;
-        return;
-      }
-      d[index] = {};
-      row.forEach(function (col) {
-        if (col === -1 || !s[col]) {
-          return;
-        }
-        fn(self.data, index, s[col].name);
-      });
+    self.dispatchEvent('activecellchanged', {
+      cell: self.activeCell,
     });
   };
+
   /**
-   * Selects a column.
-   * @memberof canvasDatagrid
-   * @name selectColumn
-   * @method
-   * @param {number} columnIndex The column index to select.
-   * @param {boolean} toggleSelectMode When true, behaves as if you were holding control/command when you clicked the column.
-   * @param {boolean} shift When true, behaves as if you were holding shift when you clicked the column.
-   * @param {boolean} supressSelectionchangedEvent When true, prevents the selectionchanged event from firing.
+   * Dispatches `datachanged` with the source of the change so listeners can
+   * react to edits, pastes, deletions and row/column changes, not only to the
+   * data setter (#250, #512).
+   * @param {string} source One of data, edit, paste, cut, delete, fill, addrow, insertrow, deleterow, addcolumn, insertcolumn, deletecolumn.
+   * @param {object} [details] Extra event details.
    */
-  self.selectColumn = function (columnIndex, ctrl, shift, supressEvent) {
-    var s, e, x;
-    function addCol(i) {
-      self.data.forEach(function (row, rowIndex) {
-        self.selections[rowIndex] = self.selections[rowIndex] || [];
-        if (self.selections[rowIndex].indexOf(i) === -1) {
-          self.selections[rowIndex].push(i);
-        }
-      });
-    }
-    function removeCol(i) {
-      self.data.forEach(function (row, rowIndex) {
-        self.selections[rowIndex] = self.selections[rowIndex] || [];
-        if (self.selections[rowIndex].indexOf(i) !== -1) {
-          self.selections[rowIndex].splice(
-            self.selections[rowIndex].indexOf(i),
-            1,
-          );
-        }
-      });
-    }
-    if (shift) {
-      if (!self.activeCell) {
-        return;
-      }
-      s = Math.min(self.activeCell.columnIndex, columnIndex);
-      e = Math.max(self.activeCell.columnIndex, columnIndex);
-      for (x = s; e > x; x += 1) {
-        addCol(x);
-      }
-    }
-    if (!ctrl && !shift) {
-      self.selections = [];
-      self.activeCell.columnIndex = columnIndex;
-      self.activeCell.rowIndex = self.scrollIndexTop;
-    }
-    if (ctrl && self.isColumnSelected(columnIndex)) {
-      removeCol(columnIndex);
-    } else {
-      addCol(columnIndex);
-    }
-    if (supressEvent) {
-      return;
-    }
-    self.dispatchEvent('selectionchanged', {
-      selectedData: self.getSelectedData(),
-      selections: self.selections,
-      selectionBounds: self.getSelectionBounds(),
-    });
+  self.dispatchDataChanged = function (source, details) {
+    self.dispatchEvent(
+      'datachanged',
+      Object.assign({ data: self.originalData, source: source }, details || {}),
+    );
   };
   /**
-   * Selects a row.
-   * @memberof canvasDatagrid
-   * @name selectRow
-   * @method
-   * @param {number} rowIndex The row index to select.
-   * @param {boolean} ctrl When true, behaves as if you were holding control/command when you clicked the row.
-   * @param {boolean} shift When true, behaves as if you were holding shift when you clicked the row.
-   * @param {boolean} supressSelectionchangedEvent When true, prevents the selectionchanged event from firing.
+   * Dispatches the `resizerow` event with one consistent payload (#503).
+   * Canonical keys: `rowIndex`, `height`, `width`, `x`, `y`, `draggingItem`,
+   * `NativeEvent`. `cellHeight` and `row` are kept as deprecated aliases of
+   * `height` for listeners written against older versions.
+   * @param {object} details Event details; `height` is required.
+   * @returns {boolean} true when a listener called preventDefault.
    */
-  self.selectRow = function (rowIndex, ctrl, shift, supressEvent) {
-    var x,
-      st,
-      en,
-      s = self.getVisibleSchema();
-    function de() {
-      if (supressEvent) {
-        return;
-      }
-      self.dispatchEvent('selectionchanged', {
-        selectedData: self.getSelectedData(),
-        selections: self.selections,
-        selectionBounds: self.selectionBounds,
-      });
-    }
-    function addRow(ri) {
-      self.selections[ri] = [];
-      self.selections[ri].push(-1);
-      s.forEach(function (col, index) {
-        self.selections[ri].push(self.orders.columns.indexOf(col.index));
-      });
-    }
-    if (self.dragAddToSelection === false || self.dragObject === undefined) {
-      if (
-        self.selections[rowIndex] &&
-        self.selections[rowIndex].length - 1 === s.length
-      ) {
-        if (ctrl) {
-          self.selections[rowIndex] = [];
-          de();
-          return;
-        }
-      }
+  self.dispatchResizeRow = function (details) {
+    var ev = Object.assign({}, details);
+    if (ev.y === undefined) {
+      ev.y = ev.height;
     }
-    if (self.dragAddToSelection === true || self.dragObject === undefined) {
-      if (shift && self.dragObject === undefined) {
-        if (!self.activeCell) {
-          return;
-        }
-        st = Math.min(self.activeCell.rowIndex, rowIndex);
-        en = Math.max(self.activeCell.rowIndex, rowIndex);
-        for (x = st; en >= x; x += 1) {
-          addRow(x);
-        }
-      } else {
-        addRow(rowIndex);
-      }
-    }
-    de();
+    ev.cellHeight = ev.height;
+    ev.row = ev.height;
+    return self.dispatchEvent('resizerow', ev);
   };
   /**
    * Collapse a tree grid by row index.
@@ -539,7 +475,7 @@ export default function (self) {
   self.collapseTree = function (rowIndex) {
     self.dispatchEvent('collapsetree', {
       childGrid: self.childGrids[rowIndex],
-      data: self.data[rowIndex],
+      data: self.viewData[rowIndex],
       rowIndex: rowIndex,
     });
     self.openChildren[rowIndex].blur();
@@ -547,8 +483,9 @@ export default function (self) {
     delete self.openChildren[rowIndex];
     delete self.sizes.trees[rowIndex];
     delete self.childGrids[rowIndex];
-    self.dispatchEvent('resizerow', {
-      cellHeight: self.style.cellHeight,
+    self.dispatchResizeRow({
+      height: self.style.cellHeight,
+      rowIndex: rowIndex,
     });
     self.resize(true);
     self.draw(true);
@@ -561,7 +498,9 @@ export default function (self) {
    * @param {number} index The index of the row to expand.
    */
   self.expandTree = function (rowIndex) {
-    var trArgs = self.args.treeGridAttributes || {},
+    // copy so the caller's object is not mutated; `self.args` is empty in
+    // web-component mode, the value lives on the instance (#444)
+    var trArgs = Object.assign({}, self.treeGridAttributes || {}),
       columnHeaderCellHeight = self.getColumnHeaderCellHeight(),
       rowHeaderCellWidth =
         self.sizes.columns.cornerCell || self.style.rowHeaderCellWidth,
@@ -584,7 +523,7 @@ export default function (self) {
         offsetParent: self.intf.parentNode,
         parentNode: self.intf.parentNode,
         style: 'tree',
-        data: self.data[rowIndex],
+        data: self.viewData[rowIndex],
       };
       treeGrid = self.createGrid(trArgs);
       self.childGrids[rowIndex] = treeGrid;
@@ -593,12 +532,15 @@ export default function (self) {
     treeGrid.visible = true;
     self.dispatchEvent('expandtree', {
       treeGrid: treeGrid,
-      data: self.data[rowIndex],
+      data: self.viewData[rowIndex],
       rowIndex: rowIndex,
     });
     self.openChildren[rowIndex] = treeGrid;
     self.sizes.trees[rowIndex] = h;
-    self.dispatchEvent('resizerow', { height: self.style.cellHeight });
+    self.dispatchResizeRow({
+      height: self.style.cellHeight,
+      rowIndex: rowIndex,
+    });
     self.resize(true);
   };
   /**
@@ -633,6 +575,101 @@ export default function (self) {
       }
     }
   };
+  /**
+   * Hide column/columns
+   * @memberof canvasDatagrid
+   * @name hideColumns
+   * @method
+   * @param {number} beginColumnOrderIndex The begin column order index
+   * @param {number} [endColumnOrderIndex] The end column order index
+   */
+  self.hideColumns = function (beginColumnOrderIndex, endColumnOrderIndex) {
+    const schema = self.getSchema();
+    const orders = self.orders.columns;
+    const hiddenColumns = [];
+    if (typeof endColumnOrderIndex !== 'number')
+      endColumnOrderIndex = beginColumnOrderIndex;
+    for (
+      let orderIndex = beginColumnOrderIndex;
+      orderIndex <= endColumnOrderIndex;
+      orderIndex++
+    ) {
+      const columnIndex = orders[orderIndex];
+      if (columnIndex >= 0 && !schema[columnIndex].hidden) {
+        hiddenColumns.push(columnIndex);
+        schema[columnIndex].hidden = true;
+
+        self.dispatchEvent('columnhide', {
+          columnIndex,
+        });
+      }
+    }
+
+    if (hiddenColumns.length > 0) {
+      self.setStorageData();
+      setTimeout(function () {
+        self.resize(true);
+      }, 10);
+    }
+
+    self.dispatchEvent('hidecolumns', {
+      hiddenColumns,
+    });
+  };
+  /**
+   * Unihde column/columns
+   * @memberof canvasDatagrid
+   * @name unhideColumns
+   * @method
+   * @param {number} beginColumnOrderIndex The begin column order index
+   * @param {number} [endColumnOrderIndex] The end column order index
+   */
+  self.unhideColumns = function (beginColumnOrderIndex, endColumnOrderIndex) {
+    const orders = self.orders.columns;
+    const schema = self.getSchema();
+
+    for (let i = beginColumnOrderIndex; i <= endColumnOrderIndex; i++) {
+      const columnIndex = orders[i];
+      const s = schema[columnIndex];
+
+      if (s && s.hidden) {
+        s.hidden = false;
+
+        self.dispatchEvent('columnunhide', {
+          columnIndex,
+        });
+      }
+    }
+    self.refresh();
+  };
+  /**
+   * Hide rows
+   * @memberof canvasDatagrid
+   * @name hideRows
+   * @method
+   * @param {number} beginRowIndex The begin row index
+   * @param {number} endRowIndex The end row index
+   */
+  self.hideRows = function (beginRowIndex, endRowIndex) {
+    if (
+      mergeHiddenRowRanges(self.hiddenRowRanges, [beginRowIndex, endRowIndex])
+    )
+      self.refresh();
+  };
+  /**
+   * Unhide rows
+   * @memberof canvasDatagrid
+   * @name unhideRows
+   * @method
+   * @param {number} beginRowIndex The begin row index
+   * @param {number} endRowIndex The end row index
+   */
+  self.unhideRows = function (beginRowIndex, endRowIndex) {
+    self.hiddenRowRanges = self.hiddenRowRanges.filter(
+      (range) => 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).
@@ -645,9 +682,39 @@ export default function (self) {
     if (!self.canvas) {
       return;
     }
-    self.sizes.columns[
-      name === 'cornerCell' ? -1 : self.getHeaderByName(name).index
-    ] = Math.max(self.findColumnMaxTextLength(name), self.style.minColumnWidth);
+
+    if (name === undefined) {
+      // fit every column, as documented (#193)
+      self.getSchema().forEach(function (column) {
+        self.fitColumnToValues(column.name, true);
+      });
+      if (!internal) {
+        self.resize();
+        self.draw(true);
+      }
+      return;
+    }
+
+    const header = name === 'cornerCell' ? null : self.getHeaderByName(name);
+    if (name !== 'cornerCell' && !header) {
+      console.warn('fitColumnToValues: no column named %s', name);
+      return;
+    }
+    const columnIndex = name === 'cornerCell' ? -1 : header.index;
+
+    const newSize = Math.max(
+      self.findColumnMaxTextLength(name),
+      self.style.minColumnWidth,
+    );
+
+    self.sizes.columns[columnIndex] = newSize;
+
+    self.dispatchEvent('resizecolumn', {
+      x: newSize,
+      y: self.resizingStartingHeight,
+      draggingItem: self.currentCell,
+    });
+
     if (!internal) {
       self.resize();
       self.draw(true);
@@ -700,6 +767,10 @@ export default function (self) {
     sortFunction,
     dontSetStorageData,
   ) {
+    if (!self.attributes.allowSorting) {
+      self.refresh();
+      return;
+    }
     var f,
       c = self.getSchema().filter(function (col) {
         return col.name === columnName;
@@ -714,7 +785,7 @@ export default function (self) {
     }
     self.orderBy = columnName;
     self.orderDirection = direction;
-    if (!self.data || self.data.length === 0) {
+    if (!self.viewData || self.viewData.length === 0) {
       return;
     }
     if (c.length === 0) {
@@ -732,41 +803,264 @@ export default function (self) {
       direction,
       typeof f === 'function' ? f : self.sorters.string,
     );
-    self.orderings.sort();
+    self.refresh();
     self.dispatchEvent('sortcolumn', {
       name: columnName,
       direction: direction,
     });
-    self.draw(true);
+
     if (dontSetStorageData) {
       return;
     }
     self.setStorageData();
   };
-  self.isInGrid = function (e) {
-    if (e.x < 0 || e.x > self.width || e.y < 0 || e.y > self.height) {
-      return false;
+
+  /**
+   * Add grouping
+   * @param {'columns'|'rows'} groupFor
+   * @method
+   * @param {number} from
+   * @param {number} to
+   */
+  function addGroup(groupFor, from, to) {
+    let newRow = false;
+    const allGroups =
+      groupFor === 'rows' ? self.groupedRows : self.groupedColumns;
+    for (let i = allGroups.length - 1; i >= 0; i--) {
+      const groups = allGroups[i];
+      const min = groups[0].from,
+        max = groups[groups.length - 1].to;
+      if (from <= min && to >= max) {
+        if (from === min && to === max && groups.length === 1) return; // nothings happened
+        // new group wrap this row
+        continue;
+      }
+      for (let gi = 0; gi < groups.length; gi++) {
+        const g = groups[gi];
+        if (from > g.to) continue;
+        if (from >= g.from) {
+          if (to > g.to) {
+            if (from === g.from) {
+              allGroups.splice(i, 0, [{ from, to, collapsed: false }]);
+              self.refresh();
+              return;
+            }
+            throw new Error(`Can't group these ${groupFor}`);
+          }
+          if (to === g.to) {
+            if (from === g.from) return; // nothings happened
+          }
+          newRow = true;
+          break;
+        }
+        if (to >= g.from) {
+          if (to < g.to) throw new Error(`Can't group these ${groupFor}`);
+          allGroups.splice(i, 0, [{ from, to, collapsed: false }]);
+        } else {
+          groups.splice(gi, 0, { from, to, collapsed: false });
+        }
+        self.refresh();
+        return;
+      }
+      if (newRow) continue;
+      groups.push({ from, to, collapsed: false });
+      self.refresh();
+      return;
     }
-    return true;
+    if (newRow) allGroups.push([{ from, to, collapsed: false }]);
+    else allGroups.unshift([{ from, to, collapsed: false }]);
+    self.refresh();
+  }
+  /**
+   * Remove grouping
+   * @param {Array<Array<{from:number,to:number,collapsed:boolean}>>} allGroups
+   * @method
+   * @param {number} from
+   * @param {number} to
+   */
+  function removeGroup(allGroups, from, to) {
+    for (let i = 0; i < allGroups.length; i++) {
+      const groups = allGroups[i];
+      for (let gi = 0; gi < groups.length; gi++) {
+        const group = groups[gi];
+        if (group.from === from && group.to === to) {
+          if (groups.length <= 1) allGroups.splice(i, 1);
+          else groups.splice(gi, 1);
+          self.refresh();
+          return;
+        }
+      }
+    }
+  }
+  /**
+   * Grouping columns
+   * @memberof canvasDatagrid
+   * @name groupColumns
+   * @method
+   * @param {number|string} firstColumnName Name of the first column to be grouped.
+   * @param {number|string} lastColumnName Name of the last column to be grouped.
+   */
+  self.groupColumns = function (firstColumnName, lastColumnName) {
+    /** @type {Array<{name: string,columnIndex:number}>} */
+    const schema = self.getSchema();
+    let firstOne, lastOne;
+    for (let i = 0; i < schema.length; i++) {
+      const it = schema[i];
+      if (firstOne && lastOne) break;
+      if (it.name === firstColumnName) {
+        firstOne = it;
+        continue;
+      }
+      if (it.name === lastColumnName) {
+        lastOne = it;
+        continue;
+      }
+    }
+    if (!firstOne) throw new Error(`No such column name for first column`);
+    if (!lastOne) throw new Error(`No such column name for last column`);
+    if (lastOne.columnIndex > firstOne.columnIndex !== true)
+      throw new Error(`Can't group these columns`);
+
+    const from = firstOne.columnIndex;
+    const to = lastOne.columnIndex;
+    const ev = { group: { type: 'columns', from, to } };
+    try {
+      addGroup('columns', from, to);
+    } catch (error) {
+      ev.error = error;
+    }
+    self.dispatchEvent('aftercreategroup', ev);
   };
   /**
-   * Moves the current selection relative to the its current position.  Note: this method does not move the selected data, just the selection itself.
+   * Grouping columns
    * @memberof canvasDatagrid
-   * @name moveSelection
+   * @name groupRows
    * @method
-   * @param {number} offsetX The number of columns to offset the selection.
-   * @param {number} offsetY The number of rows to offset the selection.
+   * @param {number} rowIndexFrom The row index which is the beginning of the group
+   * @param {number} rowIndexTo The row index which is the end of the group
    */
-  self.moveSelection = function (offsetX, offsetY) {
-    var sel = [];
-    self.selections.forEach(function (row, rowIndex) {
-      sel[rowIndex + offsetY] = [];
-      row.forEach(function (colIndex) {
-        sel[rowIndex + offsetY].push(colIndex + offsetX);
-      });
-    });
-    self.selections = sel;
+  self.groupRows = function (rowIndexFrom, rowIndexTo) {
+    if (!Number.isInteger(rowIndexFrom) || rowIndexFrom < 0)
+      throw new Error(`No such row for the beginning of the group`);
+
+    const dataLength = self.viewData.length;
+    if (
+      !Number.isInteger(rowIndexFrom) ||
+      rowIndexTo <= rowIndexFrom ||
+      rowIndexTo >= dataLength
+    )
+      throw new Error(`No such row for the end of the group`);
+    const ev = {
+      group: {
+        type: 'rows',
+        from: rowIndexFrom,
+        to: rowIndexTo,
+      },
+    };
+    try {
+      addGroup('rows', rowIndexFrom, rowIndexTo);
+    } catch (error) {
+      ev.error = error;
+    }
+    self.dispatchEvent('aftercreategroup', ev);
+  };
+  /**
+   * Remove grouping columns
+   * @memberof canvasDatagrid
+   * @name removeGroupColumns
+   * @method
+   * @param {number|string} firstColumnName Name of the first column to be grouped.
+   * @param {number|string} lastColumnName Name of the last column to be grouped.
+   */
+  self.removeGroupColumns = function (firstColumnName, lastColumnName) {
+    /** @type {Array<{name:string,columnIndex:number}>} */
+    const schema = self.getSchema();
+    let firstOne, lastOne;
+    for (let i = 0; i < schema.length; i++) {
+      const it = schema[i];
+      if (firstOne && lastOne) break;
+      if (it.name === firstColumnName) {
+        firstOne = it;
+        continue;
+      }
+      if (it.name === lastColumnName) {
+        lastOne = it;
+        continue;
+      }
+    }
+    if (!firstOne) throw new Error(`No such column name for first column`);
+    if (!lastOne) throw new Error(`No such column name for last column`);
+    const from = firstOne.columnIndex;
+    const to = lastOne.columnIndex;
+    removeGroup(self.groupedColumns, from, to);
+  };
+  /**
+   * Remove grouping columns
+   * @memberof canvasDatagrid
+   * @name removeGroupRows
+   * @method
+   * @param {number} rowIndexFrom The row index which is the beginning of the group
+   * @param {number} rowIndexTo The row index which is the end of the group
+   */
+  self.removeGroupRows = function (rowIndexFrom, rowIndexTo) {
+    removeGroup(self.groupedRows, rowIndexFrom, rowIndexTo);
+  };
+  /**
+   * Toggle(expand/collapsed) grouping columns
+   * @memberof canvasDatagrid
+   * @name toggleGroupColumns
+   * @method
+   * @param {number|string} firstColumnName Name of the first column to be grouped.
+   * @param {number|string} lastColumnName Name of the last column to be grouped.
+   */
+  self.toggleGroupColumns = function (firstColumnName, lastColumnName) {
+    /** @type {Array<{name:string,columnIndex:number}>} */
+    const schema = self.getSchema();
+    let firstOne, lastOne;
+    for (let i = 0; i < schema.length; i++) {
+      const it = schema[i];
+      if (firstOne && lastOne) break;
+      if (it.name === firstColumnName) {
+        firstOne = it;
+        continue;
+      }
+      if (it.name === lastColumnName) {
+        lastOne = it;
+        continue;
+      }
+    }
+    if (!firstOne || !lastOne) return;
+    const from = firstOne.columnIndex;
+    const to = lastOne.columnIndex;
+    if (self.toggleGroup({ type: 'c', from, to })) {
+      self.disposeContextMenu();
+      self.setStorageData();
+      self.refresh();
+    }
   };
+  /**
+   * Toggle(expand/collapsed) grouping rows
+   * @memberof canvasDatagrid
+   * @name toggleGroupRows
+   * @method
+   * @param {number} rowIndexFrom The row index which is the beginning of the group
+   * @param {number} rowIndexTo The row index which is the end of the group
+   */
+  self.toggleGroupRows = function (rowIndexFrom, rowIndexTo) {
+    if (self.toggleGroup({ type: 'r', from: rowIndexFrom, to: rowIndexTo })) {
+      self.disposeContextMenu();
+      self.setStorageData();
+      self.refresh();
+    }
+  };
+
+  self.isInGrid = function (e) {
+    if (e.x < 0 || e.x > self.width || e.y < 0 || e.y > self.height) {
+      return false;
+    }
+    return true;
+  };
+
   /**
    * Moves data in the provided selection to another position in the grid.  Moving data off the edge of the schema (columns/x) will truncate data.
    * @memberof canvasDatagrid
@@ -777,15 +1071,21 @@ export default function (self) {
    * @param {number} y The row index to start inserting the selection at.
    */
   self.moveTo = function (sel, x, y) {
-    var d = self.getSelectedData(),
-      s = self.getVisibleSchema(),
-      l = sel.length,
+    // TODO: optimize this function,
+    // we just transform the `sel` to obselete selection matrix
+    sel = self.getObsoleteSelectionMatrix(sel);
+
+    // TODO: this function is not migrated done
+    var selectedData = self.getSelectedData(),
+      visibleSchema = self.getVisibleSchema(),
+      selectionLength = sel.length,
       xi,
       maxRowLength = -Infinity,
       minXi = Infinity,
       yi = y - 1;
-    sel.forEach(function (row, index) {
-      if (index === l) {
+
+    sel.forEach(function (row, rowIndex) {
+      if (rowIndex === selectionLength) {
         return;
       }
       if (row.length === 0) {
@@ -796,15 +1096,21 @@ export default function (self) {
       row.forEach(function (colIndex) {
         // intentional redef of colIndex
         colIndex = self.getVisibleColumnIndexOf(colIndex);
-        if (!s[colIndex]) {
+        if (!visibleSchema[colIndex]) {
           return;
         }
-        if (!self.data[index]) {
-          self.data[index] = {};
+        // TODO:
+        if (!self.data) {
+          self.data = {};
+        }
+        if (!self.data[rowIndex]) {
+          self.data[rowIndex] = {};
         }
-        self.data[index][s[colIndex].name] = null;
+        // TODO:
+        self.data[rowIndex][visibleSchema[colIndex].name] = null;
       });
     });
+
     sel.forEach(function (row, index) {
       var lastSourceIndex;
       yi += 1;
@@ -819,20 +1125,71 @@ export default function (self) {
         lastSourceIndex = colIndex;
         if (
           colIndex === -1 ||
-          !s[xi] ||
-          !s[colIndex] ||
+          !visibleSchema[xi] ||
+          !visibleSchema[colIndex] ||
+          // TODO:
           self.data.length - 1 < yi ||
           yi < 0
         ) {
           return;
         }
+        // TODO:
         if (!self.data[yi]) {
           self.data[yi] = {};
         }
-        self.data[yi][s[xi].name] = d[index][s[colIndex].name];
+        // TODO:
+        self.data[yi][visibleSchema[xi].name] =
+          selectedData[index][visibleSchema[colIndex].name];
       });
     });
   };
+  /**
+   * Get the column group info given column belongs to
+   * @memberof canvasDatagrid
+   * @name getGroupsColumnBelongsTo
+   * @method
+   * @param {number} columnIndex Column index.
+   * @returns {Array<{from:number,to:number,collapsed:boolean}>}
+   */
+  self.getGroupsColumnBelongsTo = function (columnIndex) {
+    if (!self.attributes.allowGroupingColumns) return [];
+    const result = [];
+    for (let i = 0; i < self.groupedColumns.length; i++) {
+      const groups = self.groupedColumns[i];
+      for (let j = 0; j < groups.length; j++) {
+        const group = groups[j];
+        if (columnIndex >= group.from && columnIndex <= group.to) {
+          result.push(group);
+          break;
+        }
+      }
+    }
+    return result;
+  };
+  /**
+   * Get the row group info given row belongs to
+   * @memberof canvasDatagrid
+   * @name getGroupsRowBelongsTo
+   * @method
+   * @param {number} rowIndex Row index.
+   * @returns {Array<{from:number,to:number,collapsed:boolean}>}
+   */
+  self.getGroupsRowBelongsTo = function (rowIndex) {
+    if (!self.attributes.allowGroupingRows) return [];
+    const result = [];
+    for (let i = 0; i < self.groupedRows.length; i++) {
+      const groups = self.groupedRows[i];
+      for (let j = 0; j < groups.length; j++) {
+        const group = groups[j];
+        if (rowIndex >= group.from && rowIndex <= group.to) {
+          result.push(group);
+          break;
+        }
+      }
+    }
+    return result;
+  };
+
   /**
    * Checks if a given column is visible.
    * @memberof canvasDatagrid
@@ -877,6 +1234,66 @@ export default function (self) {
       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) {
+    const indicators = self.visibleUnhideIndicators;
+    if (indicators.length <= 0) return;
+    for (let i = 0; i < indicators.length; i++) {
+      const 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
+   * @name getColumnGroupAt
+   * @method
+   * @param {number} x Number of pixels from the left.
+   * @param {number} y Number of pixels from the top.
+   */
+  self.getColumnGroupAt = function (x, y) {
+    const groups = self.groupedColumns.length;
+    if (groups <= 0) return;
+    const yZero = self.getColumnGroupAreaHeight();
+    if (y >= yZero) return;
+    for (let i = 0; i < self.visibleGroups.length; i++) {
+      const g = self.visibleGroups[i];
+      if (g.type !== 'c') continue;
+      if (x >= g.x && y >= g.y && x <= g.x2 && y <= g.y2) return g;
+    }
+  };
+  /**
+   * Get a row group at grid pixel coordinate x and y.
+   * @memberof canvasDatagrid
+   * @name getRowGroupAt
+   * @method
+   * @param {number} x Number of pixels from the left.
+   * @param {number} y Number of pixels from the top.
+   */
+  self.getRowGroupAt = function (x, y) {
+    const groups = self.groupedRows.length;
+    if (groups <= 0) return;
+    const xZero = self.getRowGroupAreaWidth();
+    if (x >= xZero) return;
+    for (let i = 0; i < self.visibleGroups.length; i++) {
+      const g = self.visibleGroups[i];
+      if (g.type !== 'r') continue;
+      if (x >= g.x && y >= g.y && x <= g.x2 && y <= g.y2) return g;
+    }
+  };
   /**
    * Gets the cell at grid pixel coordinate x and y.  Author's note.  This function ties drawing and events together.  This is a very complex function and is core to the component.
    * @memberof canvasDatagrid
@@ -918,6 +1335,16 @@ export default function (self) {
     if (!self.visibleCells) {
       return;
     }
+    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',
@@ -964,13 +1391,15 @@ export default function (self) {
         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;
         }
         if (/selection-handle-/.test(cell.style)) {
@@ -1017,6 +1446,11 @@ export default function (self) {
         if (
           ['l', 'r'].indexOf(border) !== -1 &&
           (self.attributes.allowColumnResize || moveBorder) &&
+          !(
+            self.attributes.fillLastColumn &&
+            border === 'r' &&
+            cell.sortColumnIndex === self.getLastVisibleColumnIndex()
+          ) &&
           ((self.attributes.allowColumnResizeFromCell && cell.isNormal) ||
             !cell.isNormal ||
             moveBorder) &&
@@ -1066,15 +1500,29 @@ export default function (self) {
           }
         }
         if (cell.style === 'columnHeaderCell') {
-          cell.context = 'cell';
-          cell.dragContext = 'column-reorder';
+          if (
+            (!self.isColumnSelected(cell.columnIndex) &&
+              cell.x +
+                cell.width -
+                self.attributes.columnGrabZoneSize -
+                self.style.cellBorderWidth >
+                x) ||
+            !self.attributes.allowColumnReordering
+          ) {
+            cell.dragContext = 'cell';
+            cell.context = 'cell';
+          } else {
+            cell.context = self.cursorGrab;
+            cell.dragContext = 'column-reorder';
+          }
           return cell;
         }
         if (cell.style === 'rowHeaderCell') {
           if (
-            self.attributes.rowGrabZoneSize +
-              (cell.y - self.style.cellBorderWidth) <
-              y ||
+            (!self.isRowSelected(cell.rowIndex) &&
+              self.attributes.rowGrabZoneSize +
+                (cell.y - self.style.cellBorderWidth) <
+                y) ||
             !self.attributes.allowRowReordering
           ) {
             cell.dragContext = 'cell';
@@ -1111,32 +1559,6 @@ export default function (self) {
       isBackground: true,
     };
   };
-  /**
-   * Gets the bounds of current selection.
-   * @returns {rect} selection.
-   * @memberof canvasDatagrid
-   * @name getSelectionBounds
-   * @method
-   */
-  self.getSelectionBounds = function () {
-    var low = { x: Infinity, y: Infinity },
-      high = { x: -Infinity, y: -Infinity };
-    self.selections.forEach(function (row, rowIndex) {
-      var maxCol, minCol;
-      low.y = rowIndex < low.y ? rowIndex : low.y;
-      high.y = rowIndex > high.y ? rowIndex : high.y;
-      maxCol = Math.max.apply(null, row);
-      minCol = Math.min.apply(null, row);
-      low.x = minCol < low.x ? minCol : low.x;
-      high.x = maxCol > high.x ? maxCol : high.x;
-    });
-    return {
-      top: low.y,
-      left: low.x,
-      bottom: high.y,
-      right: high.x,
-    };
-  };
   /**
    * Returns an auto generated schema based on data structure.
    * @memberof canvasDatagrid
@@ -1146,7 +1568,7 @@ export default function (self) {
    * @returns {schema} schema A schema based on the first item in the data array.
    */
   self.getSchemaFromData = function (d) {
-    d = d || self.data;
+    d = d || self.originalData;
     return Object.keys(d[0] || { ' ': '' }).map(function mapEachSchemaColumn(
       key,
       index,
@@ -1183,57 +1605,6 @@ export default function (self) {
   self.clearChangeLog = function () {
     self.changes = [];
   };
-  /**
-   * Selects an area of the grid.
-   * @memberof canvasDatagrid
-   * @name selectArea
-   * @method
-   * @param {rect} bounds A rect object representing the selected values.
-   */
-  self.selectArea = function (bounds, ctrl) {
-    self.selectionBounds = bounds || self.selectionBounds;
-    var ev,
-      x,
-      y,
-      s = self.getSchema();
-    if (!ctrl) {
-      self.selections = [];
-    }
-    if (
-      self.selectionBounds.top < -1 ||
-      self.selectionBounds.bottom > self.data.length ||
-      self.selectionBounds.left < -1 ||
-      self.selectionBounds.right > s.length
-    ) {
-      throw new Error('Impossible selection area');
-    }
-    for (
-      x = self.selectionBounds.top;
-      x <= self.selectionBounds.bottom;
-      x += 1
-    ) {
-      self.selections[x] = [];
-      for (
-        y = self.selectionBounds.left;
-        y <= self.selectionBounds.right;
-        y += 1
-      ) {
-        if (self.selections[x].indexOf(y) === -1) {
-          self.selections[x].push(y);
-        }
-      }
-    }
-    ev = {
-      selections: self.selections,
-      selectionBounds: self.selectionBounds,
-    };
-    Object.defineProperty(ev, 'selectedData', {
-      get: function () {
-        return self.getSelectedData();
-      },
-    });
-    self.dispatchEvent('selectionchanged', ev);
-  };
   /**
    * Returns the maximum text width for a given column by column name.
    * @memberof canvasDatagrid
@@ -1248,7 +1619,9 @@ export default function (self) {
       self.ctx.font = self.style.rowHeaderCellFont;
       return (
         self.ctx.measureText(
-          (self.data.length + (self.attributes.showNewRow ? 1 : 0)).toString(),
+          (
+            self.viewData.length + (self.attributes.showNewRow ? 1 : 0)
+          ).toString(),
         ).width +
         self.style.autosizePadding +
         self.style.autosizeHeaderCellPadding +
@@ -1269,12 +1642,13 @@ export default function (self) {
       self.ctx.font = self.style.columnHeaderCellFont;
       var t =
         self.ctx.measureText(col.title || col.name).width +
-        self.style.headerCellPaddingRight +
-        self.style.headerCellPaddingLeft;
+        self.style.columnHeaderCellPaddingRight +
+        self.style.columnHeaderCellPaddingLeft +
+        self.style.cellAutoResizePadding;
       m = t > m ? t : m;
       formatter = self.formatters[col.type];
     });
-    self.data.forEach(function (row) {
+    self.viewData.forEach(function (row) {
       var text = row[name];
       if (formatter) {
         text = formatter({ cell: { value: text } });
@@ -1313,16 +1687,46 @@ export default function (self) {
   /**
    * Gets the width of a column by index.
    * @memberof canvasDatagrid
-   * @name getColummnWidth
+   * @name getColumnWidth
    * @method
    * @param {number} columnIndex The column index to lookup.
    */
-  self.getColummnWidth = function (columnIndex) {
-    return (
+  self.getColumnWidth = function (columnIndex) {
+    const column = self.getSchema()[columnIndex] || {};
+    const configuredWidth =
       (self.sizes.columns[columnIndex] ||
-        self.getSchema()[columnIndex].width ||
-        self.style.cellWidth) * self.scale
-    );
+        column.width ||
+        self.style.cellWidth) * self.scale;
+    if (
+      self.autoLastColumnWidth &&
+      self.autoLastColumnWidth.index === columnIndex
+    ) {
+      return Math.max(configuredWidth, self.autoLastColumnWidth.width);
+    }
+    return configuredWidth;
+  };
+  self.getLastVisibleColumnIndex = function () {
+    const schema = self.getSchema();
+    const collapsedColumnGroups = self.getCollapsedColumnGroups();
+    const isColumnCollapsed = (columnIndex) =>
+      collapsedColumnGroups.some(
+        (group) => columnIndex >= group.from && columnIndex <= group.to,
+      );
+    for (
+      let viewIndex = self.orders.columns.length - 1;
+      viewIndex >= 0;
+      viewIndex -= 1
+    ) {
+      const schemaIndex = self.orders.columns[viewIndex];
+      if (
+        schema[schemaIndex] &&
+        !schema[schemaIndex].hidden &&
+        !isColumnCollapsed(viewIndex)
+      ) {
+        return schemaIndex;
+      }
+    }
+    return -1;
   };
   self.formatters.string = function cellFormatterString(e) {
     return e.cell.value !== undefined ? e.cell.value : '';
@@ -1334,23 +1738,15 @@ export default function (self) {
   self.formatters.html = self.formatters.string;
   self.sorters.string = function (columnName, direction) {
     var asc = direction === 'asc';
+    // Coerce every value to a string so numbers, booleans and blanks sort
+    // consistently (blanks first ascending, last descending) (#256, #548).
+    function toComparable(value) {
+      return value === undefined || value === null ? '' : String(value);
+    }
     return function (a, b) {
-      if (a[columnName] === undefined || a[columnName] === null) {
-        return 1;
-      }
-      if (b[columnName] === undefined || b[columnName] === null) {
-        return 0;
-      }
-      if (asc) {
-        if (!a[columnName].localeCompare) {
-          return 1;
-        }
-        return a[columnName].localeCompare(b[columnName]);
-      }
-      if (!b[columnName].localeCompare) {
-        return 1;
-      }
-      return b[columnName].localeCompare(a[columnName]);
+      const aValue = toComparable(a[columnName]);
+      const bValue = toComparable(b[columnName]);
+      return asc ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
     };
   };
   self.sorters.number = function (columnName, direction) {