@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

package/lib/core/es6/data/DataView.js

@@ -0,0 +1,4144 @@
+import Ext from "../../../tr-grid-util/es6/Ext.js";
+import DataCache from "./DataCache.js";
+import DataTable from "./DataTable.js";
+import WrappedView from "./WrappedView.js"; // eslint-disable-line
+import ColumnStats from "./ColumnStats.js";
+import Segment from "./Segment.js"; // eslint-disable-line
+import EventDispatcher from "../grid/event/EventDispatcher.js";
+import Util from "../grid/util/util.js";
+import { Conflator } from "../../../tr-grid-util/es6/Conflator.js";
+
+/** @event DataView#dataChanged
+* @description Trigger when data within the data view has been changed. Not only actual change in data, but also position change will trigger this event.
+* @property {boolean} globalChange Indicates a big change. User should expect all data has been change. With active sorting or filtering, this flag will always be true due to multiple changes in row position.
+* @property {string} type Type of changes. Possible values are "inserted", "removed", "updated", and undefined
+* @property {string} rid Row Id
+* @property {Object.<string, *>} rowData Column values of the changed row in JSON object format
+*/
+/** @event DataView#pageIndexChanged
+* @property {number} pageIndex
+*/
+/** @event DataView#pageCountChanged
+* @property {number} pageCount
+*/
+/** @event DataView#preDisposed
+*/
+/** @event DataView#groupAdded
+* @property {DataView} dataView Parent data view that create the new group
+* @property {DataView} newGroup Child data view that is newly created
+*/
+/** @event DataView#beforeGroupAdded
+* @description Fired each time before group added. Set property `cancel` to true to cancel adding of the new group
+* @type {Object}
+* @property {DataView} dataView Parent data view that create the new group
+* @property {string} newGroupId
+* @property {*} newGroupValue
+* @property {string} newGroupRowId Unique row Id given for the group
+*/
+/** @event DataView#groupCriteriaChanged
+* @type {Object}
+*/
+/** @event DataView#beforeFiltering
+* @description Fired once before actual row filtering (before multiple execution of filter logic). This allow optimization by preparing data needed for the filtering
+* @type {Object}
+*/
+/** @event DataView#wrapCountChanged
+* @property {number} prevCount
+* @property {number} newCount
+*/
+/** @event DataView#wrapSizeChanged
+* @property {number} wrapSize
+* @property {Array.<string>} rids
+*/
+
+/** DataView doesn't hold the actual data. It is just a transform view (by applying filtering or sorting) of the data from the {@link DataTable}
+* @constructor
+* @extends {EventDispatcher}
+* @param {DataTable|DataView=} source
+* @see {@link DataTable}
+*/
+let DataView = function(source) {
+	let t = this; // For file minification
+	t._groupFilterLogic = t._groupFilterLogic.bind(t);
+	t._internalGroupSortingLogic = t._internalGroupSortingLogic.bind(t);
+
+	t._onDataChanged = t._onDataChanged.bind(t);
+	t._onGroupAdded = t._onGroupAdded.bind(t);
+	t._onBeforeGroupAdded = t._onBeforeGroupAdded.bind(t);
+	t._onRefreshTimeout = t._onRefreshTimeout.bind(t);
+	t._updateWrapCount = t._updateWrapCount.bind(t);
+
+	t._byRemovalMap = t._byRemovalMap.bind(t);
+
+	t._rids = [];
+	t._sortingDefs = [];
+	t._columnStats = {};
+	t._shared = {};
+
+	t._conflator = new Conflator(this._onDataChanged, 0);
+	t._conflator.disable();
+
+	t._addEvents("dataChanged",
+		"preDisposed",
+		"pageIndexChanged",
+		"pageCountChanged",
+		"groupAdded",
+		"beforeGroupAdded",
+		"groupCriteriaChanged",
+		"beforeFiltering",
+		"wrapCountChanged",
+		"wrapSizeChanged"
+	);
+
+	t.setDataSource(source);
+};
+Ext.inherits(DataView, EventDispatcher);
+
+/** List of row Ids with filtering and sorting transformation
+* @private
+* @type {!Array.<string>}
+*/
+DataView.prototype._rids; // Contains only data rows that have been filtered
+/** List of row Ids with grouping transformation
+* @private
+* @type {Array.<string>}
+*/
+DataView.prototype._groupView = null; // Contains non-data rows (e.g. group headers, group footers) and exclude collapsed group data rows
+/** List of row Ids with paging transformation
+* @private
+* @type {Array.<string>}
+*/
+DataView.prototype._pageView = null; // Cut-off version of _rids or _groupView
+/** List of row Ids with expanding transformation
+* @private
+* @type {Array.<string>}
+*/
+DataView.prototype._expansionView = null; // The rids with row expansion
+
+/** @private
+* @type {Object.<string, boolean>}
+*/
+DataView.prototype._hiddenRids = null;
+/** @private
+* @type {Object.<string, boolean>}
+*/
+DataView.prototype._collapsedRids = null; // for segmentation
+/** @private
+* @type {Object.<string, number>}
+*/
+DataView.prototype._excludedRids = null;
+/** @private
+* @type {boolean}
+*/
+DataView.prototype._emptySegmentFiltering = false;
+/** @private
+* @type {boolean}
+*/
+DataView.prototype._separatorFiltering = false;
+
+/** @private
+* @type {Object.<string, number>}
+*/
+DataView.prototype._expansionMap = null;
+/** @private
+* @type {Object.<string, string>}
+*/
+DataView.prototype._expansionChildren = null;
+/** @private
+* @type {number}
+*/
+DataView.prototype._expansionCount = 0;
+
+/** @private
+* @type {DataTable}
+*/
+DataView.prototype._dt = null;
+/** @private
+* @type {DataTable|DataView}
+*/
+DataView.prototype._parent = null;
+/** @private
+* @type {Object}
+*/
+DataView.prototype._shared = null; // Shared options between data view in the same hierarchy
+
+/** @private
+* @type {Array.<Array>}
+*/
+DataView.prototype._sortingDefs = null;
+
+/** @private
+* @type {function(string, Object.<string, *>)|null}
+*/
+DataView.prototype._userFilter = null;
+/** @private
+* @type {boolean}
+*/
+DataView.prototype._filteringOut = false;
+
+/** @private
+* @type {number}
+*/
+DataView.prototype._refreshTimerId = 0;
+
+/** @private
+* @type {Function}
+*/
+DataView.prototype._groupSortingLogic = null;
+
+/** @private
+* @type {boolean}
+*/
+DataView.prototype._pageCorrection = true;
+/** @private
+* @type {number}
+*/
+DataView.prototype._pageSize = 0;
+/** @private
+* @type {number}
+*/
+DataView.prototype._pageIndex = 1;
+/** @private
+* @type {number}
+*/
+DataView.prototype._lastPageIndex = 0;
+
+/** @private
+* @type {Array.<Function>}
+*/
+DataView.prototype._groupCriteria = null; // Shared between groups
+/** @private
+* @type {Array.<Array>}
+*/
+DataView.prototype._preDefGroups = null;
+/** @private
+* @type {boolean}
+*/
+DataView.prototype._preDefGroupsDirty = false;
+/** @private
+* @type {Object.<string, DataView>}
+*/
+DataView.prototype._groupMembers = null; // Map of immediate child data views (key is id)
+/** @private
+* @type {Array.<string>}
+*/
+DataView.prototype._groupList = null; // List of immediate child's ids
+/** A map object that contains all groups with key is group row id and value is the group DataView
+* @private
+* @type {Object.<string, DataView>}
+*/
+DataView.prototype._groupRows = null; // Shared between groups
+/** @private
+* @type {string}
+*/
+DataView.prototype._groupId = "";
+/** @private
+* @type {string}
+*/
+DataView.prototype._groupColor = "";
+/** @private
+* @type {*}
+*/
+DataView.prototype._groupValue;
+/** @private
+* @type {string}
+*/
+DataView.prototype._groupRowId = "";
+/** @private
+* @type {Array.<string>}
+*/
+DataView.prototype._footerRowIds = null;
+/** @private
+* @type {number}
+*/
+DataView.prototype._groupLevel = 0;
+/** @private
+* @type {boolean}
+*/
+DataView.prototype._groupViewDirty = false;
+
+/** @private
+* @type {Object.<string, ColumnStats>}
+*/
+DataView.prototype._columnStats;
+
+/** @private
+* @type {boolean}
+*/
+DataView.prototype._hidden = false;
+/** @private
+* @type {boolean}
+*/
+DataView.prototype._hiddenHeaderRow = false;
+/** @private
+* @type {boolean}
+*/
+DataView.prototype._collapsed = false;
+/** @private
+* @type {boolean}
+*/
+DataView.prototype._collapsible = true;
+/** @private
+* @type {boolean}
+*/
+DataView.prototype._showOnlyFirstMember = false;
+/** @private
+* @type {boolean}
+*/
+DataView.prototype._beingAdded = false;
+/** @private
+* @type {Conflator}
+*/
+DataView.prototype._conflator = null;
+/** @private
+* @type {Array.<WrappedView>}
+*/
+DataView.prototype._wrappedViews = null;
+/** @private
+* @type {number}
+*/
+DataView.prototype._wrapSize = 0;
+/** @private
+* @type {number}
+*/
+DataView.prototype._wrapTimerId = 0;
+/** @private
+* @type {boolean}
+*/
+DataView.prototype._stalledSorting = false;
+
+/** @public
+* @fires DataView#preDisposed
+*/
+DataView.prototype.dispose = function() {
+	this._dispatch("preDisposed", {});
+
+	this.unlistenAll();
+	this.wrapView(0);
+
+	this.setDataSource(null); // Remove this._dt and this._parent. WARNING: an event is fired
+	this.groupBy(null); // Remove this._groupCriteria, this._groupRows and all of its children. WARNING: an event is fired
+
+	this._conflator.dispose();
+	this._sortingDefs = null;
+	this._shared = null; // Remove shared options
+
+	this._userFilter = this._groupSortingLogic = null;
+
+	if(this._wrapTimerId) {
+		clearTimeout(this._wrapTimerId);
+		this._wrapTimerId = 0;
+	}
+	if(this._refreshTimerId) {
+		clearTimeout(this._refreshTimerId);
+		this._refreshTimerId = 0;
+	}
+
+	if(this._columnStats) {
+		for(let field in this._columnStats) {
+			this._columnStats[field].dispose();
+		}
+		this._columnStats = null;
+	}
+};
+
+/** Get data by row id and column id (field)
+* @public
+* @param {string} rid
+* @param {string} cid
+* @returns {Object.<string, *>}
+*/
+DataView.prototype.getData = function(rid, cid) {
+	return this._dt.getData(rid, cid);
+};
+/** Get entire row data by row id
+* @public
+* @param {string} rid
+* @return {Object.<string, *>}
+*/
+DataView.prototype.getRowData = function(rid) {
+	return this._dt.getRowData(rid);
+};
+/** @public
+* @param {string} cid
+* @param {boolean=} inclNonDataRow=false If enabled, group header rows are included
+* @return {!Array}
+*/
+DataView.prototype.getColumnData = function(cid, inclNonDataRow) {
+	let rids = this.getAllRowIds(true, inclNonDataRow);
+
+	let rows = [];
+	let len = rids.length;
+	for(let r = 0; r < len; ++r) {
+		let rowData = this._dt.getRowData(rids[r]);
+		if(rowData) {
+			rows.push(rowData[cid]);
+		} else if(inclNonDataRow) {
+			rows.push(null);
+		}
+	}
+	return rows;
+};
+/** @public
+* @param {number} rowIndex
+* @return {string}
+* @see {@link DataView#getRowIndex}
+*/
+DataView.prototype.getRowId = function(rowIndex) {
+	this._rebuildRowIdsFromChildren();
+
+	return this._getRids()[rowIndex] || "";
+};
+/** @private
+* @param {number|string} rowRef
+* @return {string}
+*/
+DataView.prototype._toRowId = function(rowRef) {
+	if(typeof rowRef === "number") {
+		this._rebuildRowIdsFromChildren();
+		return this._getRids()[rowRef] || "";
+	}
+	return /** @type{string} */(rowRef || "");
+};
+/** @private
+* @param {Array.<number|string>} rowRefs
+* @return {!Array.<string>}
+*/
+DataView.prototype._toRowIds = function(rowRefs) {
+	let rowCount = Array.isArray(rowRefs) ? rowRefs.length : 0;
+	let ary = new Array(rowCount);
+	let rids = this._getRids();
+	for(let r = 0; r < rowCount; ++r) {
+		let rowRef = rowRefs[r];
+		if(typeof rowRef === "number") {
+			this._rebuildRowIdsFromChildren();
+			ary[r] = rids[rowRef] || "";
+		} else {
+			ary[r] = rowRef || "";
+		}
+	}
+	return ary;
+};
+/** Return all row ids with row data, excluding the group header rows (auto generated rows).
+* @public
+* @param {boolean=} shallowCopy=false If enabled, no new copy of Array is created (better for performance).
+* @param {boolean=} inclNonDataRow=false If enabled, group header rows are included. In pagination mode, this flag will always be true.
+* @return {!Array.<string>}
+* @see {@link DataView#getAllRowData}
+* @see {@link DataView#getMultipleRowData}
+* @see {@link DataView#getSortedRowIds}
+* @see {@link DataView#getVisibleRowIds}
+*/
+DataView.prototype.getAllRowIds = function(shallowCopy, inclNonDataRow) {
+	this._rebuildRowIdsFromChildren();
+
+	// WARNING: this._pageView can contain non-data rows (group header rows), even if inclNonDataRow flag is false
+	let rids = (inclNonDataRow) ? this._getRids() : (this._pageView || this._rids);
+
+	return (shallowCopy) ? rids : rids.slice(0); // Fastest way to clone an array is Array.slice()
+};
+/** This method returns current visible rows (i.e. Rows in other pages or in collapsed groups are excluded). Group header rows may be included in the results.
+* @public
+* @param {boolean=} shallowCopy=false If enabled, no new copy of Array is created (better for performance).
+* @return {!Array.<string>}
+* @see {@link DataView#getAllRowData}
+*/
+DataView.prototype.getVisibleRowIds = function(shallowCopy) {
+	this._rebuildRowIdsFromChildren();
+	let rids = this._getRids();
+	return shallowCopy ? rids : rids.slice(0); // Fastest way to clone an array
+};
+/** Return all data rows that is filtered and sorted, excluding header rows or paging. This method ignores pagination.
+* @public
+* @param {boolean=} shallowCopy=false If enabled, no new copy of Array is created (better for performance).
+* @return {!Array.<string>}
+* @see {@link DataView#getAllRowData}
+*/
+DataView.prototype.getSortedRowIds = function(shallowCopy) {
+	this._rebuildRowIdsFromChildren();
+	return shallowCopy ? this._rids : this._rids.slice(0); // Fastest way to clone an array
+};
+/** This method is quite slow
+* @public
+* @param {string} rid
+* @return {number}
+* @see {@link DataView#getRowId}
+*/
+DataView.prototype.getRowIndex = function(rid) {
+	this._rebuildRowIdsFromChildren();
+
+	return this._getRids().indexOf(rid);
+};
+/** @public
+* @return {number}
+*/
+DataView.prototype.getRowCount = function() {
+	return this._getRids().length;
+};
+/** @public
+* @param {number} rowIndex
+* @param {string} cid
+* @returns {Object.<string, *>}
+*/
+DataView.prototype.getDataAt = function(rowIndex, cid) {
+	return this._dt.getData(this.getRowId(rowIndex), cid);
+};
+/** This method is slow. When working with huge amount of rows, use getRowData in combination with getAllRowIds(true) instead of calling getRowDataAt multiple times.
+* @public
+* @param {number} rowIndex
+* @return {Object.<string, *>}
+*/
+DataView.prototype.getRowDataAt = function(rowIndex) {
+	return this._dt.getRowData(this.getRowId(rowIndex));
+};
+/** @public
+* @param {string} rid
+* @param {string} cid
+* @returns {Object.<string, *>}
+*/
+DataView.prototype.getPreviousData = function(rid, cid) {
+	return this._dt.getPreviousData(rid, cid);
+};
+/** @public
+* @param {Array.<string>} rids
+* @param {number=} opt_from
+* @param {number=} opt_to EXCLUSIVE
+* @return {!Array.<Object>}
+*/
+DataView.prototype.getMultipleRowData = function(rids, opt_from, opt_to) {
+	return this._dt.getMultipleRowData(rids, opt_from, opt_to);
+};
+/** Return all rows with row data, excluding the group header rows (auto generated rows)
+* @public
+* @return {!Array.<Object>}
+*/
+DataView.prototype.getAllRowData = function() {
+	return this.getMultipleRowData(this.getAllRowIds(true));
+};
+
+
+/** @public
+* @param {string} rid
+* @param {string} cid
+* @param {*} value
+* @return {boolean} Return true if there is any change, and false otherwise
+* @fires DataView#dataChanged
+*/
+DataView.prototype.setData = function(rid, cid, value) {
+	if(this._dt) {
+		return this._dt.setData(rid, cid, value);
+	}
+	return false;
+};
+/** @public
+* @param {string} rid
+* @param {Object.<string, *>=} values
+* @param {Object=} opt_eventArg
+* @return {boolean} Return true if there is any change, and false otherwise
+* @fires DataView#dataChanged
+*/
+DataView.prototype.setRowData = function(rid, values, opt_eventArg) {
+	if(rid && this._dt) {
+		if (!this.isRowExpansion(rid)) {
+			return this._dt.setRowData(rid, values, opt_eventArg);
+		}
+	}
+	return false;
+};
+/** Set data in a column manner. This is faster than repeatedly calling {@link DataTable#setData}
+* @public
+* @param {string} cid
+* @param {Array} valueList
+* @param {Array.<string>=} opt_ridList Specify row id to be set corresponding to the data item
+*/
+DataView.prototype.setColumnData = function(cid, valueList, opt_ridList) {
+	//  Note: This function should filter out row expansion before calling dt.setColumnData
+	if(this._dt) {
+		this._dt.setColumnData(cid, valueList, opt_ridList);
+	}
+};
+/** This method is slow. When working with huge amount of rows, use setData in combination with getAllRowIds(true) instead of calling setDataAt multiple times.
+* @public
+* @param {number} rowIndex
+* @param {string} cid
+* @param {*} value
+* @return {boolean} Return true if there is any change, and false otherwise
+* @fires DataView#dataChanged
+*/
+DataView.prototype.setDataAt = function(rowIndex, cid, value) {
+	let rid = this.getRowId(rowIndex);
+	if(rid && this._dt) {
+		return this._dt.setData(rid, cid, value);
+	}
+	return false;
+};
+/** This method is slow. When working with huge amount of rows, use setRowData in combination with getAllRowIds(true) instead of calling setRowDataAt multiple times.
+* @public
+* @param {number} rowIndex
+* @param {Object.<string, *>=} values
+* @param {Object=} opt_eventArg
+* @return {boolean} Return true if there is any change, and false otherwise
+* @fires DataView#dataChanged
+*/
+DataView.prototype.setRowDataAt = function(rowIndex, values, opt_eventArg) {
+	let rid = this.getRowId(rowIndex);
+	return this.setRowData(rid, values, opt_eventArg);
+};
+
+/** @public
+* @param {string|number} rowRef The position of the new row
+* @param {Object.<string, *>=} opt_values
+* @param {string|null=} opt_rid If the given row Id already exists, data is updated and no new row is added. Leave blank or null to let DataTable generate unique row Id
+* @return {string} Return Row id that has been inserted or changed
+*/
+DataView.prototype.insertRow = function(rowRef, opt_values, opt_rid) { // Data changed event may be dispatched
+	this._rebuildRowIdsFromChildren(); // TODO: Check if we need to rebuild row ids
+	let nextRid = this._toRowId(rowRef);
+
+	if(this._dt) {
+		return this._dt.insertRow(nextRid, opt_values, opt_rid);
+	}
+	return "";
+};
+
+/** Permanently remove the specified row by row id or DataView's row index. If you want to temporarily remove the row, use {@link DataView#hideRows} instead
+* @public
+* @param {number|string} rowRef
+* @fires DataView#dataChanged
+*/
+DataView.prototype.removeRow = function(rowRef) {
+	if(this._dt) {
+		this._dt.removeRow(this._toRowId(rowRef)); // Trigger dataChanged
+	}
+};
+/** Permanently remove the specified rows by row id or DataView's row index. If you want to temporarily remove the rows, use {@link DataView#hideRows} instead
+* @public
+* @param {Array.<number|string>} rowRefs
+*/
+DataView.prototype.removeRows = function(rowRefs) {
+	if(this._dt) {
+		this._dt.removeRows(this._toRowIds(rowRefs)); // Trigger dataChanged
+	}
+};
+/** Move a single row or multiple rows to the position BEFORE the specified target row.
+* @public
+* @param {Array.<number|string>|number|string} fromRef The value could be row index, row id, or array of row indices or row ids.
+* @param {number|string} toRef Destination target could be row index or row id
+* @return {Array.<string>|string} rid rowId or array of the rowId of the moved row(s)
+* @example
+* ary = [0, 1, 2];
+* move(ary, 0, 1); // [0, 1, 2] Move index 0 to the position before index 1 (nothing is changed)
+* move(ary, 1, 0); // [1, 0, 2] Move index 1 to the position before index 0
+*/
+DataView.prototype.moveRow = function(fromRef, toRef) {
+	let toRid = this._toRowId(toRef);
+
+	let fromIndices = /** @type{!Array.<number|string>} */(Array.isArray(fromRef) ? fromRef : [fromRef]);
+	let fromRids = this._toRowIds(fromIndices);
+
+	if(this._dt.hasSegmentation()) {
+		this.synchronizeRowOrder();
+	}
+
+	return this._dt._moveRow(fromRids, toRid);
+};
+
+/** Deprecated
+* @public
+* @function
+* @param {number} fromIndex
+* @param {number} toIndex INCLUSIVE
+*/
+DataView.prototype.swapRow = Util._deprecatedFunction;
+
+/** Returns the root data source (DataTable) of all data views
+* @public
+* @return {DataTable}
+* @see {@link DataView#getDataSource}
+*/
+DataView.prototype.getDataTable = function() {
+	return this._dt;
+};
+/** Return source for this data view which could be another data view or a data table.
+* @public
+* @return {DataTable|DataView}
+* @see {@link DataView#getDataTable}
+*/
+DataView.prototype.getDataSource = function() {
+	return this._parent;
+};
+/** @public
+* @param {(DataTable|DataView)=} source
+* @fires DataView#dataChanged
+*/
+DataView.prototype.setDataSource = function(source) {
+	if(source) {
+		if(this._groupLevel > 0) {
+			return; // Sub group cannot be changed data source
+		}
+		this._setParent(source);
+
+		this._onDataChanged(DataTable._globalChangeArg); // Update current view
+		this._parent.listen("dataChanged", this._onDataChanged);
+	} else {
+		if(this._parent) {
+			this._parent.unlisten("dataChanged", this._onDataChanged);
+			this._resetAllViews();
+			this._groupViewDirty = false;
+		}
+		this._parent = this._dt = null;
+		this._shared = {}; // The options are no longer shared
+	}
+};
+
+/** @public
+* @param {number} milliSecond
+*/
+DataView.prototype.setConflationRate = function (milliSecond) {
+	this._conflator.disable(!milliSecond);
+	this._conflator.setConflatingTime(milliSecond);
+};
+
+/** @public
+* @return {number}
+*/
+DataView.prototype.getConflationRate = function () {
+	return this._conflator.getConflatingTime();
+};
+
+/** @private
+*/
+DataView.prototype._resetAllViews = function() {
+	this._rids.length = 0;
+	if(this._groupView && this._groupView.length) { this._groupView.length = 0; }
+	if(this._pageView && this._pageView.length) { this._pageView.length = 0; }
+	if(this._expansionView && this._expansionView.length) { this._expansionView.length = 0; }
+};
+
+/**
+* @public
+* @ignore
+* @return {Object.<string, DataTable.SortLogic>}
+*/
+DataView.prototype.getSortingLogics = function() {
+	return this._dt ? this._dt.getSortingLogics() : null;
+};
+/** @public
+* @param {string|Array.<string>} cid
+* @param {string|number|Array.<string|number>=} opt_sortOrder
+* @param {Function|Array.<Function>=} sortLogics
+* @param {boolean=} noOptimization=false Force to sort without optimization to refresh all rowIds again.
+* @fires DataView#dataChanged
+*/
+DataView.prototype.sort = function (cid, opt_sortOrder, sortLogics, noOptimization) {
+	if(this._groupLevel > 0) {
+		window.console.log("ERROR: Sub-group cannot be sorted individually");
+		return;
+	}
+
+	let compMap = this.getSortingLogics();
+	let sortingDefs = this._sortingDefs;
+	let curSortLen = sortingDefs.length;
+
+	if (Array.isArray(sortLogics)) {
+		for(let c = sortLogics.length; --c >= 0;) {
+			if (typeof sortLogics[c] !== "function") {
+				let columnId = Array.isArray(cid) ? cid[c] : cid;
+				sortLogics[c] = compMap[columnId] || compMap["_default"];
+			}
+		}
+	}
+	DataTable._buildSortContext(
+		sortingDefs,
+		cid,
+		opt_sortOrder,
+		sortLogics || compMap
+	);
+	if(sortingDefs.length === 1 && sortingDefs[0][3] === 0) { // Sort order is zero which is resetting to original order
+		sortingDefs.length = 0;
+	}
+	if(curSortLen <= 0 && sortingDefs.length <= 0) {
+		return; // Nothing is changed
+	}
+	if(this._shared.stalledRids) { // The stalled view cannot be changed
+		return;
+	}
+
+	let change = false;
+
+	if (this._groupMembers || sortingDefs.length <= 0 || noOptimization) {
+		change = true;
+		this._updateRowIds(); // WARNING: Slow!
+	} else { // filtering should already be done beforehand
+		change = this._sort();
+	}
+	if (change) {
+		this._dispatchDataChange(DataTable._positionChangeArg);
+	}
+};
+/** @public
+* @param {string|Array.<string>} cid
+* @param {string|number|Array.<string|number>=} opt_sortOrder
+* @fires DataView#dataChanged
+*/
+DataView.prototype.sortOnce = function(cid, opt_sortOrder) {
+	this.sort(cid, opt_sortOrder); // Global change event is dispatched
+	this._sortingDefs.length = 0;
+};
+/** @public
+* @param {DataTable.SortLogic} func
+* @example
+* customLogic = function(a, b, sortOrder) {
+*   return (a - b) * sortOrder; // for numeric comparison
+* };
+* let dt = new DataTable();
+* let dv = new DataView(dt);
+* dv.setSortingLogic(customLogic);
+* dv.sort("Column id", "ascending");
+*/
+DataView.prototype.setSortingLogic = function(func) {
+	if(this._dt) {
+		this._dt.setSortingLogic(func);
+	}
+};
+/** Specified sorting logic for the column with the given column id. This will override logic set by {@link DataView#setSortingLogic}, when the column is sorted
+* @public
+* @param {string} cid
+* @param {DataTable.SortLogic} func Use null to remove current sorting logic
+*/
+DataView.prototype.setColumnSortingLogic = function(cid, func) {
+	if(this._dt) {
+		this._dt.setColumnSortingLogic(cid, func);
+	}
+};
+/** Get sorting logic for the specified field. Default logic is returned, if no logic is specified for the column
+* @public
+* @param {string=} cid
+* @return {DataTable.SortLogic}
+*/
+DataView.prototype.getColumnSortingLogic = function(cid) {
+	if(this._dt) {
+		return this._dt.getColumnSortingLogic(cid);
+	}
+	return null;
+};
+/** Check if this view is in sorting mode
+* @public
+* @return {boolean}
+*/
+DataView.prototype.isSorting = function() {
+	return this._sortingDefs.length > 0;
+};
+
+/** Hide rows in the data view
+ * @param {string|number} rId Row id to hide. If the rId is a number, it will be treated as a row index
+ * @param {boolean=} hidden=true If the value is false, the specified row will be shown.
+ * @public
+ */
+DataView.prototype.hideRow = function(rId, hidden) {
+	this.hideRows([rId], hidden);
+};
+/** Hide rows in the data view
+ * @param {Array.<string|number>} rowRefs Array of row ids or indices to hide
+ * @param {boolean=} hidden=true If the value is false, the specified rows will be shown.
+ * @public
+ */
+DataView.prototype.hideRows = function(rowRefs, hidden) {
+	hidden = hidden !== false;
+	let hiddenRids = this._hiddenRids;
+
+	if(hidden){
+		if(!hiddenRids) {
+			hiddenRids = this._hiddenRids = {};
+		}
+	} else if(!hiddenRids) {
+		return; // All rows are visible
+	}
+
+	let rids = this._toRowIds(rowRefs);
+	let dirty = false;
+
+	for(let i = rids.length; --i >= 0;) {
+		let rid = rids[i];
+		if(rid) { // undefined, null, and an empty string value are not a valid row id
+			if(hidden) {
+				if(!hiddenRids[rid]) {
+					hiddenRids[rid] = true;
+					dirty = true;
+				}
+			} else if(hiddenRids[rid]) {
+				delete hiddenRids[rid];
+				dirty = true;
+			}
+		}
+	}
+
+	if(dirty) {
+		if(!hidden) {
+			let hasHiddenRow = false;
+			for(let key in hiddenRids) { // eslint-disable-line
+				hasHiddenRow = true;
+				break;
+			}
+			if(!hasHiddenRow) {
+				hiddenRids = this._hiddenRids = null;
+			}
+		}
+		this._refreshAndNotify(); // Very slow
+	}
+
+};
+/**
+ * Show/hide rows in the data view
+ * @param {Array.<string|number>} rowRefs Array of row ids or indices to hide
+ * @param {boolean=} shown=true If the value is false, the specified rows will be hidden.
+ * @public
+ */
+DataView.prototype.showRows = function(rowRefs, shown) {
+	this.hideRows(rowRefs, shown === false);
+};
+/** Unhide all rows
+* @public
+*/
+DataView.prototype.unhideAllRows = function(){
+	if(this._hiddenRids) {
+		this._hiddenRids = null;
+		this._refreshAndNotify();
+	}
+};
+/** Check if there is any hidden row
+* @public
+* @return {boolean}
+*/
+DataView.prototype.hasHiddenRow = function(){
+	return this._hiddenRids ? true : false;
+};
+
+/** @public
+* @param {string|function(string, Object.<string, *>):boolean} cid Use string to identify column name. Use function for custom filter logic. Function will take rowId and column values as parameters, and return boolean value
+* @param {*=} value
+* @param {boolean=} opt_filteringOut
+* @return {boolean} Return true if there is any change. Otherwise, return false.
+* @fires DataView#pageCountChanged
+* @fires DataView#pageIndexChanged
+* @fires DataView#dataChanged
+* @example
+* dv.filterIn("FIELD", "Some value");
+* dv.filterIn(function(rowId, rowData)) { // This is equivalent with the above statement
+*     return rowData["FIELD"] === "Some value";
+* });
+*/
+DataView.prototype.filterIn = function(cid, value, opt_filteringOut) {
+	let newLogic = this._getFilterLogic(cid, value);
+	let filteringOut = (opt_filteringOut === true);
+	if(this._userFilter === newLogic && typeof cid !== "function") {
+		if(!newLogic || filteringOut === this._filteringOut) {
+			return false; // Nothing to update
+		}
+	}
+	this._shared.filterLogic = newLogic;
+	this._userFilter = newLogic;
+	this._filteringOut = filteringOut;
+	this._refreshAndNotify();
+	return true;
+};
+/** @public
+* @param {string|function(string, Object.<string, *>):boolean} cid Use string to identify column name. Use function for custom filter logic. Function will take rowId and column values as parameters, and return boolean value
+* @param {*=} value
+* @return {boolean} Return true if there is any change. Otherwise, return false.
+* @fires DataView#pageCountChanged
+* @fires DataView#pageIndexChanged
+* @fires DataView#dataChanged
+* @example
+* dv.filterIn("FIELD", "Some value");
+* dv.filterOut(function(rowId, rowData)) { // This is equivalent with the above statement
+*     return rowData["FIELD"] !== "Some value";
+* });
+*/
+DataView.prototype.filterOut = function(cid, value) {
+	return this.filterIn(cid, value, true);
+};
+/** @public
+* @param {string|Function} cid Use string to identify column name. Use function for custom filter logic. Function will take rowId and column values as parameters, and return boolean value
+* @param {*=} value
+* @param {boolean=} opt_filteringOut
+* @fires DataView#pageCountChanged
+* @fires DataView#pageIndexChanged
+* @fires DataView#dataChanged
+*/
+DataView.prototype.filterInOnce = function(cid, value, opt_filteringOut) {
+	let checker = this._getFilterLogic(cid, value);
+	let removalMap = {};
+	if(!this._getRemovalMap(
+		removalMap,
+		checker,
+		(opt_filteringOut === true)
+	)) {
+		return;
+	}
+
+	let firstChange = this._removeRowIds(removalMap);
+
+	let pageIndexChanged = this._updatePageCount();
+	if(pageIndexChanged || this._transformView(firstChange)) {
+		this._dispatchGlobalChange();
+	} else {
+		this._dispatchMultiRowRemoved(Object.keys(removalMap));
+	}
+};
+/** @public
+* @suppress {checkTypes}
+* @param {string|function(string, Object.<string, *>):boolean} cid Use string to identify column name. Use function for custom filter logic. Function will take rowId and column values as parameters, and return boolean value
+* @param {*=} value
+* @fires DataView#pageCountChanged
+* @fires DataView#pageIndexChanged
+* @fires DataView#dataChanged
+*/
+DataView.prototype.filterOutOnce = function(cid, value) {
+	this.filterInOnce(cid, value, true);
+};
+/** @private
+* @param {!Object} removalMap
+* @return {number}
+*/
+DataView.prototype._removeRowIds = function(removalMap) {
+	let firstChange = DataView._removeArrayItems(this._rids, removalMap);
+	if(this._groupView) {
+		firstChange = DataView._removeArrayItems(this._groupView, removalMap);
+	}
+
+	if(this._groupMembers) {
+		let len = this._groupList.length;
+		for(let i = 0; i < len; ++i) {
+			let groupId = this._groupList[i];
+			this._groupMembers[groupId]._removeRowIds(removalMap);
+		}
+	}
+	return firstChange;
+
+};
+/** @public
+* @fires DataView#pageCountChanged
+* @fires DataView#pageIndexChanged
+* @fires DataView#dataChanged
+*/
+DataView.prototype.clearFilter = function() {
+	if(this._userFilter) {
+		this._userFilter = null;
+		this._shared.filterLogic = null;
+		this._refreshAndNotify();
+	}
+};
+
+/** Disable the page index correction
+* @public
+* @param {boolean=} opt_disable
+*/
+DataView.prototype.disablePageCorrection = function(opt_disable) {
+	this._pageCorrection = (opt_disable === false);
+};
+/** Goes to the specified page
+* @public
+* @param {number} pageIndex
+* @return {boolean} True if there is any change, otherwise false
+* @fires DataView#pageIndexChanged
+* @fires DataView#dataChanged
+*/
+DataView.prototype.setPage = function (pageIndex) {
+	let result = this._setPage(pageIndex);
+	if(result) {
+		this._dispatchGlobalChange();
+	}
+	return result;
+};
+/** {@link DataView#setPage}
+* @public
+* @function
+* @fires DataView#pageIndexChanged
+* @fires DataView#dataChanged
+*/
+DataView.prototype.gotoPage = DataView.prototype.setPage;
+/** Goes to the next page. If current page is already the last page, nothing is performed
+* @public
+* @return {boolean} True if there is any change, otherwise false
+* @fires DataView#pageIndexChanged
+* @fires DataView#dataChanged
+*/
+DataView.prototype.nextPage = function () {
+	return this.gotoPage(this._pageIndex + 1);
+};
+/** Goes back to the previous page. If current page is already the first page, nothing is performed
+* @public
+* @return {boolean} True if there is any change, otherwise false
+* @fires DataView#pageIndexChanged
+* @fires DataView#dataChanged
+*/
+DataView.prototype.previousPage = function () {
+	return this.gotoPage(this._pageIndex - 1);
+};
+/** {@link DataView#previousPage}
+* @public
+* @function
+* @fires DataView#pageIndexChanged
+* @fires DataView#dataChanged
+*/
+DataView.prototype.prevPage = DataView.prototype.previousPage;
+/** Goes to the last page
+* @public
+* @return {boolean} True if there is any change, otherwise false
+* @fires DataView#pageIndexChanged
+* @fires DataView#dataChanged
+*/
+DataView.prototype.lastPage = function () {
+	return this.gotoPage(this._lastPageIndex);
+};
+/** Goes to the first page
+* @public
+* @return {boolean} True if there is any change, otherwise false
+* @fires DataView#pageIndexChanged
+*/
+DataView.prototype.firstPage = function () {
+	return this.gotoPage(0);
+};
+
+/**
+* @public
+* @return {number}
+*/
+DataView.prototype.getCurrentPage = function () {
+	return this._pageIndex;
+};
+/** {@link DataView#getCurrentPage}
+* @public
+* @function
+*/
+DataView.prototype.getPageIndex = DataView.prototype.getCurrentPage;
+/** Verifies that current page is the last page
+* @public
+* @return {boolean}
+*/
+DataView.prototype.isOnLastPage = function () {
+	return (this._pageIndex === this._lastPageIndex);
+};
+/** Verifies that current page is the first page
+* @public
+* @return {boolean}
+*/
+DataView.prototype.isOnFirstPage = function () {
+	return (this._pageIndex === 1);
+};
+
+/** Get total number of rows in a single page
+* @public
+* @return {number}
+*/
+DataView.prototype.getPageSize = function () {
+	return this._pageSize;
+};
+/** Get total number of pages
+* @public
+* @return {number}
+*/
+DataView.prototype.getPageCount = function () {
+	return this._lastPageIndex;
+};
+/** {@link DataView#getTotalPages}
+* @public
+* @function
+*/
+DataView.prototype.getTotalPages = DataView.prototype.getPageCount;
+/** Shrink current view to the specified size. Set it 0 to reset to original size
+* @public
+* @param {number} pageSize
+* @fires DataView#pageCountChanged
+* @fires DataView#pageIndexChanged
+* @fires DataView#dataChanged
+*/
+DataView.prototype.setPageSize = function (pageSize) {
+	if(!(pageSize >= 0)) { pageSize = 0; }
+	if(this._pageSize === pageSize) { return; }
+
+	this._pageSize = pageSize;
+	this._updatePageCount();
+
+	if(pageSize > 0) {
+		if(!this._pageView) {
+			this._pageView = [];
+		}
+	} else {
+		if(this._pageView) {
+			this._pageView = null;
+		}
+	}
+
+	if(!this._pageView || pageSize === 0) {
+		this._updateRowIds();
+	} else {
+		// filtering and sorting should already be done beforehand
+		this._transformView();
+	}
+	this._dispatchGlobalChange();
+};
+
+/** Group all rows by the specified criteria. The criteria can be field name (field value will be used as a group id) or a function that takes row data and returns group id.
+* @public
+* @param {string|Function|Array.<string|Function>} cid Column id or grouper method that take one parameter for row data in JSON format, and returns groupId (string)
+* @param {Array=} opt_predefinedGroups
+* @fires DataView#groupAdded
+* @fires DataView#groupCriteriaChanged
+* @fires DataView#pageCountChanged
+* @fires DataView#pageIndexChanged
+*/
+DataView.prototype.groupBy = function (cid, opt_predefinedGroups) {
+	// always deactivate multi-group row mode, it will automatically activate when populating group
+	this._shared.multiGroupRow = false;
+
+	if(this._groupCriteria) {
+		if(this._groupList && this._groupList.length > 0) { // Dispose any existing member
+			for(let key in this._groupMembers) {
+				this._groupMembers[key].dispose(); // Clear everything in the data view
+			}
+			this._groupMembers = {}; // Clear all members
+			this._groupList.length = 0;
+		}
+		this._groupCriteria = null;
+	}
+	if(opt_predefinedGroups != null) { // null is allowed
+		this._setPredefinedGroups(opt_predefinedGroups);
+	}
+
+	let i, len;
+	if(cid && this._groupLevel === 0) { // Sub group cannot be re-group without its parent noticing it
+		this._groupCriteria = [];
+		let ary;
+		if(!Array.isArray(cid)) {
+			ary = [cid];
+		} else {
+			ary = /** @type{Array.<string|Function>} */(cid);
+		}
+		len = ary.length;
+		for(i = 0; i < len; ++i) {
+			let criteria = ary[i];
+			if(typeof criteria === "string") {
+				this._groupCriteria.push(this._defaultGroupCriteria.bind(this, criteria));
+			} else if(criteria) {
+				this._groupCriteria.push(/** @type{Function} */(criteria));
+			}
+		}
+	}
+
+	if(this._groupCriteria) { // Only root view can have group criteria at this point
+		if(!this._groupMembers) {
+			this._groupMembers = {};
+			this._groupList = [];
+			this._groupRows = {};
+		}
+		if(!this._groupView) {
+			this._groupView = [];
+		}
+	} else {
+		this._groupMembers = null;
+		this._groupList = null;
+		this._groupView = null;
+		if(this._groupRows) { // this._groupRows is a shared member
+			if(this._groupLevel <= 0) {
+				this._footerRowIds = null;
+			} else {
+				if(this._groupRowId) {
+					delete this._groupRows[this._groupRowId];
+				}
+				if(this._footerRowIds) {
+					len = this._footerRowIds.length;
+					for(i = 0; i < len; ++i) {
+						delete this._groupRows[this._footerRowIds[i]];
+					}
+					this._footerRowIds = null;
+				}
+			}
+			this._groupRows = null;
+		}
+		this._groupValue = null;
+	}
+	this._groupLevel = 0; // View that is set criteria will always be in the first group level
+	this._updateRowIds();
+
+	this._dispatch("groupCriteriaChanged", {});
+	this._dispatchGlobalChange();
+};
+/** addGroup is used to add a single predefined group or multiple predefined groups.
+* @public
+* @param {*|Array} value
+* @fires DataView#groupAdded
+* @fires DataView#pageCountChanged
+* @fires DataView#pageIndexChanged
+*/
+DataView.prototype.addGroup = function (value) {
+	if(!this._groupMembers) {
+		// window.console.log("Group criteria must be specified first before adding any group");
+		return;
+	}
+
+	if(!isArray(value)) {
+		this._addGroup(value);
+	} else {
+		let ary = /** @type{Array} */(value);
+		let len = ary.length;
+		for(let i = 0; i < len; ++i) {
+			this._addGroup(ary[i]);
+		}
+	}
+};
+/** Sort all of its descendants based on given compare function
+* @public
+* @param {Function=} compare Default is sorting by text. If null or false value is given, no sorting is performed
+*/
+DataView.prototype.sortGroups = function (compare) {
+	if(!this._groupMembers) { return; }
+
+	if(compare == null) {
+		this._groupSortingLogic = DataView._defaultGroupSortingLogic; // Temporary set the variable
+	} else {
+		this._groupSortingLogic = compare || null;
+	}
+	if(!this._groupSortingLogic) {
+		return; // No logic is defined
+	}
+
+	this._groupList.sort(this._internalGroupSortingLogic);
+	for(let i = this._groupList.length; --i >= 0;){
+		let groupId = this._groupList[i];
+		this._groupMembers[groupId].sortGroups(this._groupSortingLogic);
+	}
+	this._groupViewDirty = true;
+	if(this._groupLevel <= 0) {
+		this._dispatchGlobalChange();
+	}
+};
+/** Move the specified group within its group
+* @public
+* @param {number|string} groupRef
+* @param {number} destIndex
+*/
+DataView.prototype.moveGroup = function (groupRef, destIndex) {
+	let movedGroup = this.getGroup(groupRef);
+	if(!movedGroup) {
+		return; // Cannot find the given group
+	}
+
+	let parentGroup = movedGroup.getDataSource();
+	let groupId = movedGroup.getGroupId();
+	let curGroupIndex = parentGroup._groupList.indexOf(groupId);
+	if(curGroupIndex === destIndex || curGroupIndex + 1 === destIndex) {
+		return; // Nothing is needed to be moved
+	}
+
+	parentGroup._groupList.splice(curGroupIndex, 1);
+	if(curGroupIndex < destIndex) {
+		--destIndex;
+	}
+	parentGroup._groupList.splice(destIndex, 0, groupId);
+
+	this._requestRebuildingRowIds(false);
+};
+/** WARNING: This could be very slow to perform
+* @public
+* @param {Array} predefinedGroups Use two dimensional array to define groups for multi-level grouping. The first item is for the top level groups. The second item is for the second level groups, and so on. If one dimentional array is given, it is treated as the first item in the two-dimentionsal array.
+* @example
+* dv.setPredefinedGroups(["a", "b", "c"]); // Create empty three empty groups
+* dv.setPredefinedGroups([ // Create two empty groups, and each group has 3 sub-groups
+*   ["Main Group 1", "Main 2"],
+*   ["Sub 1", "Sub 2", "Sub 3"]
+* ]);
+*/
+DataView.prototype.setPredefinedGroups = function (predefinedGroups) {
+	this._setPredefinedGroups(predefinedGroups);
+	if(this._groupMembers) {
+		this._refreshAndNotify();
+	}
+};
+/** @private
+* @param {Array} predefinedGroups
+*/
+DataView.prototype._setPredefinedGroups = function (predefinedGroups) {
+	if(this._preDefGroups === predefinedGroups) {
+		return;
+	}
+
+	if(this._preDefGroups) {
+		this._preDefGroups.length = 0; // Remove all predefined groups in all members (this let is shared)
+	}
+	let is2D = false;
+	if(predefinedGroups) {
+		for(let i = predefinedGroups.length; --i >= 0;) {
+			if(Array.isArray(predefinedGroups[i])) {
+				is2D = true;
+				break;
+			}
+		}
+	}
+
+	if(is2D) {
+		this._preDefGroups = predefinedGroups; // WARNING: Referencing user's object
+	} else if(Array.isArray(predefinedGroups)) {
+		this._preDefGroups = [predefinedGroups]; // Convert to 2D Array
+	} else {
+		this._preDefGroups = null;
+	}
+	this._preDefGroupsDirty = true;
+};
+
+/** Add a footer to current group
+* @public
+* @param {number=} opt_num Number of footer to be added. If not specified, the number is one.
+*/
+DataView.prototype.addFooter = function (opt_num) {
+	if(this._groupLevel <= 0) {
+		console.log("WARNING: Only group can have a footer");
+		return;
+	}
+	if(opt_num == null) {
+		opt_num = 1;
+	}
+	if(opt_num <= 0) { // 0 and negative number is not acceptable
+		return;
+	}
+
+	if(!this._footerRowIds) {
+		this._footerRowIds = [];
+	}
+
+	for(let i = 0; i < opt_num; ++i) {
+		let footerRowId = this._groupRowId + "_footer" + (this._footerRowIds.length || "");
+		this._footerRowIds.push(footerRowId);
+		this._groupRows[footerRowId] = this;
+	}
+
+	if(!this._beingAdded) {
+		this._requestRebuildingRowIds(this._collapsed); // Slow
+	}
+};
+/** Remove all footers in the gurrent view
+* @public
+*/
+DataView.prototype.removeFooter = function () {
+	if(this._footerRowIds) {
+		let len = this._footerRowIds.length;
+		for(let i = 0; i < len; ++i) {
+			delete this._groupRows[this._footerRowIds[i]];
+		}
+		this._footerRowIds = null;
+
+		if(!this._beingAdded) {
+			this._requestRebuildingRowIds(this._collapsed); // Slow
+		}
+	}
+};
+
+/** Enable/Disable multi-group row mode
+* @public
+* @ignore
+* @param {boolean=} enabled
+*/
+DataView.prototype.enableMultiGroup = function(enabled) {
+	this._shared.multiGroupRow = enabled !== false;
+};
+
+/** Get a group DataView by group row id. If content row id is given, null is returned (unlike getGroup method).<br>
+* Nested groups and other groups outside of this group branch will be searched.
+* @public
+* @param {string} rowId Group Id, row Id or group index (for immediate child groups)
+* @return {DataView}
+* @see {@link DataView#getGroup}
+*/
+DataView.prototype.getGroupByRowId = function (rowId) {
+	if(this._groupRows) {
+		return this._groupRows[rowId] || null;
+	}
+	return null;
+};
+/** Get a corresponding DataView by the given group Id, row Id or group index. If row Id of content row is given, a parent group will be returned. <br>
+* Nested groups and other groups outside of this group branch will be searched.
+* @public
+* @param {number|string} groupRef Group Id, row Id or group index (for immediate child groups)
+* @return {DataView}
+* @see {@link DataView#getGroupByRowId}
+*/
+DataView.prototype.getGroup = function (groupRef) {
+	if(!this._groupMembers) {
+		return null;
+	}
+	let groupId;
+	if(typeof groupRef === "number") {
+		groupId = this._groupList[groupRef];
+		if(!groupId) {
+			return null;
+		}
+	} else {
+		groupId = groupRef + ""; // Convert to string
+	}
+
+	// Search immediate child groups by group Id
+	let dv = this._groupMembers[groupId];
+	if(dv) {
+		return dv;
+	}
+
+	// A group cannot be found by group Id. It is now assumed to be row id
+	let rowId = groupId;
+	dv = this._groupRows[rowId]; // Groups of any level will be searched
+	if(dv) {
+		return dv;
+	}
+
+	// The given row id is not a group row. Check if it is actually content row of this group
+	return this._getGroupByContentRowId(rowId); // Slow recursive function
+};
+/** Get group of this data view by content row id. Group outside of this group branch is NOT searched
+* @private
+* @param {string} rowId
+* @return {DataView} Group of rowId that given
+*/
+DataView.prototype._getGroupByContentRowId = function (rowId) {
+	if(this._groupMembers) {
+		for (let i = 0; i < this._groupList.length; i++) {
+			let groupId = this._groupList[i];
+			let grp = this._groupMembers[groupId];
+			let childGroup = grp._getGroupByContentRowId(rowId);
+			if(childGroup) {
+				return childGroup;
+			}
+		}
+	} else { // Last childGroup
+		if(this._rids.indexOf(rowId) !== -1) {
+			return this; // return group if match with rowId
+		}
+	}
+	return null;
+};
+/** Get all group descendants
+* @public
+* @param {Array=} out_ary
+* @return {!Array.<DataView>}
+*/
+DataView.prototype.getAllGroups = function (out_ary) {
+	if(!out_ary) { out_ary = []; }
+	if(this._groupMembers) {
+		let len = this._groupList.length;
+		for(let i = 0; i < len; ++i) {
+			let groupId = this._groupList[i];
+			let grp = this._groupMembers[groupId];
+			out_ary.push(grp);
+			grp.getAllGroups(out_ary);
+		}
+	}
+	return out_ary;
+};
+/** Get immediate group members row ids in array list
+* @public
+* @return {Array.<string>}
+*/
+DataView.prototype.getGroupList = function () {
+	return this._groupList;
+};
+/** Get group id (string) of this data view. Only exists if this data view is a child data view
+* @public
+* @return {string}
+*/
+DataView.prototype.getGroupId = function () {
+	return this._groupId;
+};
+/** Get group value (any data type) of this data view. Only exists if this data view is a child data view
+* @public
+* @return {*}
+*/
+DataView.prototype.getGroupValue = function () {
+	return this._groupValue;
+};
+/** Row id used by parent data view as a header row for referencing
+* @public
+* @return {string}
+*/
+DataView.prototype.getGroupRowId = function () {
+	return this._groupRowId;
+};
+/**
+* @public
+* @ignore
+* @param {string} rid
+* @return {number}
+*/
+DataView.prototype.getFooterRowIndex = function (rid) {
+	if(this._footerRowIds) {
+		for(let i = this._footerRowIds.length; --i >= 0;) {
+			if(this._footerRowIds[i] === rid) {
+				return i;
+			}
+		}
+	}
+	return -1;
+};
+/** A List of the footer row ids. Footer row is placed at the bottom of all other rows in this view
+* @public
+* @ignore
+* @return {Array.<string>} Null if there is no footer row
+*/
+DataView.prototype.getFooterRowIds = function () {
+	return this._footerRowIds;
+};
+/**
+* @public
+* @return {boolean}
+*/
+DataView.prototype.hasGroup = function () {
+	return (this._groupMembers) ? true : false;
+};
+/** Deprecated in favor of getGroupByRowId
+* @public
+* @return {null}
+* @see {@link DataView#getGroupByRowId}
+*/
+DataView.prototype.getGroupRows = function () {
+	return null;
+};
+/** Get group level of the corresponding row. If the given index is not specified, header row (the view itself) is used instead. Group level 0 means it is the root data view.
+* @public
+* @param {(number|string)=} rowRef
+* @return {number}
+*/
+DataView.prototype.getGroupLevel = function (rowRef) {
+	if(rowRef != null && this._groupRows) {
+		if(typeof rowRef === 'number'){ // TODO: Change logic to acquire row id from row index instead
+			this._rebuildRowIdsFromChildren();
+			let rids = this._getRids(); // TODO : Should include hidden rows
+			let rid = rids[rowRef];
+			while(rid) {
+				let dv = this._groupRows[rid];
+				if(dv) {
+					return dv._groupLevel;
+				}
+				rid = rids[--rowRef];
+			}
+		} else {
+			let currentGroup = this.getGroup(rowRef); // Slow becuase recursive
+			if(currentGroup) {
+				return currentGroup._groupLevel;
+			}
+			return -1; // group not found
+		}
+	}
+	return this._groupLevel;
+};
+
+/** Statistics (e.g. Sum, Avg, Max, and Min) of the specified column will be collected on every update. WARNING: CPU usage is intensive. Do disable, if the column is no longer used.
+* @public
+* @param {string} cid
+* @param {boolean=} opt_enabled
+* @param {string=} opt_refId
+* @return {ColumnStats} ColumnStats Object
+*/
+DataView.prototype.enableColumnStats = function(cid, opt_enabled, opt_refId) {
+	if (!cid) { return null; }
+	let enabled = opt_enabled !== false;
+	let cs = this._columnStats[cid];
+	if(enabled) {
+		if(!cs) {
+			cs = new ColumnStats(this, cid);
+			this._columnStats[cid] = cs;
+		}
+		cs.addRef(opt_refId);
+	} else {
+		if(cs) {
+			if(!cs.deRef(opt_refId)) {
+				cs.dispose();
+				delete this._columnStats[cid];
+			}
+		}
+	}
+	if(this._groupMembers) {
+		for(let i = this._groupList.length; --i >= 0;) {
+			let groupId = this._groupList[i];
+			this._groupMembers[groupId].enableColumnStats(cid, opt_enabled, opt_refId);
+		}
+	}
+	return cs || null;
+};
+/** @public
+ * @param {string} cid
+* @return {ColumnStats} ColumnStats. Return null if the column has not been enabled
+*/
+DataView.prototype.getColumnStats = function(cid) {
+	return this._columnStats[cid] || null;
+};
+
+/** This method temporarily remove all rows from the view, which can improve performance as further updates and operations will be ignored
+* @public
+* @param {boolean=} opt_hidden
+* @returns {boolean}
+*/
+DataView.prototype.hide = function(opt_hidden) {
+	let val = opt_hidden !== false;
+	if(this._hidden === val) {
+		return false;
+	}
+
+	this._hidden = val;
+	this._refreshAndNotify();
+	return true;
+};
+/** @public
+* @return {boolean}
+*/
+DataView.prototype.isHidden = function() {
+	return this._hidden;
+};
+/** @public
+* @param {string} rowId
+* @return {boolean} Returns true when this row is hidden
+*/
+DataView.prototype.isHiddenRow = function(rowId) {
+	if(this._hiddenRids) {
+		return this._hiddenRids[rowId] === true;
+	}
+	return false;
+};
+
+/** @private
+* @return {boolean}
+*/
+DataView.prototype._isHeaderRowShown = function() {
+	if (this._hiddenHeaderRow) {
+		return false;
+	}
+	if (this._shared.filterLogic && this._rids.length === 0) {
+		// When filter is active, group without its member will be hidden
+		return false;
+	}
+
+	// Group member with option autoGroupHiding enabled should always set `_collapsed` to false. Otherwise group will be collapsed and cannot be expanded by UI.
+	if (this._shared.autoGroupHiding && this._groupValue == null) {
+		// In auto grouping mode, if group value is either undifined or null the header row will be hidden
+		return false;
+	}
+	return true;
+};
+/** @private
+* @param {boolean} collapsed
+* @return {boolean} Return true if there is any change
+*/
+DataView.prototype._setCollapse = function(collapsed) {
+	if (this._shared.contentAsHeader) {
+		// In this mode, only groups with hidden group header can be expanded/collapsed.
+		// Ignore any group with visible group header
+		if (this._hiddenHeaderRow) {
+			if (this._showOnlyFirstMember !== collapsed) {
+				this._showOnlyFirstMember = collapsed;
+				return true;
+			}
+		}
+	} else if (this._isHeaderRowShown()) { // Only groups with visible group header can be expanded/collapsed
+		if (this._collapsible && this._collapsed !== collapsed) {
+			this._collapsed = collapsed;
+			return true;
+		}
+	}
+	return false;
+};
+/** Collapse current view. This works only if the view is generated as a child view
+* @public
+* @param {boolean=} opt_collapsed
+*/
+DataView.prototype.collapse = function(opt_collapsed) {
+	let dirty = this._setCollapse(opt_collapsed !== false);
+
+	if(dirty) {
+		if (this._shared.contentAsHeader) {
+			if (this._hiddenHeaderRow) {
+				this._requestRebuildingRowIds(this._showOnlyFirstMember); // Slow
+			}
+		} else {
+			if(this._groupLevel > 0) {
+				this._requestRebuildingRowIds(this._collapsed);
+			}
+		}
+	}
+};
+/** Collapse all children and descendants, excluding itself and its parent
+* @public
+* @param {boolean=} opt_collapsed
+*/
+DataView.prototype.collapseAllGroups = function(opt_collapsed) {
+	let grpList = this.getAllGroups();
+	let len = grpList.length;
+	if(len) {
+		let collapsed = (opt_collapsed !== false);
+		for(let i = 0; i < len; ++i) {
+			let grpItem = grpList[i];
+			grpItem._setCollapse(collapsed);
+		}
+		this._requestRebuildingRowIds(false);
+	}
+};
+/** @public
+*/
+DataView.prototype.toggleCollapsedState = function() {
+	this.collapse(!this.isCollapsed());
+};
+/** @public
+* @return {boolean}
+*/
+DataView.prototype.isCollapsed = function() {
+	return this._collapsed || this._showOnlyFirstMember;
+};
+/** Content as header mode indicates that the group headers cannot be collapsed and the first row in the group will always be shown.
+* @public
+* @param {boolean=} bool
+*/
+DataView.prototype.enableContentAsHeader = function(bool) {
+	this._shared.contentAsHeader = bool !== false;
+};
+/** set default collapse when new groups added
+* @public
+* @param {boolean=} collapse=false, if enable it, it will be set collapsing by default
+*/
+DataView.prototype.setDefaultCollapse = function(collapse) {
+	this._shared.defaultCollapse = !!collapse;
+};
+/** get default collapse when new groups added
+* @public
+* @return {boolean}
+*/
+DataView.prototype.getDefaultCollapse = function() {
+	return !!this._shared.defaultCollapse; // it can be null, convert to boolean
+};
+/**
+* @public
+* @return {boolean}
+*/
+DataView.prototype.isCollapsible = function() {
+	return this._collapsible;
+};
+/**
+* @public
+* @param {boolean=} bool=true, if set it to false, it will be enable collapsing
+*/
+DataView.prototype.disableCollapsing = function(bool) {
+	this._collapsible = !(bool !== false);
+};
+/**
+* @public
+* @param {string} groupColor
+*/
+DataView.prototype.setGroupColor = function(groupColor) {
+	if(this._groupLevel === 1) {
+		this._groupColor = groupColor;
+	}
+};
+/**
+* @public
+* @return {string}
+*/
+DataView.prototype.getGroupColor = function() {
+	if(this._groupLevel === 0) {
+		return "";
+	} else if(this._groupLevel === 1) {
+		return this._groupColor;
+	}
+	return this._parent.getGroupColor();
+};
+/** @private
+* @return {?Array.<string>}
+*/
+DataView.prototype._getFirstHiddenRids = function() {
+	if(this._shared.contentAsHeader) {
+		if(this._showOnlyFirstMember) {
+			let rids = this._rids;
+			if (Array.isArray(rids) && rids.length) {
+				return [rids[0]]; // Get only the first member of rids
+			}
+		}
+	}
+	return null;
+};
+
+/** This will not include collapsed group and rows
+* @public
+* @return {number}
+*/
+DataView.prototype.getVisibleRowCount = function() {
+	if(this._collapsed) {
+		return 0;
+	}
+	this._rebuildRowIdsFromChildren();
+	return this._getRids().length;
+};
+
+/** @public
+* @description check weather row object is in group
+* @param {Object} rowData
+* @param {string=} groupID Default group id is the group id of the DataView that is being called.
+* @return {boolean}
+*/
+DataView.prototype.isRowDataInGroup = function (rowData, groupID) {
+	let criteria = this._groupCriteria;
+	let level = this._groupLevel;
+
+	// Because self is a leaf group, only check against self.
+	if (!groupID || groupID === this.getGroupId()) {
+		return this._isAllowedInGroup(null, rowData);
+	}
+
+	// Check against self and all sub groups within self
+	for (let i = level; i < criteria.length; i++) {
+		if (criteria[i](rowData).indexOf(groupID) >= 0) {
+			return true;
+		}
+	}
+	return false;
+};
+
+/** @public
+* @description check weather row ID is in group
+* @param {string} rowId
+* @param {string=} groupID Default group id is the group id of the DataView that is being called.
+* @return {boolean}
+*/
+DataView.prototype.isRowIdInGroup = function (rowId, groupID) {
+	let rowData = this.getRowData(rowId);
+	if(rowData) {
+		return this.isRowDataInGroup(rowData, groupID);
+	}
+	return false;
+};
+
+/** @private
+* @param {string} rid Row Id
+* @param {number} _index child index
+* @return {string}
+*/
+DataView._getDataViewExpansionId = function (rid, _index) {
+	return rid + "_ex" + _index;
+};
+
+/** The row expansion will be directly below the specified row, even if this data view is sorted.
+* @public
+* @param {string} rid Row Id
+* @param {number=} count=1
+*/
+DataView.prototype.addRowExpansion = function(rid, count) {
+	if(this._groupLevel > 0) {
+		return; // Sub-group is not allowed to add a row expansion
+	}
+
+	if(!count || count < 0) {
+		if(count == null) {
+			count = 1;
+		} else {
+			return;
+		}
+	}
+
+	let rowIndex = this._rids.indexOf(rid);
+	if(rowIndex < 0) {
+		// The given row id must be normal row. header and expansion row are not in the this._rids list
+		return;
+	}
+
+	let expCount = 0;
+	if(this._expansionMap) {
+		expCount = this._expansionMap[rid] || 0;
+	} else {
+		this._expansionMap = {};
+		this._expansionChildren = {};
+	}
+	let totalChild = expCount + count;
+	this._expansionMap[rid] = totalChild;
+
+	// create _expansionChildren mapping
+
+	for (let i = expCount; i < totalChild; i++) {
+		this._expansionChildren[DataView._getDataViewExpansionId(rid, i)] = rid;
+	}
+
+	if(!expCount) {
+		// There is no row expansion for the row before, add number of entries to the map
+		this._expansionCount++;
+	}
+
+	if(this._groupViewDirty) { // If group view is already dirty, we don't need to update row expansion right away
+		return;
+	}
+
+	if(this._updateExpansionView()) {
+		let e = {}; // Slow
+		e["rid"] = rid;
+		e["type"] = "inserted";
+		e["nextRid"] = this._rids[rowIndex + 1];
+		e["fallback"] = rowIndex; // Fallback index in case of no nextRid is found in the receiver
+		this._dispatchDataChange(e);
+	}
+};
+/**
+* @public
+* @param {string} rid Row Id
+*/
+DataView.prototype.removeRowExpansion = function(rid) {
+	if(!this._expansionMap) {
+		return;
+	}
+	let expCount = this._expansionMap[rid];
+	if(!expCount) {
+		return;
+	}
+
+	let rids = new Array(expCount);
+	for (let i = 0; i < expCount; ++i) {
+		rids[i] = DataView._getDataViewExpansionId(rid, i);
+		delete this._expansionChildren[rids[i]];
+	}
+
+	delete this._expansionMap[rid];
+	this._expansionCount--;
+
+	if(!this._groupViewDirty) { // If group view is already dirty, we don't need to update row expansion right away
+		if(this._updateExpansionView()) {
+			if(expCount === 1) {
+				this._dispatchRowRemoved(rids[0]); // TODO: Expansion rid may not need to be sent
+			} else {
+				this._dispatchMultiRowRemoved(rids);
+			}
+		}
+	}
+};
+/**
+* @public
+* @param {string|number} rowRef Row Id or index
+* @param {boolean=} force
+* @param {number=} count=1
+*/
+DataView.prototype.toggleRowExpansion = function(rowRef, force, count) {
+	let rid = this._toRowId(rowRef);
+
+	if(force != null) {
+		force = force === true;
+	} else {
+		force = !this.hasRowExpansion(rid);
+	}
+
+	if (force) {
+		this.addRowExpansion(rid, count);
+	} else {
+		this.removeRowExpansion(rid);
+	}
+};
+/** @public
+*/
+DataView.prototype.removeAllRowExpansions = function() {
+	if(this._expansionMap) {
+		this._expansionMap = null;
+		this._expansionCount = 0;
+		this._expansionView = null;
+		this._expansionChildren = null;
+		this._refreshAndNotify();
+	}
+};
+/** Deprecated. Use {@link DataView#getExpansionParents} instead. Get all rows with expansion (not row expansion itself) will contains row id, otherwise undefined.
+* @public
+* @ignore
+* @param {number=} from
+* @param {number=} to EXCLUSIVE
+* @return {!Array.<string|undefined>}
+*/
+DataView.prototype.getRowsWithExpansion = function(from, to) {
+	if(!this._expansionMap) {
+		return [];
+	}
+	let rids = this._expansionView;
+	let len = rids.length;
+	if(to == null) { to = len; }
+	else if(to > len) { to = len; }
+
+	if(!(from > 0)) { from = 0; } // Handle NaN, undefined, null, and other invalid value
+
+	let entryCount = this._expansionCount;
+	let out_ary = new Array(len);
+	for(let i = from; i < to; ++i) {
+		let rid = rids[i];
+		if(this._expansionMap[rid]) {
+			out_ary[i] = rid;
+			if(--entryCount <= 0) {
+				break;
+			}
+		}
+	}
+	return out_ary;
+};
+/** Get row expansion states from the specified range. The returned value will be row id for row expansion, otherwise empty string for other types of row (e.g. normal row, or group header row)
+* @public
+* @param {number=} from
+* @param {number=} to EXCLUSIVE
+* @return {Array.<string>} object mapping of rowIndex and parentRowId
+*/
+DataView.prototype.getExpansionParents = function (from, to) {
+	let parentMapping = [];
+	if (this._expansionMap) {
+		let rids = this._expansionView;
+		let len = rids.length;
+
+		// Handle NaN, undefined, null, and other invalid values
+		if (to == null || to > len) {
+			to = len;
+		}
+		if (!from || from < 0) {
+			from = 0;
+		}
+
+		for (let i = from; i < to; ++i) {
+			parentMapping[i] = this._expansionChildren[rids[i]] || "";
+		}
+	}
+	return parentMapping;
+};
+
+/**
+* @public
+* @param {string} rid
+* @return {string} parent row id
+*/
+DataView.prototype.getExpansionParentByRowId = function(rid) {
+	if(this._expansionChildren) {
+		return this._expansionChildren[rid] || "";
+	}
+	return "";
+};
+/** Check if the specified row is itself a row expansion.
+* @public
+* @param {string} rid rowId
+* @return {boolean}
+*/
+DataView.prototype.isRowExpansion = function(rid) {
+	if(this._expansionChildren) {
+		return this._expansionChildren[rid] ? true : false;
+	}
+	return false;
+};
+/** Check if the specified row has row expansion (not row expansion itself).
+* @public
+* @param {string} rid rowId
+* @return {boolean}
+*/
+DataView.prototype.hasRowExpansion = function(rid) {
+	if(this._expansionMap) {
+		return this._expansionMap[rid] ? true : false;
+	}
+	return false;
+};
+/**
+* @public
+* @param {string} rowId
+* @return {number}
+*/
+DataView.prototype.getRowExpansionCount = function(rowId) {
+	if(this._expansionMap) {
+		return this._expansionMap[rowId] || 0;
+	}
+	return 0;
+};
+
+/** Get row Id of the row expansion by providing the row Id of the row with row expansion (not row expansion itself). This is NOT recommended for normal usage, since the row expansion contains no data in the DataView
+* @public
+* @param {string} rid rowId
+* @param {number=} idx=0
+* @return {string} Empty string is returned if the provided row does not contains a row expansion.
+*/
+DataView.prototype.getRowExpansionId = function(rid, idx) {
+	if(this._expansionMap) {
+		let expCount = this._expansionMap[rid] || 0;
+		if(!idx) {
+			idx = 0;
+		}
+		if (idx < expCount) {
+			return DataView._getDataViewExpansionId(rid, idx); // WARNING: Internal logic is exposed
+		}
+	}
+	return "";
+};
+
+/** Get index from the row expansion id. Any row other than row expansion will yield negative value (-1)
+* @public
+* @param {string} rid Row expansion id
+* @return {number}
+*/
+DataView.prototype.getRowExpansionIndex = function(rid) {
+	if(rid) {
+		let matches = rid.match(/_ex(\d+)$/);
+		if(matches) {
+			return +matches[1]; // TODO: Check for NaN value
+		}
+	}
+	return -1;
+};
+/** @private
+* @return {boolean}
+*/
+DataView.prototype._updateExpansionView = function() {
+	let expMap = this._expansionMap;
+	if(expMap) {
+		if(!this._expansionCount || this._expansionCount < 0) {
+			this._expansionCount = 0;
+			this._expansionMap = null;
+			this._expansionView = null;
+			this._expansionChildren = null;
+			return true;
+		}
+
+		let rids = this._pageView || this._groupView || this._rids;
+		let rowLen = rids.length;
+		let origLen = this._expansionView ? this._expansionView.length : 0;
+		if(!this._expansionView) {
+			this._expansionView = new Array(rowLen);
+		} else {
+			this._expansionView.length = rowLen;
+		}
+		let entryCount = this._expansionCount;
+		for(let i = 0, j = 0; i < rowLen; ++i) {
+			let rid = rids[i];
+			this._expansionView[j++] = rid;
+			if(entryCount) {
+				let expCount = expMap[rid] || 0;
+				if(expCount) {
+					for(let k = 0; k < expCount; ++k) {
+						this._expansionView[j++] = DataView._getDataViewExpansionId(rid, k);
+					}
+					--entryCount;
+				}
+			}
+		}
+		return origLen !== this._expansionView.length; // TODO: This does not completely check the change of all cases
+	} else {
+		return false;
+	}
+};
+/** Guarantee that expansion is added after the pagination view
+* @private
+* @param {number=} firstChange
+* @return {boolean}
+*/
+DataView.prototype._transformView = function(firstChange) {
+	let dirty = this._updatePaginationView(firstChange);
+	dirty |= this._updateExpansionView();
+	return dirty ? true : false;
+};
+
+/**
+* @public
+* @param {function(Object):boolean} searchLogic Function that takes row data object and return boolean value
+* @param {Array.<string>=} opt_out Array for containing row ids
+* @return {!Array.<string>} List of row ids
+*/
+DataView.prototype.searchAll = function(searchLogic, opt_out) {
+	if(!opt_out) { opt_out = []; }
+
+	this._rebuildRowIdsFromChildren();
+	let rids = this._getRids();
+	let len = rids.length;
+
+	for(let i = 0; i < len; ++i) {
+		let rid = rids[i];
+		let row = this._dt.getRowData(rid);
+		if(row) {
+			if(searchLogic(row)) {
+				opt_out.push(rid);
+			}
+		}
+	}
+	return opt_out;
+};
+/**
+* @public
+* @param {number|string} rowRef
+* @param {function(Object):boolean} searchLogic Function that takes row data object and return boolean value
+* @return {number} Row index
+*/
+DataView.prototype.searchPrev = function(rowRef, searchLogic) {
+	this._rebuildRowIdsFromChildren();
+	let rids = this._getRids();
+	let rowIndex = -1;
+	if(typeof rowRef === "number") {
+		if(this._dt.getRowData(rids[rowRef])) {
+			rowIndex = rowRef;
+		}
+	} else {
+		rowIndex = rids.indexOf(rowRef);
+	}
+
+	let foundAt = -1;
+	let len = rids.length;
+	if(rowIndex > 0) {
+		foundAt = this._searchRow(rids, searchLogic, rowIndex - 1, -1, -1);
+		if(foundAt >= 0) {
+			return foundAt;
+		}
+	}
+	if(rowIndex >= 0) { // loop the search by starting from the end
+		foundAt = this._searchRow(rids, searchLogic, len - 1, rowIndex, -1);
+		if(foundAt >= 0) {
+			return foundAt;
+		}
+	}
+	return -1;
+};
+/**
+* @public
+* @param {number|string} rowRef
+* @param {function(Object):boolean} searchLogic Function that takes row data object and return boolean value
+* @return {number} Row index
+*/
+DataView.prototype.searchNext = function(rowRef, searchLogic) {
+	this._rebuildRowIdsFromChildren();
+	let rids = this._getRids();
+	let rowIndex = -1;
+	if(typeof rowRef === "number") {
+		if(this._dt.getRowData(rids[rowRef])) {
+			rowIndex = rowRef;
+		}
+	} else {
+		rowIndex = rids.indexOf(rowRef);
+	}
+	if(rowIndex < 0) { // Cannot find the specified row
+		return -1;
+	}
+
+	let foundAt = -1;
+	let len = rids.length;
+	if(rowIndex < len - 1) {
+		foundAt = this._searchRow(rids, searchLogic, rowIndex + 1, len, 1);
+		if(foundAt >= 0) {
+			return foundAt;
+		}
+	}
+	if(rowIndex > 0) { // loop the search by starting from the start
+		foundAt = this._searchRow(rids, searchLogic, 0, rowIndex, 1);
+		if(foundAt >= 0) {
+			return foundAt;
+		}
+	}
+	return -1;
+};
+/**
+* @private
+* @param {!Array.<string>} rids
+* @param {function(Object):boolean} searchLogic
+* @param {number} start
+* @param {number} end
+* @param {number} inc
+* @return {number}
+*/
+DataView.prototype._searchRow = function(rids, searchLogic, start, end, inc) {
+	while(start !== end) {
+		let rid = rids[start];
+		let row = this._dt.getRowData(rid);
+		if(row) {
+			if(searchLogic(row)) {
+				return start;
+			}
+		}
+		start += inc;
+	}
+	return -1;
+};
+
+/** Blocks all row insertion and removal, but keep updating the data
+* @public
+* @param {boolean=} bool
+* @return {boolean} Returns true, if there is any change
+*/
+DataView.prototype.stall = function(bool) {
+	let newBool = bool !== false;
+	let curBool = this._shared.stalledRids ? true : false;
+	if(curBool === newBool) { return false; }
+	if(newBool) {
+		let srs = {};
+		this._shared.stalledRids = srs;
+		let rids = this._getRids();
+
+		for(let i = rids.length; --i >= 0;) {
+			srs[rids[i]] = 1;
+		}
+	} else {
+		this._shared.stalledRids = null;
+		this._refreshAndNotify();
+	}
+	return true;
+};
+/** Blocks existing sorting from performing on every data change
+* @public
+* @param {boolean=} bool
+* @return {boolean} Returns true, if there is any change
+*/
+DataView.prototype.stallSorting = function(bool) {
+	let newBool = bool !== false;
+	if(this._stalledSorting !== newBool) {
+		this._stalledSorting = newBool;
+
+		if(!newBool && this.isSorting()) {
+			if(this._sort()) {
+				this._dispatchDataChange(DataTable._positionChangeArg);
+			}
+		}
+		return true;
+	}
+	return false;
+};
+
+/** Automatically and asyncronuosly remove group that has no member or no content. Predefined groups will not be removed in this way.
+* @public
+* @param {boolean=} opt_bool
+* @return {boolean} True if there is any change
+*/
+DataView.prototype.enableAutoGroupRemoval = function(opt_bool) {
+	opt_bool = opt_bool !== false;
+	let autoGroupRemoval = this._shared.autoGroupRemoval ? true : false;
+	if(autoGroupRemoval !== opt_bool) {
+		this._shared.autoGroupRemoval = opt_bool;
+		this._triggerGroupRefreshing();
+		return true;
+	}
+	return false;
+};
+/** Automatically hide null or undefined group header, while keeping the group's items intact.
+* @public
+* @param {boolean=} opt_bool
+* @return {boolean} True if there is any change
+*/
+DataView.prototype.enableAutoGroupHiding = function(opt_bool) {
+	opt_bool = opt_bool !== false;
+	let autoGroupHiding = this._shared.autoGroupHiding ? true : false;
+	if(autoGroupHiding !== opt_bool) {
+		this._shared.autoGroupHiding = opt_bool;
+		this._triggerGroupRefreshing();
+		return true;
+	}
+	return false;
+};
+
+/** Copy row order in data view to its data table
+* @public
+*/
+DataView.prototype.synchronizeRowOrder = function() {
+	if(!this._stalledSorting && this.isSorting()) {
+		this._dt._sort(this._sortingDefs);
+	}
+};
+/**
+* @public
+* @param {Array<string>} rowIds
+* @param {boolean=} enabled
+* @return {boolean} Return true if there is any change
+*/
+DataView.prototype.setSegmentSeparators = function(rowIds, enabled) {
+	if(rowIds) {
+		enabled = enabled !== false;
+		if(enabled) {
+			this.synchronizeRowOrder();
+		}
+		// TODO: Force expanding of segment before unsetting segment separator
+		return this._dt.setSegmentSeparators(rowIds, enabled);
+	}
+	return false;
+};
+/** Set visible row as a segment separator (hidden or filtered rows cannot be a segment separator)
+* @public
+* @param {string|number} rowRef Row id or row index
+* @param {*=} options=null Segment options. If the value is false, segment separator will be stripped off from the given rid
+* @return {boolean} Return true if there is any change
+*/
+DataView.prototype.setSegmentSeparator = function(rowRef, options) {
+	let rowId = "";
+	if(typeof rowRef === "number") {
+		rowId = this.getRowId(rowRef);
+	} else if(typeof rowRef === "string") {
+		rowId = rowRef; // WARNING: Invisible row id can still be set as segment separator as long as it is in the data table
+	}
+
+	if(rowId) {
+		if(options !== false) { // undefined, null, object, or true value
+			this.synchronizeRowOrder();
+		}
+		// TODO: Force expanding of segment before unsetting segment separator
+		return this._dt.setSegmentSeparator(rowId, options);
+	}
+	return false;
+};
+/**
+* @public
+* @return {boolean} Return true if there is any change
+*/
+DataView.prototype.unsetAllSegmentSeparators = function() {
+	return this._dt.unsetAllSegmentSeparators();
+};
+/**
+* @public
+* @return {boolean}
+*/
+DataView.prototype.hasSegmentation = function() {
+	return this._dt.hasSegmentation();
+};
+/**
+* @public
+* @param {string} rid
+* @return {boolean}
+*/
+DataView.prototype.isSegmentSeparator = function(rid) {
+	return this._dt.isSegmentSeparator(rid);
+};
+
+/** Get Segment object
+* @public
+* @param {string} rid Row id of a segment
+* @return {Segment} Returns null if a segment cannot be found
+*/
+DataView.prototype.getSegment = function(rid) {
+	return this._dt.getSegment(rid);
+};
+/**
+* @public
+* @param {string} rid Row id of a segment child
+* @return {Segment} Returns null if a segment cannot be found
+*/
+DataView.prototype.getSegmentParent = function(rid) {
+	return this._dt.getSegmentParent(rid);
+};
+/** Segment level starts from 1
+* @public
+* @param {string} rid Row id
+* @return {number} Return 0 if the given rid is not a segment
+*/
+DataView.prototype.getSegmentLevel = function(rid) {
+	return this._dt.getSegmentLevel(rid);
+};
+/**
+* @public
+* @param {string} rid
+* @return {string} parent row id of this segmentation. If the parent row id for this segmentation cannot be found, return ""
+*/
+DataView.prototype.getSegmentParentRowId = function(rid) {
+	return this._dt.getSegmentParentRowId(rid);
+};
+/** @public
+* @param {string|number} rowRef Row id or row index
+* @param {boolean=} collapsed
+* @return {boolean} Return true if there is any change
+*/
+DataView.prototype.collapseSegment = function(rowRef, collapsed) {
+	collapsed = collapsed !== false;
+	let segments = this._dt._getSegmentSeparators();
+	if(segments) {
+		let segmentRid = this._toRowId(rowRef);
+
+		if(segments.collapseSegment(segmentRid, collapsed)) {
+			this._refreshAndNotify(); // dispatch global change event
+
+			return true;
+		}
+	}
+
+	return false;
+};
+/** @public
+* @param {Array<string|number>} rowIds
+* @param {boolean=} collapsed
+* @return {boolean} Return true if there is any change
+*/
+DataView.prototype.collapseSegments = function(rowIds, collapsed) {
+	collapsed = collapsed !== false;
+	let segments = this._dt._getSegmentSeparators();
+	if(segments) {
+		if(segments.collapseSegments(rowIds, collapsed)) {
+			this._refreshAndNotify(); // dispatch global change event
+			return true;
+		}
+	}
+	return false;
+};
+/** @public
+* @param {string|number} rowRef Row id or row index
+* @param {boolean=} expanded
+* @return {boolean} Return true if there is any change
+*/
+DataView.prototype.expandSegment = function(rowRef, expanded) {
+	return this.collapseSegment(rowRef, expanded === false);
+};
+/** @public
+* @return {boolean} Return true if there is any change
+*/
+DataView.prototype.expandAllSegments = function() {
+	let segments = this._dt._getSegmentSeparators();
+	if(segments) {
+		if(segments.expandAllSegments()) {
+			this._refreshAndNotify();
+			return true;
+		}
+	}
+	return false;
+};
+/** Deprecated.
+* @public
+* @ignore
+*/
+DataView.prototype.setSegmentCollapsingLogic = function() {};
+/** @public
+* @param {string|number} rowRef Row id or row index
+* @return {boolean} Return true if only the given row is a collapsed segment separator
+*/
+DataView.prototype.isSegmentCollapsed = function(rowRef) {
+	let segments = this._dt._getSegmentSeparators();
+	if(segments) {
+		return segments.isCollapsedSegment(this._toRowId(rowRef));
+	}
+	return false;
+};
+/** Remove existing segment children and fill the segments with all contnet rows before the next segment separator
+* @public
+* @param {string|number} segmentRef Row id or row index
+*/
+DataView.prototype.fillSegment = function(segmentRef) {
+	this._dt.fillSegment(this._toRowId(segmentRef));
+};
+/** Remove all existing segment children in each segment and fill the segments with all contnet rows before the next segment separator
+* @public
+*/
+DataView.prototype.fillSegments = function() {
+	this._dt.fillSegments();
+};
+/** @public
+* @param {string|number} segmentRef Row id or row index
+* @param {string|number} rowRef Row id, row index
+* @param {string=} dataId Row id for retrieving data
+* @return {boolean} Return true if there is any change
+*/
+DataView.prototype.addSegmentChild = function(segmentRef, rowRef, dataId) {
+	if(this._dt._getSegmentSeparators()) {
+		let segmentId = this._toRowId(segmentRef);
+		let rowId = this._toRowId(rowRef);
+		return this._dt.addSegmentChild(segmentId, rowId, dataId);
+	}
+	return false;
+};
+/** @public
+* @param {string|number} segmentRef Row id or row index
+* @param {Array.<string|number>} rowRefs Array of row ids or row indices
+* @param {Array.<string>=} dataIds Row ids for retrieving data
+* @return {boolean} Return true if there is any change
+*/
+DataView.prototype.addSegmentChildren = function(segmentRef, rowRefs, dataIds) {
+	if(this._dt._getSegmentSeparators()) {
+		let segmentId = this._toRowId(segmentRef);
+		let rowIds = this._toRowIds(rowRefs);
+		return this._dt.addSegmentChildren(segmentId, rowIds, dataIds);
+	}
+	return false;
+};
+/** @public
+* @param {Array<Object>} segmentArr Segment array that contain "segmentId", "rowIds" to set segment children
+* @return {boolean} Return true if there is any change
+*/
+DataView.prototype.setSegmentChildren = function(segmentArr) {
+	if(this._dt._getSegmentSeparators()) {
+		return this._dt.setSegmentChildren(segmentArr);
+	}
+	return false;
+};
+/** @public
+* @param {string|number} segmentRef Row id or row index
+* @param {string|number} rowRef Row id, row index
+* @return {boolean} Return true if there is any change
+*/
+DataView.prototype.removeSegmentChild = function(segmentRef, rowRef) {
+	if(this._dt._getSegmentSeparators()) {
+		let segmentId = this._toRowId(segmentRef);
+		let rowId = this._toRowId(rowRef);
+		return this._dt.removeSegmentChild(segmentId, rowId); // TODO: Handle the case where a child is remove from its collapsed parent. Child should be made visible
+	}
+	return false;
+};
+/** @public
+* @param {string|number} segmentRef Row id or row index
+* @param {Array.<string|number>} rowRefs Array of row ids or row indices. If null is given, no child will be removed.
+* @return {boolean} Return true if there is any change
+*/
+DataView.prototype.removeSegmentChildren = function(segmentRef, rowRefs) {
+	if(this._dt._getSegmentSeparators()) {
+		let segmentId = this._toRowId(segmentRef);
+		let rowIds = this._toRowIds(rowRefs);
+		return this._dt.removeSegmentChildren(segmentId, rowIds); // TODO: Handle the case where a child is remove from its collapsed parent. Child should be made visible
+	}
+	return false;
+};
+/** @public
+* @return {boolean} Return true if there is any change
+*/
+DataView.prototype.removeAllSegmentChildren = function() {
+	return this._dt.removeAllSegmentChildren();
+};
+/** Get row ids of all segment separator
+* @public
+* @return {Array.<string>} Return null if there is no segment separator
+*/
+DataView.prototype.getSegmentIds = function() {
+	return this._dt.getSegmentIds();
+};
+/** Get row ids of all children from the specified segment
+* @public
+* @param {string|number} segmentRef Row id or row index
+* @return {Array.<string>} Returns array of row ids. Returns null if there is no child or no segment separator found
+*/
+DataView.prototype.getSegmentChildIds = function(segmentRef) {
+	return this._dt.getSegmentChildIds(this._toRowId(segmentRef));
+};
+/** Sort all of existing segments by multiple sort logics
+* @public
+* @param {Function|Array.<Function>|Object} sortLogics
+* @param {(number|Array.<number>)=} sortOrders
+* @param {(string|Array.<string>)=} cids
+*/
+DataView.prototype.sortSeparators = function (sortLogics, sortOrders, cids) {
+	let sortingDefs = this._sortingDefs;
+	if(sortingDefs.length) {
+		if(!cids) {
+			cids = sortingDefs[0][0]; // field
+		}
+		if(!sortOrders) {
+			sortOrders = sortingDefs[0][3];
+		}
+	} else if(!sortLogics) {
+		return;
+	}
+
+	this._dt.sortSeparators(sortLogics, sortOrders, cids);
+};
+/** Sort all of existing segments by given compare function
+* @public
+* @param {Function} compare
+*/
+DataView.prototype.sortSegments = function (compare) {
+	this._dt.sortSegments(compare);
+};
+/** Automatically hide empty segment when all of its member are filtered out. An empty segment will NOT be hidden, if there is no active filter. Collapsed segment does not count as filtering. A segment with no child is treated the same way as an empty segment.
+* @public
+* @param {boolean=} enabled
+*/
+DataView.prototype.enableEmptySegmentFiltering = function (enabled) {
+	enabled = enabled !== false;
+	if(this._emptySegmentFiltering !== enabled) {
+		this._emptySegmentFiltering = enabled;
+		if(this._userFilter) {
+			this._refreshAndNotify();
+		}
+	}
+};
+/** Allow filtering of segment separators as if they were normal rows. Note that even if a separator row is filtered out, its child row may remain in the view and not be filtered out.
+* @public
+* @param {boolean=} enabled
+*/
+DataView.prototype.enableSeparatorFiltering = function (enabled) {
+	enabled = enabled !== false;
+	if(this._separatorFiltering !== enabled) {
+		this._separatorFiltering = enabled;
+		if(this._userFilter) {
+			this._refreshAndNotify();
+		}
+	}
+};
+/**
+* @public
+* @param {string|number} segmentRef Row id or row index
+* @param {string|Array.<string>} fields
+* @return {boolean}
+*/
+DataView.prototype.setSegmentClassification = function(segmentRef, fields) {
+	return this._dt.setSegmentClassification(this._toRowId(segmentRef), fields);
+};
+/**
+* @public
+* @param {boolean} bool
+* @return {boolean}
+*/
+DataView.prototype.setSegmentDefaultCollapsing = function(bool) {
+	return this._dt.setSegmentDefaultCollapsing(bool);
+};
+
+/** @public
+* @ignore
+* @return {Object}
+*/
+DataView.prototype._getSharedObject = function () {
+	return this._shared;
+};
+/** Return 0, if there is no wrapping
+* @public
+* @return {number}
+*/
+DataView.prototype.getWrapSize = function () {
+	return this._wrapSize;
+};
+/** Return null, if there is no wrapping
+* @public
+* @return {Array.<WrappedView>}
+*/
+DataView.prototype.getWrappedViews = function () {
+	return this._wrappedViews;
+};
+/**
+* @public
+* @param {number=} wrapSize
+* @fires DataView#wrapCountChanged
+*/
+DataView.prototype.wrapView = function (wrapSize) {
+	if(wrapSize != null) {
+		if(!wrapSize || wrapSize < 0) {
+			wrapSize = 0;
+		}
+		if(this._wrapSize !== wrapSize) {
+			this._wrapSize = wrapSize;
+			this._dispatch("wrapSizeChanged", {
+				"wrapSize": wrapSize,
+				"rids": this.getVisibleRowIds(true)
+			});
+		}
+	}
+	this._updateWrapCount();
+};
+
+/** @private
+* @fires DataView#wrapCountChanged
+*/
+DataView.prototype._updateWrapCount = function () {
+	this._wrapTimerId = 0;
+	let wrapSize = this._wrapSize;
+
+	let i;
+	let views = this._wrappedViews;
+	let viewCount = views ? views.length : 0;
+	let targetCount = 0;
+	if(wrapSize) {
+		let rids = this.getVisibleRowIds(true);
+		let rowCount = rids.length;
+		targetCount = Math.ceil(rowCount / wrapSize);
+		if(viewCount < targetCount) {
+			if(!views) {
+				views = this._wrappedViews = [];
+			}
+			for(i = viewCount; i < targetCount; ++i) {
+				this._wrappedViews[i] = new WrappedView({
+					"dataView": this,
+					"wrapIndex": i,
+					"rids": rids
+				});
+			}
+		}
+	}
+
+	if(targetCount < viewCount) {
+		for(i = viewCount; --i >= targetCount;) {
+			this._wrappedViews[i].dispose();
+		}
+		this._wrappedViews.length = targetCount;
+	}
+	if(!wrapSize) {
+		this._wrappedViews = null;
+	}
+
+	if(viewCount !== targetCount) {
+		this._dispatch("wrapCountChanged", {
+			"prevCount": viewCount,
+			"newCount": targetCount
+		});
+	}
+};
+
+/** Construct a JSON object that is compatible with console.table()
+* @public
+* @param {Object=} opt_options {@link DataCache#dump}
+* @return {!Array.<Object>} Return a JSON object that is compatible with console.table()
+* @see {@link DataCache#dump}
+*/
+DataView.prototype.dump = function(opt_options) {
+	this._rebuildRowIdsFromChildren();
+	let rids = this._getRids();
+
+	return DataCache.constructTable(this.getMultipleRowData(rids), opt_options, rids);
+};
+/** Print current data and structure to console panel
+* @public
+* @param {Object=} opt_options
+* @example
+// Options have the following format:
+// {
+//  "colNames": Array.<string>,
+//  "rowCount": number,
+//  "startIndex": number,
+//  "getter": function(Object, string):*,
+//  "withRowIds": boolean
+//}
+dv.log({"rowCount": 10}); // Showing 10 records
+dv.log({"getter": function(rowData, colName){
+	let complexData = rowData[colName];
+	return complextData.someProperty;
+}});
+*/
+DataView.prototype.log = function(opt_options) {
+	console.table(this.dump(opt_options));
+};
+
+
+/** @private
+* @return {!Array.<string>}
+*/
+DataView.prototype._getRids = function() {
+	return this._expansionView || this._pageView || this._groupView || this._rids;
+};
+
+/** @private
+* @param {Array.<string>=} opt_rowIds Provide this parameter to avoid unnecessary group filtering
+* @fires DataView#pageCountChanged
+* @fires DataView#pageIndexChanged
+*/
+DataView.prototype._updateRowIds = function(opt_rowIds) {
+	this._groupViewDirty = false;
+	if(!this._parent || this._hidden) {
+		this._resetAllViews();
+		return;
+	}
+	if(this._shared.stalledRids) { // The stalled view cannot be changed
+		return;
+	}
+
+	// Perform the following sequences: parent view cloning >> row hiding >> row filtering >> row grouping >> sorting >> paging
+	this._rids = opt_rowIds || this._parent.getAllRowIds(); // Get all data ids
+
+	this._dispatch("beforeFiltering", {});
+
+	this._excludedRids = {};
+	let exclusionCount = 0;
+	exclusionCount += DataView._copyValidObjectKeys(this._excludedRids, this._hiddenRids);
+
+	// Segment separators should not be filtered out (hidden)
+	let segments = this._dt._getSegmentSeparators();
+	let segmentIds = segments ? segments.getSegments() : null;
+	let userRemoval = this._getRemovalMap(
+		this._excludedRids,
+		this._userFilter,
+		this._filteringOut,
+		this._separatorFiltering ? null : segmentIds
+	);
+	exclusionCount += userRemoval;
+
+	this._collapsedRids = null;
+	if(segments) {
+		if(userRemoval && this._emptySegmentFiltering) {
+			exclusionCount += this._getEmptySegments(this._excludedRids, segmentIds);
+		}
+		this._collapsedRids = segments.getCollapsedRows();
+		 // Children of collapsed segments must be filtered out (hidden)
+		exclusionCount += DataView._copyValidObjectKeys(this._excludedRids, this._collapsedRids);
+	}
+
+	if(this._groupLevel > 0 && !opt_rowIds) { // WARNING: The line below is quite slow
+		exclusionCount += this._getRemovalMap(this._excludedRids, this._groupFilterLogic, false); // Filter In
+	}
+	if(exclusionCount) {
+		this._rids = this._rids.filter(this._byRemovalMap);
+	}
+	this._excludedRids = null;
+
+	if(this._groupMembers) { // Has grouping
+		this._populateGroups(); // View will be properly re-populate inside _populateGroups()
+	} else { // No grouping
+		let pageIndexChanged = this._updatePageCount();
+		let sorted = this._sort();
+		if(!sorted && !pageIndexChanged) {
+			this._transformView();
+		}
+	}
+};
+/** @private
+* @param {Object} e
+*/
+DataView.prototype._onDataChanged = function (e) {
+	if (this._conflator.conflate(e)) return;
+
+	let events = this._conflator.popAllData() || [e];
+
+	// process all events
+	let eventsCount = events.length;
+	if (eventsCount === 1) {
+		let event = events[0];
+		if (event["globalChange"]) {
+			this._updateRowIds(); // Reset all row ids and perform sorting
+			this._dispatchDataChange(event);
+			return;
+		}
+
+		let type = event["type"];
+		if (type === "inserted") {
+			this._onRowInserted(event);
+		} else if (type === "removed") {
+			this._onRowRemoved(event);
+		} else {
+			this._onRowUpdated(event);
+		}
+	} else {
+		// multi event should occur globalchange
+		this._updateRowIds();  // Reset all row ids and perform sorting
+		let positionChangeOnly = true;
+		for (let i = 0; i < eventsCount; i++) {
+			if (!events[i].positionChangeOnly) {
+				positionChangeOnly = false;
+				break;
+			}
+		}
+		this._dispatchDataChange({
+			"globalChange": true,
+			"positionChangeOnly": positionChangeOnly,
+			"events": events
+		});
+	}
+};
+/** @private
+* @param {!Object} e
+* @return {number} 1 if there is any change, zero otherwise.
+*/
+DataView.prototype._onRowInserted = function(e) { // onInsert
+	if(this._shared.stalledRids) {
+		return 0;
+	}
+
+	if(this.isRowFiltered(e["rid"], e["rowData"])) {
+		return 0;
+	}
+
+	let ret = 0;
+	if(this._groupMembers) {
+		let gids = this._resolveGroupId(e["rowData"]);
+		let groupLen = gids.length;
+		if(groupLen > 1) {
+			// activate multi-group row mode
+			this._shared.multiGroupRow = true;
+		}
+		let gid;
+		for(let i = 0; i < groupLen; i++) {
+			gid = gids[i];
+			if(this._groupMembers[gid]) { // Insert to existing member
+				ret = this._groupMembers[gid]._onRowInserted(e);
+			} else {
+				let member = this._addGroup(gid);
+				if(member) {
+					e["globalChange"] = true;
+					member._onRowInserted(e);
+					ret = 1;
+				}
+			}
+		}
+		if(e["globalChange"]) {
+			this._groupViewDirty = true;
+		}
+	}
+
+	if(this._hidden) {
+		return ret; // the view is hidden and there is no need to be updated
+	}
+
+	let rid = e["rid"];
+	let rowData = e["rowData"];
+
+	if(!this._isAllowedInGroup(rid, rowData)) {
+		return ret;
+	}
+
+	let nextRid = /** @type{string} */(e["nextRid"]);
+	let rowIndex;
+	if(this.isSorting() && !e["segmentChanged"]) {
+		rowIndex = this._addDataRow(rid);
+	} else {
+		rowIndex = this._addDataRow(rid, nextRid, e["fallback"]);
+	}
+
+	let pageIndexChanged = this._updatePageCount();
+	let sorted = this._sort();
+	if(sorted) {
+		e["globalChange"] = true; // Notify parent
+	}
+	if(e["globalChange"]) {
+		if(!sorted && !pageIndexChanged) {
+			this._transformView();
+		}
+	} else {
+		e = { // Slow
+			"rid": rid,
+			"rowData": rowData,
+			"type": "inserted"
+		};
+		if(nextRid != null) {
+			e["nextRid"] = nextRid;
+			e["fallback"] = rowIndex;
+		}
+		if(this._transformView(rowIndex)) {
+			e["globalChange"] = true;
+		}
+	}
+	this._dispatchDataChange(e);
+
+	return 1;
+};
+/** @private
+* @param {!Object} e
+* @return {number}
+*/
+DataView.prototype._onRowRemoved = function(e) { // onRemove
+	if(this._shared.stalledRids) {
+		return 0;
+	}
+
+	if(e["segmentChanged"] && this.isSorting()) {
+		this._refreshAndNotify();
+		return 1; // may not be a correct number
+	}
+
+	let removeCount = 0;
+	let rids = e["rids"];
+	let i;
+	if(this._groupMembers) {
+		let rowData = e["rowData"];
+		let groupIds, groupId;
+		if(!rids && rowData) {
+			groupIds = this._resolveGroupId(rowData);
+			for(i = 0; i < groupIds.length; i++) {
+				groupId = groupIds[i];
+				if(this._groupMembers[groupId]) { // remove existing member
+					removeCount += this._groupMembers[groupId]._onRowRemoved(e);
+				}
+			}
+
+			// should allow rebuilding because rows which the same rid were removed from many groups
+			// sectionSetting will not know the proper changed row index
+			if(removeCount > 1) {
+				this._groupViewDirty = true;
+			}
+		} else {
+			let len = this._groupList.length;
+			for(i = 0; i < len; ++i) {
+				groupId = this._groupList[i];
+				removeCount += this._groupMembers[groupId]._onRowRemoved(e);
+			}
+		}
+	}
+
+	let firstModifiedIndex = NaN;
+	let removedRids = null;
+	let rid, at;
+
+	// TODO: Change removal mechanism to object map based logic to speed up the process
+	removeCount = 0;
+	if(rids) {
+		removedRids = [];
+		for(i = rids.length; --i >= 0;) {
+			rid = rids[i];
+			at = this._removeDataRow(rid);
+			if(at >= 0) {
+				removedRids.push(rid);
+				if(!(at >= firstModifiedIndex)) {
+					firstModifiedIndex = at;
+				}
+			}
+		}
+		removeCount = removedRids.length;
+	} else {
+		rid = e["rid"];
+		at = this._removeDataRow(rid);
+		if(at >= 0) {
+			removedRids = [rid];
+			firstModifiedIndex = at;
+			removeCount = 1;
+		}
+	}
+	if(removeCount > 0) {
+		// No sorting is required, since no order should be changed during the removal
+		let pageIndexChanged = this._updatePageCount();
+		if(pageIndexChanged || this._transformView(firstModifiedIndex)) {
+			this._dispatchGlobalChange();
+		} else {
+			this._dispatchMultiRowRemoved(removedRids);
+		}
+		if(this._shared.autoGroupRemoval &&
+			this._groupRows &&
+			this._rids.length <= 0) {
+			this._triggerGroupRefreshing(); // Set a timer to refresh group view
+		}
+		if (this._hiddenHeaderRow) { // If the first row is removed while th group is collapsing, the next row should take place.
+			this._requestRebuildingRowIds(true); // TODO: Optimize
+		}
+	}
+	return removeCount;
+};
+/** @private
+* @param {!Object} e
+* @return {number}
+*/
+DataView.prototype._onRowUpdated = function(e) { // onUpdate
+	let rid = e["rid"];
+	let rowData = e["rowData"];
+	let i, gid;
+	if(this.isRowFiltered(rid, rowData)) { // The row is qualified but it is filtered out
+		if(this._onRowRemoved(e)) {
+			return 1;
+		}
+		return 0; // The row does not belong to this view
+	}
+
+	if(this._groupMembers) {
+		let flags = [];
+		let len = this._groupList.length;
+		for(i = 0; i < len; ++i) {
+			gid = this._groupList[i];
+			flags[this._groupMembers[gid]._onRowUpdated(e)] = true;
+		}
+
+		if(e["globalChange"]) { // If current dataView is sorting, globalChange will always be true
+			this._groupViewDirty = true;
+		}
+
+		// conclude flag
+		let processingFlag = 0;
+		if(flags[2]) {
+			processingFlag = 2;
+		} else if(flags[1]) {
+			if(!this._isAllowedInGroup(rid, rowData)) {
+				processingFlag = 1;
+			}
+		} else if(flags[4]) {
+			processingFlag = 4;
+		}
+
+		if(this._groupLevel > 0) {
+			if(processingFlag === 1) { // The row is moved to the other group
+				if(DataView._removeArrayItem(this._rids, rid) >= 0) {
+					if(this._groupView) {
+						DataView._removeArrayItem(this._groupView, rid);
+					}
+				}
+				if(this._shared.multiGroupRow) {
+					this._groupViewDirty = true;
+				}
+			} else if(processingFlag === 2) { // The row is added to its sub-group
+				if(!this._hidden) {
+					if(this._rids.indexOf(rid) < 0) {
+						this._rids.push(rid);
+					}
+
+					this._groupViewDirty = true; // Adding row to sub-group both single and multiple-group require parent group to rebuild rows
+
+					let groupLen = this._resolveGroupId(rowData).length;
+					if(groupLen > 1) {
+						// activate multi-group row mode
+						this._shared.multiGroupRow = true;
+					}
+				}
+			}
+		} else { // This is the root node
+			let noNewGroup = (flags[1] && flags[2]) || flags[4];
+			if(this._shared.multiGroupRow || !noNewGroup) {
+				// 0 - updated data from non-existing group to new group
+				// 1 - updated data from existing group to new group
+				// 2 - updated data from a non-existing group to existing group
+				// 3 - updated data from a existing group to another existing group
+				// 4 - updated data with in a single group and no group member changed
+				let gids = this._resolveGroupId(rowData);
+				for(i = 0; i < gids.length; i++) {
+					gid = gids[i];
+					let member = this._addGroup(gid); // Add header row
+					if(member) {
+						member._onRowInserted(e);
+						processingFlag = 1;
+					}
+				}
+			}
+
+			if(!noNewGroup && !this._hidden && this._rids.indexOf(rid) < 0) {
+				this._addDataRow(rid);
+			}
+
+			if(processingFlag === 4) {
+				if(this._shared.multiGroupRow) {
+					this._dispatchGlobalChange();
+				} else {
+					this._dispatchDataChange(e);
+				}
+			} else {
+				this._groupViewDirty = true;
+				this._dispatchGlobalChange();
+			}
+		}
+		return processingFlag;
+	}
+
+	// recursive task for leaf group
+	if(this._isAllowedInGroup(rid, rowData)) {
+		let newRowIndex = this._rids.indexOf(rid);
+		if(newRowIndex < 0) { // The row is qualified to be in the group, but not in the current view, so insert the row
+			this._onRowInserted(e);
+			return 2;
+		}
+
+		// Perform normal data updating
+		if (!this._shared.stalledRids) { // Stalled view cannot be sorted
+			if(this._sort()) {
+				e["globalChange"] = true;
+			}
+		}
+
+		this._dispatchDataChange(e);
+		return 4; // Update is within the group
+	} else {
+		if(this._onRowRemoved(e)) {
+			return 1;
+		}
+		return 0; // The row does not belong to this view
+	}
+};
+/** @private
+* @param {!Object} e
+*/
+DataView.prototype._onGroupAdded = function(e) {
+	if(!this._hidden) {
+		let newGroup = /** @type{DataView} */(e["newGroup"]);
+		let rid = newGroup.getGroupRowId();
+		this._groupView.push(rid); // Add header row
+		this._groupViewDirty = true;
+		this._dispatch("groupAdded", e);
+
+		Util.pushArrayItems(this._groupView, newGroup.getFooterRowIds());
+	}
+};
+/** @private
+* @param {!Object} e
+*/
+DataView.prototype._onBeforeGroupAdded = function(e) {
+	this._dispatch("beforeGroupAdded", e);
+};
+/** NOTE: This is not handle well in case of calling this function infinitely
+ * @private
+* @param {boolean} bottomUp
+*/
+DataView.prototype._requestRebuildingRowIds = function(bottomUp) {
+	if(this._groupMembers) {
+		this._groupViewDirty = true;
+	}
+	if(this._groupLevel > 0) {
+		this._parent._requestRebuildingRowIds(bottomUp);
+	} else {
+		if(bottomUp) { // Regenerate row Ids from children. Use when something is changed and can be resolved from the requester.
+			this._rebuildRowIdsFromChildren();
+		} else { // Use when something is changed in the hierarchy tree but cannot be resolved by any of the children. Root view then repopulates the entire tree (slow).
+			this._updateRowIds();
+		}
+		this._dispatchGlobalChange();
+	}
+};
+/** There should be no other operation after calling this method
+* @private
+*/
+DataView.prototype._refreshAndNotify = function() {
+	this._updateRowIds();
+	this._dispatchGlobalChange();
+};
+/** @private
+*/
+DataView.prototype._onRefreshTimeout = function() {
+	this._refreshTimerId = 0;
+	this._refreshAndNotify();
+};
+
+/** @private
+* @param {string} rid
+* @param {string=} opt_nextRid
+* @param {number=} opt_fallback
+* @return {number}
+*/
+DataView.prototype._addDataRow = function(rid, opt_nextRid, opt_fallback) {
+	let rowIndex = this._getRowIndex(this._rids, opt_nextRid, opt_fallback);
+	this._insertItems(this._rids, rowIndex, rid);
+	if(this._groupView) {
+		if(this._groupMembers) {
+			this._groupViewDirty = true;
+			return this._insertItems(this._groupView, -1, rid);
+		} else if(rowIndex < 0) { // No nextRid, No fallback
+			return this._insertItems(this._groupView, -1, rid);
+		}
+
+		rowIndex = this._getRowIndex(this._groupView, opt_nextRid, opt_fallback);
+		return this._insertItems(this._groupView, rowIndex, rid);
+	}
+
+	return (rowIndex >= 0) ? rowIndex : this._rids.length - 1;
+};
+/** @private
+* @param {Array.<string>} ary
+* @param {number} idx
+* @param {string} item1
+* @return {number} Return the first position of the inserted item
+*/
+DataView.prototype._insertItems = function(ary, idx, item1) {
+	if(idx < 0){
+		idx = ary.length;
+		ary.push(item1);
+	} else {
+		ary.splice(idx, 0, item1);
+	}
+	return idx;
+};
+/** @private
+* @param {Array.<string>} rids
+* @param {string=} opt_nextRid
+* @param {number=} opt_fallback Fallback index in case of no nextRid found
+* @return {number} Return negative number if not found
+*/
+DataView.prototype._getRowIndex = function(rids, opt_nextRid, opt_fallback) {
+	if(opt_nextRid == null) {
+		return -1;
+	}
+
+	let rowIndex = this._rids.indexOf(opt_nextRid);
+	if(rowIndex >= 0) {
+		return rowIndex;
+	}
+
+	if(opt_fallback == null || opt_fallback >= rids.length) {
+		return -1;
+	}
+	return /** @type{number} */(opt_fallback);
+};
+/**
+* @private
+* @param {string} rid
+* @returns {number}
+*/
+DataView.prototype._removeDataRow = function(rid) {
+	let at = DataView._removeArrayItem(this._rids, rid);
+	if(this._groupView && at >= 0) {
+		at = DataView._removeArrayItem(this._groupView, rid);
+	}
+	return at;
+};
+/** @private
+* @param {!Array} ary
+* @param {*} item
+* @return {number} Index of the removed item
+*/
+DataView._removeArrayItem = function(ary, item) {
+	let at = ary.indexOf(item);
+	if(at >= 0) {
+		ary.splice(at, 1);
+	}
+	return at;
+};
+/** Remove multiple array items
+* @private
+* @param {Array.<string>} ary
+* @param {Object} items
+* @return {number} First item index that is being removed. NaN if no item is removed
+*/
+DataView._removeArrayItems = function(ary, items) {
+	let f = NaN;
+	let c = 0;
+	for(let i = ary.length; --i >= 0;) {
+		if (items[ary[i]]) {
+			++c;
+		} else if(c) {
+			f = i + 1;
+			ary.splice(f, c);
+			c = 0;
+		}
+	}
+	if(c) {
+		ary.splice(0, c);
+		f = 0;
+	}
+	return f;
+};
+/** @private
+* @param {Object} baseObj
+* @param {Object} masterObj
+* @returns {number}
+*/
+DataView._copyValidObjectKeys = function(baseObj, masterObj) {
+	if(masterObj) {
+		let count = 0;
+
+		for(let key in masterObj) {
+			if(masterObj[key]) {
+				baseObj[key] = 1;
+				++count; // WARNING: duplicated key can be counted more than once
+			}
+		}
+		return count;
+	}
+	return 0;
+};
+
+/** @private
+* @param {string|null} rid
+* @param {Object} rowData
+* @return {boolean}
+*/
+DataView.prototype._isAllowedInGroup = function(rid, rowData) {
+	// Check if it the row is belong to this group branch
+	if(this._groupLevel > 0) {
+		let dv = this;
+		for(let i = this._groupLevel; --i >= 0;) {
+			if(!dv._groupFilterLogic(rid, rowData)) {
+				return false;
+			}
+			dv = dv.getDataSource();
+		}
+	}
+
+	return true; // The row is in this group
+};
+/** Check if the row should be filtered out
+* @public
+* @param {string} rid
+* @param {Object} rowData
+* @return {boolean}
+*/
+DataView.prototype.isRowFiltered = function(rid, rowData) {
+	if(this._shared.stalledRids) {
+		return !this._shared.stalledRids[rid]; // Snapshot override everything else
+	}
+	if(this._hiddenRids) {
+		if(this._hiddenRids[rid]) {
+			return true;
+		}
+	}
+	if(this._collapsedRids) {
+		if(this._collapsedRids[rid]) {
+			return true;
+		}
+	}
+
+	if(this._userFilter) {
+		if(this._userFilter(rid, rowData) === this._filteringOut) {
+			return true;
+		}
+	}
+	return false; // The row is not filtered out
+};
+
+/** Performance is extremely vital in this method.<br>
+* _sort() will be executed by: _onRowUpdated(), _onRowInserted(), _updateRowIds(), and sort()
+* @private
+* @return {boolean} True if there is any change, otherwise false
+*/
+DataView.prototype._sort = function() {
+	if(this._groupMembers) {
+		return false; // DataView with children should not be sorted as sort operation will be done on each child
+	}
+	if(this._stalledSorting) {
+		return false;
+	}
+
+	if(this._dt._getSegmentSeparators() || this.isSorting()) {
+		let rids = this._rids;
+		let dataRows = this._dt.getMultipleRowData(rids);
+		let segmentValues = this._dt.getSegmentValues(rids, true); // WARNING: This does not work well for hidden/filtered rows
+		let change = DataTable._performMultiLevelSorting(dataRows, this._sortingDefs, segmentValues);
+
+		if(change) {
+			this._rids = DataTable._reorderItems(rids, change); // Group view should be changed after this
+			this._transformView();
+			return true;
+		}
+	}
+
+	return false;
+};
+
+/** @private
+* @param {string} rid
+* @returns {boolean}
+*/
+DataView.prototype._byRemovalMap = function(rid) {
+	return !this._excludedRids[rid];
+};
+/** @private
+* @param {Object} removalMap
+* @param {Function} checker
+* @param {boolean} filteringOut
+* @param {Object=} exceptions
+* @returns {number} Number of rids that would be filtered out
+*/
+DataView.prototype._getRemovalMap = function(removalMap, checker, filteringOut, exceptions) {
+	if(!checker) {
+		return 0;
+	}
+
+	let rids = this._rids; // Make local variable to speed up the process
+	let dt = this._dt;
+	let count = 0;
+	let rid, i, values;
+	let len = rids.length;
+
+	if(exceptions) {
+		for(i = len; --i >= 0;) {
+			rid = rids[i];
+			if(!exceptions[rid]) {
+				values = dt.getRowData(rid);
+				if (values) {
+					if(checker(rid, values) === filteringOut) {
+						removalMap[rid] = 1;
+						++count;
+					}
+				} else {
+					removalMap[rid] = 1;
+					++count;
+				}
+			}
+		}
+	} else {
+		for(i = len; --i >= 0;) {
+			rid = rids[i];
+			values = dt.getRowData(rid);
+			if (values) {
+				if(checker(rid, values) === filteringOut) {
+					removalMap[rid] = 1;
+					++count;
+				}
+			} else {
+				removalMap[rid] = 1;
+				++count;
+			}
+		}
+	}
+	return count;
+};
+/** @private
+* @param {Object} removalMap
+* @param {Object} segmentRids
+* @returns {number} Number of rids that would be filtered out
+*/
+DataView.prototype._getEmptySegments = function(removalMap, segmentRids) {
+	let segments = this._dt._getSegmentSeparators();
+	let count = 0;
+	for(let segmentId in segmentRids) {
+		let segment = segments.getSegment(segmentId);
+		if(segment) {
+			let chdr = segment.getChildren();
+			let emptySegment = true;
+			for(let childId in chdr) {
+				if(!removalMap[childId]) {
+					emptySegment = false;
+					break;
+				}
+			}
+			if(emptySegment) {
+				removalMap[segmentId] = 1;
+				++count;
+			}
+		}
+	}
+
+	return count;
+};
+
+/** @private
+* @param {string|Function|undefined} cid
+* @param {*} value
+* @return {Function} A new function object is created, if cid is a string
+*/
+DataView.prototype._getFilterLogic = function(cid, value) {
+	if(cid != null) {
+		if(typeof cid == "function") {
+			return cid;
+		} else if(typeof cid == "string") {
+			return DataView._defaultFilterLogic.bind(null, cid, value);
+		} else {
+			return DataView._defaultFilterLogic.bind(null, cid + "", value);
+		}
+	}
+	return null;
+};
+
+/**
+* @private
+* @param {number} pageIndex
+* @return {boolean} True if there is any change, otherwise false
+* @fires DataView#pageIndexChanged
+*/
+DataView.prototype._setPage = function (pageIndex) {
+	if (pageIndex > this._lastPageIndex && this._pageCorrection) {
+		pageIndex = this._lastPageIndex;
+	}
+	if (pageIndex < 1) {
+		pageIndex = 1;
+	}
+
+	if (pageIndex == this._pageIndex) {
+		return false;
+	}
+
+	this._pageIndex = pageIndex;
+	this._transformView();
+	this._dispatch("pageIndexChanged", {"pageIndex": this._pageIndex});
+	return true;
+};
+/** @private
+* @param {number=} firstChange Negative value is equivalent to 0
+* @return {boolean} Return true if there is any change, otherwise false
+*/
+DataView.prototype._updatePaginationView = function(firstChange) {
+	let dirty = false;
+	if(this._pageView) {
+		if(!firstChange) { firstChange = 0; }
+
+		let pageStart = this._pageSize * (this._pageIndex - 1);
+
+		let pageEnd = this._pageSize + pageStart;
+		if(firstChange < pageEnd) { // The change happens before current page
+			let rids = this._groupView || this._rids;
+			if (pageEnd > rids.length) { // Shrink view if the last page is not a full page
+				pageEnd = rids.length;
+			}
+
+			// Populate the page
+			let ridsLen = pageEnd - pageStart;
+			this._pageView.length = (ridsLen >= 0) ? ridsLen : 0;
+			for(let i = pageStart; i < pageEnd; ++i) {
+				this._pageView[i - pageStart] = rids[i];
+			}
+			dirty = true;
+		}
+	}
+	return dirty;
+};
+
+/** WARNING: _transformView() may be called due to page index changed
+* @private
+* @return {boolean} Return true if page index is changed
+* @fires DataView#pageCountChanged
+* @fires DataView#pageIndexChanged
+*/
+DataView.prototype._updatePageCount = function () {
+	let lastPageIndex = 1;
+	if (this._pageSize > 0) {
+		let rows = this._groupView || this._rids;
+		let rowCount = (rows.length > 0) ? rows.length : 0;
+		lastPageIndex = Math.ceil(rowCount / this._pageSize);
+	}
+	if(this._lastPageIndex !== lastPageIndex) {
+		this._lastPageIndex = lastPageIndex;
+		this._dispatch("pageCountChanged", {"pageCount": this._lastPageIndex});
+
+		if(this._lastPageIndex < this._pageIndex && this._pageCorrection) {
+			return this._setPage(this._lastPageIndex);
+		}
+	}
+	return false;
+};
+
+/** @private
+* @param {string} rid
+*/
+DataView.prototype._dispatchRowRemoved = function(rid) {
+	if(rid) {
+		this._dispatchDataChange({"type": "removed", "rid": rid});
+	}
+};
+/** @private
+* @param {Array.<string>} rids
+*/
+DataView.prototype._dispatchMultiRowRemoved = function(rids) {
+	if(rids) {
+		let count = rids.length;
+		if(count === 1) {
+			this._dispatchRowRemoved(rids[0]);
+		} else if(count > 1) {
+			this._dispatchDataChange({"type": "removed", "rids": rids});
+		}
+	}
+};
+/** @private
+*/
+DataView.prototype._dispatchGlobalChange = function() {
+	this._dispatchDataChange(DataTable._globalChangeArg);
+};
+/** @private
+* @param {!Object} evtArgument
+*/
+DataView.prototype._dispatchDataChange = function(evtArgument) {
+	this._dispatch("dataChanged", evtArgument);
+	if(this._wrapSize && !this._wrapTimerId) {
+		this._wrapTimerId = setTimeout(this._updateWrapCount);
+	}
+};
+
+/** @private
+* @param {DataTable|DataView} source
+*/
+DataView.prototype._setParent = function (source) {
+	this._parent = source;
+	this._dt = /** @type{DataTable} */(source);
+	do {
+		source = source.getDataSource();
+		if(source) {
+			this._dt = /** @type{DataTable} */(source);
+		}
+	} while(source);
+
+	if(this._parent && this._dt !== this._parent) { // Copy shared member from parent data view
+		this._shared = this._parent._shared;
+
+		let cids = this._parent._columnStats;
+		if(cids) {
+			for(let cid in cids) {
+				let cs = this.enableColumnStats(cid);
+				let pcs = this._parent.getColumnStats(cid);
+				if(cs && pcs) {
+					cs.setColumnDataGetter(pcs.getColumnDataGetter());
+				}
+			}
+		}
+	}
+};
+
+/** @private
+*/
+DataView.prototype._populateGroups = function () {
+	let initialRids = this._rids;
+	let i, len, member;
+	this._rids = [];
+
+	// Collect members of each group from the available data
+	let groupId, groupIds, groupLen;
+	let ridMap = {};
+	let groupList = [];
+	len = initialRids.length;
+	for(i = 0; i < len; ++i) {
+		let rid = initialRids[i];
+		let rowData = this._dt.getRowData(rid);
+		if(rowData) {
+			groupIds = this._resolveGroupId(rowData);
+			groupLen = groupIds.length;
+			if(groupLen > 1) {
+				// activate multi-group row mode
+				this._shared.multiGroupRow = true;
+			}
+			for(let j = 0; j < groupLen; j++) {
+				groupId = groupIds[j];
+				let groupedRids = ridMap[groupId];
+				if(groupedRids) {
+					groupedRids.push(rid);
+				} else {
+					groupedRids = [rid];
+					ridMap[groupId] = groupedRids;
+					groupList.push(groupId);
+				}
+			}
+		}
+	}
+
+	// Remove groups that have no member
+	if(this._shared.autoGroupRemoval) {
+		len = this._groupList.length;
+		for(i = len; --i >= 0;) {
+			groupId = this._groupList[i];
+			if(!ridMap[groupId]) { // No member exists
+				member = this._groupMembers[groupId];
+				if(member && !member._predefinedGroup) { // Predefined group should not be removed automatically
+					this._removeGroupMember(i, groupId);
+				}
+			}
+		}
+	}
+	// Remove any non existing predefined groups
+	let preDefGroups = null;
+	if(this._preDefGroups && this._groupLevel < this._preDefGroups.length) {
+		preDefGroups = this._preDefGroups[this._groupLevel];
+	}
+
+	len = this._groupList.length;
+	if(this._preDefGroupsDirty) {
+		this._preDefGroupsDirty = false;
+		for(i = len; --i >= 0;) {
+			groupId = this._groupList[i];
+			member = this._groupMembers[groupId];
+			if(member && member._predefinedGroup) {
+				// TODO: Handle the case where predefined groups exist in normal groupList
+				if(preDefGroups) {
+					if(preDefGroups.indexOf(member._groupId) < 0) {
+						this._removeGroupMember(i, groupId);
+					}
+				} else {
+					this._removeGroupMember(i, groupId);
+				}
+			}
+		}
+	}
+
+
+	// Add predefined groups first, allowing user to initially order the groups
+	if(preDefGroups) {
+		len = preDefGroups.length;
+		for(i = 0; i < len; ++i) {
+			let pdg = this._addGroup(preDefGroups[i]);
+			if(pdg) {
+				pdg._predefinedGroup = true;
+			}
+		}
+	}
+	// Add normal group
+	len = groupList.length;
+	for(i = 0; i < len; ++i) {
+		this._addGroup(groupList[i]);
+	}
+
+	// Add row Id
+	len = this._groupList.length;
+	for(i = 0; i < len; ++i) { // Re-distribute this object content to all of its group members
+		groupId = this._groupList[i];
+		member = this._groupMembers[groupId];
+		member._updateRowIds(ridMap[groupId]); // member will be sorted individually
+		member._markColumnStatsDirty(); // Since there is no event fired for child members
+	}
+
+	this._groupViewDirty = true;
+	this._rebuildRowIdsFromChildren();
+};
+/** @private
+* @param {number} groupIndex
+* @param {string} groupId
+*/
+DataView.prototype._removeGroupMember = function (groupIndex, groupId) {
+	let member = this._groupMembers[groupId];
+	if(member) {
+		this._groupList.splice(groupIndex, 1);
+		delete this._groupMembers[groupId];
+
+		member.dispose(); // Clear everything. Note that this will call groupBy(null);
+	}
+};
+/** @private
+* @param {string} cid
+* @param {Object} values
+* @return {Array.<string>}
+*/
+DataView.prototype._defaultGroupCriteria = function(cid, values) {
+	let val = values[cid];
+	if(Array.isArray(val)) {
+		return val.map(function(data) { // TODO: this is very slow
+			return data + "";
+		});
+	} else {
+		return [val + ""];
+	}
+};
+/** @private
+* @param {string|null} rid
+* @param {Object} values
+* @return {boolean}
+*/
+DataView.prototype._groupFilterLogic = function(rid, values) {
+	let gids = this._groupCriteria[this._groupLevel - 1](values); // TODO: this is very slow
+	return gids.indexOf(this._groupId) >= 0;
+};
+
+/** @private
+* @param {string} strA
+* @param {string} strB
+* @return {number}
+*/
+DataView.prototype._internalGroupSortingLogic = function(strA, strB) {
+	let dvA = this._groupMembers[strA];
+	let dvB = this._groupMembers[strB];
+
+	return this._groupSortingLogic(strA, strB, dvA, dvB);
+};
+
+/** @private
+* @param {*} value
+* @return {DataView} Newly added group member. If it already exists, this method returns null.
+*/
+DataView.prototype._addGroup = function (value) {
+	let groupId = value + "";
+	if(!groupId) {
+		// window.console.log("WARNING: Group Id cannot be an empty string");
+		return null;
+	}
+	let member = this._groupMembers[groupId];
+	if(member) {
+		return null;
+	}
+	let parentGrpRowId = this._groupRowId || "_grp";
+	let newGrpRowId = parentGrpRowId + "_" + groupId;
+	let arg;
+	if(this._hasListener("beforeGroupAdded")) {
+		arg = {
+			"dataView": this, // parent
+			"newGroupId": groupId,
+			"newGroupValue": value,
+			"newGroupRowId": newGrpRowId,
+			"newGroupLevel": this._groupLevel + 1
+		};
+		this._dispatch("beforeGroupAdded", arg);
+		if(arg["cancel"]) {
+			return null;
+		}
+	}
+	member = new DataView();
+	let collapsed = this._shared.defaultCollapse;
+	if(collapsed != null) {
+		member._collapsed = collapsed;
+	}
+	member._groupId = groupId;
+	if(typeof value == "string") { // TODO: Raw value should not always be a string
+		if(value == "null") {
+			member._groupValue = null;
+		} else if(value != "undefined") {
+			member._groupValue = value;
+		} // else { value is undefined string
+	} else {
+		member._groupValue = value;
+	}
+
+	if (arg && arg["hideHeaderRow"] === true) {
+		member._hiddenHeaderRow = true;
+	}
+
+	member._groupRowId = newGrpRowId;
+	member._groupLevel = this._groupLevel + 1;
+	member._groupCriteria = this._groupCriteria; // Shared Member
+	member._preDefGroups = this._preDefGroups;
+	if(member._groupLevel < member._groupCriteria.length) {
+		member._groupMembers = {};
+		member._groupList = [];
+		member._groupView = [];
+	}
+	member._groupRows = this._groupRows; // Shared Member
+	member._setParent(this);
+	member._sortingDefs = this._sortingDefs; // Shared Member
+
+	this._groupMembers[groupId] = member;
+	this._groupList.push(groupId);
+	this._groupRows[member._groupRowId] = member;
+
+	if(!this._hidden) {
+		if (member._isHeaderRowShown()) {
+			this._groupView.push(member._groupRowId); // Add header row
+		}
+
+		this._groupViewDirty = true;
+		member._beingAdded = true;
+		this._dispatch("groupAdded", {
+			"dataView": this,
+			"newGroup": member
+		});
+		member._beingAdded = false;
+	}
+
+	member.listen("groupAdded", this._onGroupAdded);
+	if(this._hasListener("beforeGroupAdded")) {
+		member.listen("beforeGroupAdded", this._onBeforeGroupAdded);
+	}
+	return member;
+};
+/** @private
+*/
+DataView.prototype._triggerGroupRefreshing = function () {
+	if(this._groupLevel > 0) {
+		if(this._parent) {
+			this._parent._triggerGroupRefreshing();
+		}
+	} else if(this._groupRows && !this._refreshTimerId) {
+		this._refreshTimerId = setTimeout(this._onRefreshTimeout, 100);
+	}
+};
+/** @private
+* @fires DataView#pageCountChanged
+* @fires DataView#pageIndexChanged
+*/
+DataView.prototype._rebuildRowIdsFromChildren = function () {
+	if(!this._groupViewDirty) {
+		return;
+	}
+
+	this._rids.length = 0;
+	if(this._groupView) { this._groupView.length = 0; }
+	if(!this._hidden) {
+		let grpLen = this._groupList.length;
+		for(let i = 0; i < grpLen; ++i) { // Re-distribute this object content to all of its group members
+			let gid = this._groupList[i];
+			let member = this._groupMembers[gid];
+			member._rebuildRowIdsFromChildren();
+
+			Util.pushArrayItems(this._rids, member._rids);
+
+			if(!this._collapsed && this._groupView) {
+				if (member._isHeaderRowShown()) {
+					this._groupView.push(member._groupRowId); // Add header row
+				}
+				if(!member._collapsed) { // WARNING: This gives different value from isCollapsed() method
+					let rids = member._getFirstHiddenRids() || member._groupView || member._rids;
+					Util.pushArrayItems(this._groupView, rids);
+					Util.pushArrayItems(this._groupView, member._footerRowIds);
+				}
+			}
+		}
+	}
+	this._groupViewDirty = false;
+
+	// View has been re-created. So we need to add row expansion
+	if(!this._updatePageCount()) {
+		this._transformView();
+	}
+};
+/** @private
+* @param {Object} rowData
+* @return {Array.<string>}
+*/
+DataView.prototype._resolveGroupId = function (rowData) {
+	return /** @type{Array.<string>} */(this._groupCriteria[this._groupLevel](rowData));
+};
+
+/** @private
+*/
+DataView.prototype._markColumnStatsDirty = function() {
+	for(let cid in this._columnStats) {
+		this._columnStats[cid].markDirty();
+	}
+};
+
+/** @private
+* @function
+* @param {string} cid
+* @param {*} value
+* @param {string} rid
+* @param {Object.<string, *>} values
+* @return {boolean}
+*/
+DataView._defaultFilterLogic = function(cid, value, rid, values) {
+	return (values[cid] === value);
+};
+/** @private
+* @function
+* @param {string} strA
+* @param {string} strB
+* @return {number}
+*/
+DataView._defaultGroupSortingLogic = function(strA, strB) {
+	if(strA == strB) {
+		return 0;
+	}
+	return (strA < strB) ? -1 : 1;
+};
+
+
+export default DataView;
+export { DataView };