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

package/lib/tr-grid-row-grouping/es6/RowGrouping.js

@@ -0,0 +1,1728 @@
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import { ExpanderIcon } from "../../tr-grid-util/es6/ExpanderIcon.js";
+import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { RowPainter } from "../../tr-grid-util/es6/RowPainter.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+
+/** @typedef {Object} RowGroupingPlugin~Options
+* @description The options can be specified by `rowGrouping` property of the main grid's options
+* @property {boolean=} autoGroupRemoval=false Remove group that has no row member.
+* @property {boolean=} autoGroupHiding=false Hide "null" or "undefined" group headers, while keeping the group's items intact.
+* @property {(Array|Array.<Array>)=} predefinedGroups=null Add groups without content rows. Use 2D array for multi-level grouping.
+* @property {RowGroupingPlugin~GroupCriteria=} groupBy=null GroupCriteria can be string, function, or array of string.
+* @property {RowGroupingPlugin~GroupCriteria=} groupCriteria=null Alias to `groupBy`.
+* @property {number=} displayColumn=0 Column Index for group header rendering.
+* @property {boolean=} fixedDisplayColumn=false If enabled, displayColumn will remain in the same index, even if columns are shifted by insertion or removal.
+* @property {boolean=} noCollapsible=false If enabled, arrows will be hidden and cell is not clickable. This flag takes precedence over `clickableCell` and `hiddenArrow`.
+* @property {boolean=} clickableCell=true If disabled, clicking at cell will not expand that group
+* @property {(boolean|number|Array.<number>)=} hiddenArrow Specify header levels which is a single number start from 1 or an array of number that want to hide arrow icon. If specify true all arrows will be hidden.
+* @property {boolean=} contentAsHeader=false If enabled, second level group header rows are hidden, the first content rows become a header, cells are not be clickable, and arrows are hidden.
+* @property {boolean=} headerSpanning=true If disabled, every cell on the group header row is displayed
+* @property {boolean=} footerSpanning=false If enabled, only cells from the first column will be shown, spanning over other cells
+* @property {RowGroupingPlugin~GroupSortLogic=} groupSortLogic=null Logic for group sorting. There is no sorting by default (i.e. groups are placed in order of their creation time)
+* @property {boolean=} autoGroupSorting=false If enabled, group sorting will be performed after each `groupAdded` event
+* @property {(boolean|number|Array.<number>)=} indentSize Use array to define indent for each group level. Use boolean to turn on or off indentation. Use number to define incremental step.
+* @property {boolean=} colorTag If not specified, the color tag will be disabled when using extension without halo theme.
+* @property {Object=} predefinedColors Predefined color object map for color tag
+* @property {Object=} groupColors - The object map of group ID and predefined color.
+* @property {boolean=} defaultCollapse=false Collapsing groups by default when a group is created
+* @property {Function=} clicked=null Event handler when user clicks on arrows or cells
+* @property {Function=} groupAdded=null Event handler
+* @property {Function=} beforeGroupAdded=null Event handler
+* @property {Function=} groupHeaderBinding=null Logic that will be executed on each group header row
+* @property {Function=} groupFooterBinding=null Once defined, footer row will be added on each group
+* @property {Function=} headerBinding=null Shorthand for `groupHeaderBinding`
+* @property {Function=} footerBinding=null Shorthand for `groupFooterBinding`
+* @property {Function=} nonGroupBinding=null This is used to clear any custom styling defined in groupHeaderBinding or groupFooterBinding
+*/
+
+/** @event RowGroupingPlugin#clicked
+* @description Fired when users click on UIs that trigger expanding or collapsing a group
+* @type {Object}
+* @property {number} rowIndex
+* @property {boolean} expanded
+* @property {Object} group Data view that represents currently clicked group header row
+*/
+/** @event RowGroupingPlugin#beforeGroupAdded
+* @description Fired each time before group added. Set property `cancel` to true to cancel adding of the new group
+* @type {Object}
+* @property {Object} dataView DataView instance
+* @property {string} newGroupId
+* @property {*} newGroupValue
+* @property {string} newGroupRowId Unique row Id given for the group
+*/
+/** @event RowGroupingPlugin#groupAdded
+* @property {Object} dataView Parent DataView that create the new group
+* @property {Object} newGroup Child DataView that is newly created
+*/
+
+/** @event RowGroupingPlugin#groupFooterBinding
+* @description Fired when footer of each group is rendered
+* @type {Object}
+* @property {object} rowData
+* @property {number} colIndex
+* @property {number} rowIndex
+* @property {string} rowId
+* @property {number} footerIndex
+* @property {string} groupId
+* @property {boolean} footerRow
+* @property {Object} cell Grid cell instance
+* @property {Object} section VirtualizedLayoutGrid
+* @property {Object} dataSource Parent DataView of group
+*/
+/** @event RowGroupingPlugin#groupHeaderBinding
+* @description Fired when header of each group is rendered
+* @type {Object}
+* @property {object} rowData
+* @property {number} colIndex
+* @property {number} rowIndex
+* @property {string} rowId
+* @property {number} footerIndex
+* @property {string} groupId
+* @property {boolean} footerRow
+* @property {Object} cell Grid cell instance
+* @property {Object} section VirtualizedLayoutGrid
+* @property {Object} dataSource Parent DataView of group
+*/
+/** @event RowGroupingPlugin#nonGroupBinding
+* @description Fired for each normal content row rendering
+* @type {Object}
+* @property {object} rowData
+* @property {number} colIndex
+* @property {number} rowIndex
+* @property {string} rowId
+* @property {Object} cell Grid cell instance
+* @property {Object} section VirtualizedLayoutGrid
+* @property {Object} dataSource Root DataView of all group
+* @property {boolean} noIndent set this property to true to prevent cell add indent
+*/
+
+/** @callback RowGroupingPlugin~GroupSortLogic
+* @description Method parameters provided by `groupSortLogic` callback
+* @param {*} grpValA Group value of the group in left hand side
+* @param {*} grpValB Group value of the group in right hand side
+* @param {Object=} grpDataViewA DataView of the group in left hand side
+* @param {Object=} grpDataViewB DataView of the group in right hand side
+* @return {number}
+*/
+
+/** @typedef {string|Array.<string|Function>} RowGroupingPlugin~GroupCriteria
+* @description GroupCriteria can be one of the following values: <br>
+* <b>null</b> input will clear all existing grouping criteria <br>
+* <b>string</b> input is treat as column/field name in the data table <br>
+* <b>Function</b> input is for custom criteria <br>
+* <b>Array</b> input will create multiple groups in tree like manner (nested group criteria)
+*/
+
+/** @typedef {Object} RowGroupingPlugin~GroupingState
+* @description state of groupings or JSON String
+* @property {boolean} collapsed
+* @property {(number|string)=} groupId
+*/
+
+/** Creates groups based on the given criteria. Group should appears in order of data in the data view. Use {@link RowGroupingPlugin#sortGroups} to re-order groups manually.
+* @constructor
+* @extends {GridPlugin}
+* @param {RowGroupingPlugin~Options=} options Extension's configuration object
+*/
+let RowGroupingPlugin = function (options) {
+	let t = this;
+	t._onColumnIndexChanged = t._onColumnIndexChanged.bind(t);
+	t._getRowsForContentAsHeader = t._getRowsForContentAsHeader.bind(t);
+	t._onPostSectionDataBinding = t._onPostSectionDataBinding.bind(t);
+	t._onCellClicked = t._onCellClicked.bind(t);
+	t._onMapCriteria = t._onMapCriteria.bind(t);
+	t._onGroupCriteriaChanged = t._onGroupCriteriaChanged.bind(t);
+	t._onGroupAdded = t._onGroupAdded.bind(t);
+	t._onBeforeGroupAdded = t._onBeforeGroupAdded.bind(t);
+	t._updateCursor = t._updateCursor.bind(t);
+	t.updateHeaders = t.updateHeaders.bind(t);
+	t.sortGroups = t.sortGroups.bind(t);
+	t._onItemGroupColumnClicked = t._onItemGroupColumnClicked.bind(t);
+	t._onItemUnGroupColumnClicked = t._onItemUnGroupColumnClicked.bind(t);
+	t._onItemExpandAllClicked = t._onItemExpandAllClicked.bind(t);
+	t._onItemCollapseAllClicked = t._onItemCollapseAllClicked.bind(t);
+
+	t._criteria = [];
+	t._criteriaFuncs = [];
+	t._hosts = [];
+	t.config({ "rowGrouping": options });
+};
+Ext.inherits(RowGroupingPlugin, GridPlugin);
+
+/** @type {boolean}
+* @private
+*/
+RowGroupingPlugin.prototype._dirty = false;
+/** @type {boolean}
+* @private
+*/
+RowGroupingPlugin.prototype._shouldUpdateDisplayColumn = true;
+/** @type {!Array.<string|Function>}
+* @private
+*/
+RowGroupingPlugin.prototype._criteria;
+/** @type {!Array.<Function>}
+* @private
+*/
+RowGroupingPlugin.prototype._criteriaFuncs;
+/** @type {Array}
+* @private
+*/
+RowGroupingPlugin.prototype._predefinedGroups = null;
+/** @type {Function}
+* @private
+*/
+RowGroupingPlugin.prototype._groupSortFunction;
+
+/** @type {boolean}
+* @private
+*/
+RowGroupingPlugin.prototype._disabled = false;
+/** @type {boolean}
+* @private
+*/
+RowGroupingPlugin.prototype._fixedDisplayColumn = -1;
+/** @type {number}
+* @private
+*/
+RowGroupingPlugin.prototype._displayColumn = 0; // Target prospect column
+/** @type {number}
+* @private
+*/
+RowGroupingPlugin.prototype._headerColumn = -1; // Actual display column
+/** @type {string}
+* @private
+*/
+RowGroupingPlugin.prototype._headerColumnField = ''; // Actual display column field
+/** @type {Array.<number>}
+* @private
+*/
+RowGroupingPlugin.prototype._indentSizes = null;
+/** @type {number}
+* @private
+*/
+RowGroupingPlugin.prototype._arrowSize = 9; // Solar theme's arrow size
+/** @type {boolean}
+* @private
+*/
+RowGroupingPlugin.prototype._noCollapsible = false;
+/** @type {boolean}
+* @private
+*/
+RowGroupingPlugin.prototype._headerSpanning = true;
+/** @type {boolean}
+* @private
+*/
+RowGroupingPlugin.prototype._footerSpanning = false;
+/** @type {boolean}
+* @private
+*/
+RowGroupingPlugin.prototype._autoGroupSorting = false;
+/** @type {number}
+* @private
+*/
+RowGroupingPlugin.prototype._sortingTimer = 0;
+/** @type {number}
+* @private
+*/
+RowGroupingPlugin.prototype._footerRows = 0;
+/** @type {boolean}
+* @private
+*/
+RowGroupingPlugin.prototype._autoGroupRemoval = false;
+/** @type {boolean}
+* @private
+*/
+RowGroupingPlugin.prototype._autoGroupHiding = false;
+/** @type {boolean}
+* @private
+*/
+RowGroupingPlugin.prototype._contentAsHeader = false;
+/** @type {number}
+* @private
+*/
+RowGroupingPlugin.prototype._timerId = 0;
+/** @type {string}
+* @private
+*/
+RowGroupingPlugin._iconName = ""; // static variable
+/** @type {boolean}
+* @private
+*/
+RowGroupingPlugin.prototype._clickableCell = true;
+/** @type {boolean|Object}
+* @private
+*/
+RowGroupingPlugin.prototype._hiddenArrow = false;
+/** @type {boolean}
+* @private
+*/
+RowGroupingPlugin.prototype._clickDisabled = false;
+/** @type {Object}
+* @private
+*/
+RowGroupingPlugin.prototype._rowPainter = null;
+/** @type {boolean|null}
+* @private
+*/
+RowGroupingPlugin.prototype._colorTag = null;
+/** @type {Object}
+* @private
+*/
+RowGroupingPlugin.prototype._predefinedColors = null;
+/** @type {Object}
+* @private
+*/
+RowGroupingPlugin.prototype._groupColors = null;
+/** @type {string}
+* @private
+*/
+RowGroupingPlugin._controlClass = "predefined-color-tag";
+/** @type {Object}
+* @private
+*/
+RowGroupingPlugin.prototype._styleTag = null;
+
+/** @type {Function}
+* @private
+*/
+RowGroupingPlugin.prototype._criteriaGetter = null;
+
+
+/** @private
+* @function
+* @param {string} field
+* @param {Object} dvRowData
+* @return {Array.<string>}
+*/
+RowGroupingPlugin._defaultCriteriaGetter = function (field, dvRowData) {
+	let val = dvRowData[field];
+	return RowGroupingPlugin._toArrayOfString(val);
+};
+/** @private
+* @function
+* @param {string} field
+* @param {Object} dvRowData
+* @return {Array.<string>}
+*/
+RowGroupingPlugin._rowDefCriteriaGetter = function (field, dvRowData) {
+	let rowData = /** @type{Object} */(dvRowData.ROW_DEF.getRowData());
+	let val = rowData[field];
+	return RowGroupingPlugin._toArrayOfString(val);
+};
+/** @private
+* @function
+* @param {string|Array} data
+* @return {Array.<string>}
+*/
+RowGroupingPlugin._toArrayOfString = function (data) {
+	if(Array.isArray(data)) {
+		return data.map(String);
+	} else {
+		return [data + ""];
+	}
+};
+
+/** @private
+ * @param {Array.<Object>} columns
+* @return {number} Return negative number if the column not found
+* Note: _findCheckboxColumnIndexFromConfig function is duplicated in CheckboxExtension
+*/
+RowGroupingPlugin.prototype._findCheckboxColumnIndexFromConfig = function (columns) {
+	if (!Array.isArray(columns)) return -1;
+	let index = -1, c = columns.length;
+	for (let i = 0; i < c; i++) {
+		if (columns[i].checkboxColumn) {
+			index = i;
+			break;
+		}
+	}
+	return index;
+};
+
+/** Convert built-in grid config to extension config
+* @public
+* @param {string} optionName
+* @param {*} optionVal
+* @return {*} The transformed value of the option
+*/
+RowGroupingPlugin.prototype.beforeProcessOption = function (optionName, optionVal) {
+	if (optionName == "rowGrouping" && optionVal) {
+		this.config({ "rowGrouping": optionVal });
+		return null; // eslint-disable-line
+	}
+	return; // eslint-disable-line
+};
+
+/** @private
+* @override
+*/
+RowGroupingPlugin.prototype._afterInit = function () {
+	if (this._realTimeGrid) {
+		this._criteriaGetter = RowGroupingPlugin._rowDefCriteriaGetter;
+	} else {
+		this._criteriaGetter = RowGroupingPlugin._defaultCriteriaGetter;
+	}
+	this._shouldUpdateDisplayColumn = true;
+	this._applyGrouping();
+};
+
+/** @public
+* @return {string}
+*/
+RowGroupingPlugin.prototype.getName = function () {
+	return "RowGroupingPlugin"; // Read Only
+};
+
+/** @public
+ * @ignore
+* @param {Element} elem
+* @param {Object} config
+*/
+RowGroupingPlugin.prototype.beforeInit = function(elem, config) {
+	if (ElfUtil.isHaloTheme()) {
+		this._arrowSize = 18;
+	}
+};
+
+/** @public
+* @param {Object} host core grid object
+* @param {Object=} options
+*/
+RowGroupingPlugin.prototype.initialize = function (host, options) {
+	if (this._hosts.indexOf(host) >= 0) {
+		return;
+	}
+
+	if(options && !options.multitable) {
+		while (this._hosts.length) {
+			this.unload(this._hosts[0]);
+		}
+	}
+
+	this._hosts.push(host);
+
+	ExpanderIcon.loadExpanderStyles();
+
+	host.unloadPlugin("CollapsibleHeaderPlugin");
+	host.listen("columnMoved", this._onColumnIndexChanged);
+	host.listen("columnAdded", this._onColumnIndexChanged);
+	host.listen("columnRemoved", this._onColumnIndexChanged);
+	host.listen("postSectionDataBinding", this._onPostSectionDataBinding);
+
+	this.config(options);
+
+	let enabled = this._colorTag != null ? this._colorTag : ElfUtil.isHaloTheme();
+	RowPainter.disableColorTag(host, enabled === false);
+
+	if (this._predefinedColors != null) {
+		this._injectStyles(this._predefinedColors);
+		host.enableClass(RowGroupingPlugin._controlClass);
+	}
+
+	RowPainter.applyGroupingStyles(host);
+
+	this._applyGrouping(); // TODO: Support run-time theme loading
+};
+/** @public
+* @param {Object=} host core grid object
+*/
+RowGroupingPlugin.prototype.unload = function (host) {
+	let at = this._hosts.indexOf(host);
+	if (at < 0) {
+		return;
+	}
+
+	host.unlisten("columnMoved", this._onColumnIndexChanged);
+	host.unlisten("columnAdded", this._onColumnIndexChanged);
+	host.unlisten("columnRemoved", this._onColumnIndexChanged);
+	host.unlisten("postSectionDataBinding", this._onPostSectionDataBinding);
+
+	this._hosts.splice(at, 1);
+
+	this._dispose();
+
+	if (!this._hosts.length) {
+		this._compositeGrid = null;
+		if (this._timerId) {
+			clearTimeout(this._timerId);
+			this._timerId = 0;
+		}
+		if (this._sortingTimer) {
+			clearTimeout(this._sortingTimer);
+			this._sortingTimer = 0;
+		}
+	}
+};
+
+/** @public
+* @param {Object=} options Grid configuration object
+*/
+RowGroupingPlugin.prototype.config = function (options) {
+	if (!options) { return; }
+
+	let option = options.rowGrouping;
+	if (option) {
+		if (option.autoGroupRemoval != null) {
+			this._autoGroupRemoval = !!option.autoGroupRemoval;
+		}
+		if (option.autoGroupHiding != null) {
+			this._autoGroupHiding = !!option.autoGroupHiding;
+		}
+		if (option.headerSpanning != null) {
+			this._headerSpanning = !!option.headerSpanning;
+		}
+		if (option.footerSpanning != null) {
+			this._footerSpanning = !!option.footerSpanning;
+		}
+		if (option.autoGroupSorting != null) {
+			this._autoGroupSorting = !!option.autoGroupSorting;
+		}
+		if (option.defaultCollapse != null) {
+			this.setDefaultCollapse(option.defaultCollapse);
+		}
+		if (option.predefinedGroups != null) {
+			this.setPredefinedGroups(option.predefinedGroups);
+		}
+		if (option.groupBy || option.groupCriteria) {
+			this.setGroupingCriteria(option.groupBy || option.groupCriteria);
+		}
+		if (typeof option.displayColumn === "number") {
+			this._displayColumn = option.displayColumn;
+		}
+		if (option.fixedDisplayColumn != null) {
+			this._fixedDisplayColumn = option.fixedDisplayColumn ? this._displayColumn : -1;
+		}
+		if (typeof option.groupSortLogic === "function") {
+			this.setGroupSortingLogic(option.groupSortLogic);
+		}
+		if (!option.groupHeaderBinding && option.headerBinding) {
+			option.groupHeaderBinding = option.headerBinding;
+		}
+		if (!option.groupFooterBinding && option.footerBinding) {
+			option.groupFooterBinding = option.footerBinding;
+		}
+		if (option.hiddenArrow != null) {
+			let hiddenOption = option.hiddenArrow;
+			if (Array.isArray(hiddenOption)) {
+				let len = hiddenOption.length;
+				this._hiddenArrow = {};
+				for (let i = 0; i < len; i++) {
+					this._hiddenArrow[hiddenOption[i]] = true;
+				}
+			} else if (typeof hiddenOption === "number") {
+				this._hiddenArrow = {};
+				this._hiddenArrow[hiddenOption] = true;
+			} else {
+				this._hiddenArrow = !!option.hiddenArrow;
+			}
+		}
+		if (option.contentAsHeader != null) {
+			this._contentAsHeader = !!option.contentAsHeader;
+		}
+		if (option.clickableCell != null) {
+			this._clickableCell = !!option.clickableCell;
+		}
+		let indentSize = option.indentSize;
+		if (indentSize != null) {
+			if (typeof indentSize === "boolean") {
+				if (indentSize) {
+					this._indentSizes = null; // Set to default
+				} else {
+					this._indentSizes = [0];
+				} // TODO: Handle default case
+			} else if (typeof indentSize === "number") {
+				this._indentSizes = new Array(5);
+				for (let j = 0; j < 5; j++) {
+					this._indentSizes[j] = indentSize * j;
+				}
+			} else if (Array.isArray(indentSize)) {
+				this._indentSizes = indentSize;
+			}
+		}
+		if (option.noCollapsible != null) {
+			this._noCollapsible = !!option.noCollapsible;
+			if (this._noCollapsible) {
+				this._indentSizes = [0]; // Content will not be indented
+			}
+		}
+		if (this._contentAsHeader || this._noCollapsible) { // contentAsHeader has higher priority than hiddenArrow
+			this._clickableCell = false; // Cells are not clickable
+			this._hiddenArrow = true; // Arrows are hidden
+		}
+
+		this.addListener(option, "clicked");
+		this.addListener(option, "groupAdded");
+		this.addListener(option, "beforeGroupAdded");
+		this.addListener(option, "groupHeaderBinding");
+		this.addListener(option, "nonGroupBinding");
+		this.addListener(option, "groupFooterBinding");
+		if (this.hasListener("groupFooterBinding")) {
+			this._footerRows = 1;
+		}
+
+		if (option.colorTag != null) {
+			this._colorTag = option.colorTag;
+		}
+
+		if (option.groupColors != null && typeof option.groupColors === "object") {
+			this._groupColors = option.groupColors;
+		}
+
+		if (option.predefinedColors != null && typeof option.predefinedColors === "object") {
+			this._predefinedColors = option.predefinedColors;
+		}
+	}
+
+	this._rowPainter = new RowPainter({
+		clickableCell: this._clickableCell,
+		headerSpanning: this._headerSpanning,
+		footerSpanning: this._footerSpanning,
+		onCellClicked: this._onCellClicked
+	});
+
+	if (this._fixedDisplayColumn < 0) {
+		let checkboxColumnIndex = this._findCheckboxColumnIndexFromConfig(options.columns);
+		if (checkboxColumnIndex >= 0) { // has checkbox column
+			/** 27/04/21
+			 * NOTE:: checkbox column could be
+			 * 1. insert from the left side of _displayColumn
+			 * 2. insert from the right side of _displayColumn
+			 * 3. place at specific column (no column inserted)
+			 * But row grouping can't distinguish of this 3 posibilities.
+			 * But for now, (2) is not implement yet
+			 * and method (3) is not public to user yet
+			 * so we will assume that only (1) is occur at the moment and we will only support (1)
+			 */
+
+			// if checkbox column is insert to the left then we will +1 rowGroping display column
+			if (checkboxColumnIndex <= this._displayColumn) {
+				this._displayColumn++;
+			}
+		}
+	}
+};
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+RowGroupingPlugin.prototype.getConfigObject = function (gridOptions) {
+	let obj = gridOptions || {};
+
+	let extOptions = obj.rowGrouping;
+	if(!extOptions) {
+		extOptions = obj.rowGrouping = {};
+	}
+	if(this._autoGroupRemoval) {
+		extOptions.autoGroupRemoval = this._autoGroupRemoval;
+	}
+	if(this._autoGroupHiding) {
+		extOptions.autoGroupHiding = this._autoGroupHiding;
+	}
+	if(this._predefinedGroups) {
+		extOptions.predefinedGroups = this._predefinedGroups;
+	}
+	let criterion = this._criteria.filter(isNonFunction);
+	if(criterion.length) {
+		extOptions.groupBy = criterion;
+	}
+	if(this._displayColumn > 0) {
+		extOptions.displayColumn = this._displayColumn;
+	}
+	if(this._fixedDisplayColumn >= 0) {
+		extOptions.fixedDisplayColumn = true;
+	}
+	if (this._noCollapsible) {
+		extOptions.noCollapsible = this._noCollapsible;
+	}
+	extOptions.clickableCell = this._clickableCell;
+	if(this._hiddenArrow) {
+		if(this._hiddenArrow === true) {
+			extOptions.hiddenArrow = true;
+		} else {
+			let hiddenArrows = extOptions.hiddenArrow = [];
+			for(let key in this._hiddenArrow) {
+				hiddenArrows.push(+key);
+			}
+		}
+	}
+	if(this._contentAsHeader) {
+		extOptions.contentAsHeader = this._contentAsHeader;
+	}
+	if(!this._headerSpanning) {
+		extOptions.headerSpanning = this._headerSpanning;
+	}
+	if(this._footerSpanning) {
+		extOptions.footerSpanning = this._footerSpanning;
+	}
+	if(this._autoGroupSorting) {
+		extOptions.autoGroupSorting = this._autoGroupSorting;
+	}
+	if(this._indentSizes) {
+		extOptions.indentSize = this._indentSizes;
+	}
+	if(this._colorTag != null) {
+		extOptions.colorTag = this._colorTag;
+	}
+	if(this._groupColors != null) {
+		extOptions.groupColors = this._groupColors;
+	}
+	if(this._predefinedColors != null) {
+		extOptions.predefinedColors = this._predefinedColors;
+	}
+
+	let defaultCollapse = this.getDefaultCollapse();
+	if(defaultCollapse != null) {
+		extOptions.defaultCollapse = defaultCollapse;
+	}
+
+	return obj;
+};
+
+/** Function for ColumnMenuExtension to collect config of column menu
+* @public
+* @param {number} colIndex Column index
+* @param {Object} config Column Menu configuration
+* @return {!Object}
+*/
+RowGroupingPlugin.prototype.getColumnMenu = function (colIndex, config) {
+	if (!config) {
+		config = {};
+	}
+
+	let menus = config.menus;
+	if (!menus) {
+		menus = config.menus = [];
+	}
+
+	let menu = menus[0];
+	if (!menu) {
+		menu = menus[0] = {
+			menuItems: []
+		};
+	}
+
+	// Menu items for this extension
+	let field = this._getField(colIndex);
+	let isGrouping = this.hasGroupingCriteria();
+	let extMenuItems = [{
+		indexScore: 200,
+		label: "Group",
+		group: "FREQUENTLY_USED",
+		subMenu: {
+			menuItems: [{
+				indexScore: 220,
+				label: "Expand All",
+				group: "FREQUENTLY_USED",
+				click: this._onItemExpandAllClicked,
+				disabled: !isGrouping
+			}, {
+				indexScore: 210,
+				label: "Collapse All",
+				group: "FREQUENTLY_USED",
+				click: this._onItemCollapseAllClicked,
+				disabled: !isGrouping
+			}]
+		}
+	}];
+
+	if (!this._hasInGroupCriteria(field)) {
+		extMenuItems[0].subMenu.menuItems.push({
+			indexScore: 230,
+			label: "Group by This Column",
+			group: "FREQUENTLY_USED",
+			value: { colIndex: colIndex },
+			click: this._onItemGroupColumnClicked
+		});
+	} else {
+		extMenuItems[0].subMenu.menuItems.push({
+			indexScore: 230,
+			label: "Un-Group by This Column",
+			group: "FREQUENTLY_USED",
+			value: { colIndex: colIndex },
+			click: this._onItemUnGroupColumnClicked
+		});
+	}
+
+	// Push menu items to config
+	Array.prototype.push.apply(menu.menuItems, extMenuItems);
+
+	return config;
+};
+
+/** @private
+* @param {Object} predefinedColors Predefined color object map
+*/
+RowGroupingPlugin.prototype._injectStyles = function(predefinedColors) {
+	let prefix = ".tr-grid." + RowGroupingPlugin._controlClass + " .tr-lg .cell";
+	let css = [];
+	let value;
+	for (let className in predefinedColors) {
+		css.push(prefix + "." + className + "::before");
+		value = predefinedColors[className]["backgroundColor"];
+		if (value) {
+			css.push(["background-color: " + value + ";"]);
+		}
+	}
+
+	let host = this._hosts[0];
+
+	if (this._styleTag) {
+		if (this._styleTag.parentNode) {
+			this._styleTag.parentNode.removeChild(this._styleTag);
+		}
+		this._styleTag = null;
+	}
+	this._styleTag = injectCss(prettifyCss(css), host.getElement());
+};
+
+/** @private
+* @param {Object} e
+*/
+RowGroupingPlugin.prototype._onItemGroupColumnClicked = function (e) {
+	let field = this._getField(e.currentTarget.value.colIndex);
+	this._addGroup(field);
+	this._hideColumnMenu();
+};
+
+/** @private
+* @param {Object} e
+*/
+RowGroupingPlugin.prototype._onItemUnGroupColumnClicked = function (e) {
+	let field = this._getField(e.currentTarget.value.colIndex);
+	this._ungroup(field);
+	this._hideColumnMenu();
+};
+
+/** @private
+* @param {Object} e
+*/
+RowGroupingPlugin.prototype._onItemExpandAllClicked = function (e) {
+	this.expandAll();
+	this._hideColumnMenu();
+};
+
+/** @private
+* @param {Object} e
+*/
+RowGroupingPlugin.prototype._onItemCollapseAllClicked = function (e) {
+	this.collapseAll();
+	this._hideColumnMenu();
+};
+
+/** @private
+*/
+RowGroupingPlugin.prototype._hideColumnMenu = function () {
+	let host = this._hosts[0];
+	let columnMenuExt = host.getPlugin('ColumnMenuPlugin');
+	if (columnMenuExt) columnMenuExt.hide();
+};
+
+/** @private
+* @param {string} field
+*/
+RowGroupingPlugin.prototype._addGroup = function (field) {
+	let criteria = this.getGroupingCriteria();
+	let index = criteria.indexOf(field);
+	if (index < 0) {
+		criteria.push(field);
+	}
+	this._dirty = true;
+	this._applyGrouping();
+};
+
+/** @private
+* @param {string} field
+*/
+RowGroupingPlugin.prototype._ungroup = function (field) {
+	let criteria = this.getGroupingCriteria();
+	let index = criteria.indexOf(field);
+	if (index >= 0) {
+		criteria.splice(index, 1);
+	}
+	this._dirty = true;
+	this._applyGrouping();
+};
+
+/** @public
+* @return {!Array.<string>}
+*/
+RowGroupingPlugin.prototype.getGroupingCriteria = function () {
+	return this._criteria;
+};
+/** @public
+* @return {boolean}
+*/
+RowGroupingPlugin.prototype.hasGroupingCriteria = function () {
+	return this._criteria.length > 0;
+};
+
+/** Check specific field is in group criteria
+* @private
+* @param {string} field
+* @return {boolean}
+*/
+RowGroupingPlugin.prototype._hasInGroupCriteria = function (field) {
+	return this._criteria.indexOf(field) >= 0;
+};
+
+/** Each duplicate values in the given columns will be grouped together. Number of generated groups will equal to number of unique values in the given columns.
+* @public
+* @param {RowGroupingPlugin~GroupCriteria} criteria <br>
+* Null input will clear all existing grouping criteria. <br>
+* String input is treat as column name in data table <br>
+* Array input will create mutilple groups in tree like manner (nested group criteria) <br>
+* Any previous given values will be cleared out after calling this method
+*/
+RowGroupingPlugin.prototype.setGroupingCriteria = function (criteria) {
+	if (this._criteria.length > 0) {
+		this._dirty = true;
+		this._criteria.length = 0;
+	}
+	if ((typeof criteria === "string") || (typeof criteria === "function")) {
+		this._dirty = true;
+		this._criteria.push(/** @type{string|Function} */(criteria));
+	} else if (Array.isArray(criteria)) {
+		this._dirty = true;
+		this._criteria = /** @type{!Array.<string>} */(criteria.concat());
+	}
+
+	this._applyGrouping();
+};
+/** Alias for {@link RowGroupingPlugin#setGroupingCriteria}
+* @public
+* @function
+* @param {RowGroupingPlugin~GroupCriteria} criteria
+* @see {@link RowGroupingPlugin#setGroupingCriteria}
+*/
+RowGroupingPlugin.prototype.groupBy = RowGroupingPlugin.prototype.setGroupingCriteria;
+
+/** @private */
+RowGroupingPlugin.prototype._applyGrouping = function () {
+	if (!this._dirty || !this._criteriaGetter) {
+		return;
+	}
+
+	let dv = this.getDataView();
+	if (!dv) {
+		return;
+	}
+	if(typeof dv.enableContentAsHeader === "function") {
+		dv.enableContentAsHeader(this._contentAsHeader);
+	}
+	if (this._criteria.length) {
+		dv.listen("groupCriteriaChanged", this._onGroupCriteriaChanged);
+		dv.listen("groupAdded", this._onGroupAdded);
+		dv.listen("beforeGroupAdded", this._onBeforeGroupAdded);
+
+		if (this._autoGroupRemoval && dv.enableAutoGroupRemoval) {
+			dv.enableAutoGroupRemoval();
+		}
+		if (this._autoGroupHiding && dv.enableAutoGroupHiding) {
+			dv.enableAutoGroupHiding();
+		}
+		if (this._predefinedGroups) {
+			dv.setPredefinedGroups(this._predefinedGroups);
+		}
+
+		this._criteriaFuncs = this._criteria.map(this._onMapCriteria);
+		dv.groupBy(this._criteriaFuncs);
+		this.sortGroups();
+	} else {
+		this._clearSectionStyles(this._headerColumn);
+		dv.groupBy(null);
+	}
+
+	this._dirty = false;
+};
+/** @public
+* @return {Object} DataView instance
+*/
+RowGroupingPlugin.prototype.getDataView = function () {
+	let host = this._hosts[0];
+	if (host) {
+		return host.getDataSource();
+	}
+	return null;
+};
+
+/** @public
+* @param {RowGroupingPlugin~GroupSortLogic} sortFunction Comparer function for comparing the order of 2 groups. The function should take at least 2 parameters. <br>
+* The function should return -1 if the first parameter should comes first, 1 for the other way, and 0 if they are equal. <br>
+* The two first parameters passed to the function are group value that separates group. <br>
+* The two last parameters passed to the function are data views of corresponding group.
+* @example
+* let compare = function(grpA, grpB, dataViewA, dataViewB) {
+*   return (grpA <= grpB) ? -1 : 1;
+* }
+* let dstp = new RowGroupingExtension();
+* dstp.setGroupSortingLogic(compare);
+*/
+RowGroupingPlugin.prototype.setGroupSortingLogic = function (sortFunction) {
+	this._groupSortFunction = sortFunction;
+};
+
+/** Get the current group sort function. If none specified by setGroupSortingLogic() return <br>
+* standard string sort function.
+* @public
+* @return {Function}
+*/
+RowGroupingPlugin.prototype.getGroupSortingLogic = function () {
+	if (this._groupSortFunction) {
+		return this._groupSortFunction;
+	} else {
+		return RowGroupingPlugin._standardGroupSortFunction; // WARNING: To external method
+	}
+};
+
+/** Specify empty group in case of grouping values are known prior to requesting data
+* @public
+* @param {Array|Array.<Array>} predefinedGroups <br>
+* Values in the given array should be matched the value coming from a data table, or else no content is added to the group <br>
+* Use null value to clear all predefined groups. <br>
+* Use 2D array to specify nested groups. <br>
+* Any previous given values will be cleared out after calling this method
+*/
+RowGroupingPlugin.prototype.setPredefinedGroups = function (predefinedGroups) {
+	if (predefinedGroups && !Array.isArray(predefinedGroups)) {
+		return;
+	}
+	this._predefinedGroups = predefinedGroups;
+
+	let dv = this.getDataView();
+	if (dv) {
+		dv.setPredefinedGroups(this._predefinedGroups);
+	}
+};
+
+/** @public
+* @param {Object} predefinedColors Predefined color object map
+*/
+RowGroupingPlugin.prototype.setPredefinedColors = function(predefinedColors) {
+	if(predefinedColors != null && typeof predefinedColors === "object") {
+		this._predefinedColors = predefinedColors;
+		this._injectStyles(predefinedColors);
+	}
+};
+
+/** @public
+* @param {boolean} collapse Predefined color object map
+*/
+RowGroupingPlugin.prototype.setDefaultCollapse = function(collapse) {
+	let dv = this.getDataView();
+	if (dv) {
+		dv.setDefaultCollapse(collapse);
+	}
+};
+
+/** @public
+* @param {string} groupRef
+* @param {string} groupColor color name from predefinedColors
+*/
+RowGroupingPlugin.prototype.setGroupColor = function(groupRef, groupColor) {
+	let dv = this.getDataView();
+	if(!dv) {
+		return;
+	}
+	let grp = dv.getGroup(groupRef);
+	if(grp) {
+		grp.setGroupColor(groupColor);
+		let host = this._hosts[0];
+		if(host) {
+			host.requestRowRefresh();
+		}
+	}
+};
+
+/** @public
+* @return {boolean}
+*/
+RowGroupingPlugin.prototype.getDefaultCollapse = function() {
+	let dv = this.getDataView();
+	if (dv) {
+		return dv.getDefaultCollapse();
+	}
+	return false; // if dv did't load, the value will be false by default
+};
+
+/** Trigger group sorting logic -- re-sort the existing groups. This will not continuously apply to each data update.
+* @public
+*/
+RowGroupingPlugin.prototype.sortGroups = function () {
+	this._sortingTimer = 0;
+	if (this._groupSortFunction) {
+		let dv = this.getDataView();
+		if (dv) {
+			dv.sortGroups(this._groupSortFunction);
+		}
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+RowGroupingPlugin.prototype._onPostSectionDataBinding = function (e) {
+	if (!this._disabled) {
+
+		this._updateHeader(
+			e.sectionSettings,
+			e.fromRowIndex,
+			e.toRowIndex - 1
+		);
+	}
+};
+
+/** @private
+* @param {*} valA
+* @param {*} valB
+* @return {number}
+*/
+RowGroupingPlugin._standardGroupSortFunction = function (valA, valB) {
+	let strA = "" + valA;
+	let strB = "" + valB;
+	if (strA < strB) {
+		return -1;
+	}
+	if (strA > strB) {
+		return 1;
+	}
+	return 0;
+};
+
+/** @private
+* @param {Object=} dv DataView
+* @return {boolean}
+*/
+RowGroupingPlugin.prototype._isArrowHidden = function(dv) {
+	if (this._hiddenArrow && dv) { // Object or boolean
+		if (this._hiddenArrow === true) {
+			return true;
+		} else { // Object map
+			let lvl = dv.getGroupLevel();
+			if (this._hiddenArrow[lvl]) {
+				return true;
+			}
+		}
+	}
+	return false;
+};
+
+/** @private
+* @param {Object} settings SectionSettings
+* @return {boolean}
+*/
+RowGroupingPlugin.prototype._hasGroupHeader = function (settings) {
+	if (settings && settings.getType() === "content") {
+		let dv = settings.getDataSource();
+		if (dv) {
+			return dv.hasGroup();
+		}
+	}
+	return false;
+};
+
+/** @private
+* @param {number} colIndex
+*/
+RowGroupingPlugin.prototype._clearSectionStyles = function (colIndex) {
+	let host = this._hosts[0];
+	if (!host || !(colIndex >= 0)) {
+		return;
+	}
+	// TODO: Optimize by checking isHeaderColumn flag
+
+	let sections = host.getAllSections("content");
+	let rowPainter = this._rowPainter;
+	for (let i = sections.length; --i >= 0;) {
+		let section = sections[i];
+
+		let fi = section.getFirstIndexInView();
+		let li = section.getLastIndexInView();
+		for (let r = fi; r <= li; r++) {
+			rowPainter.removeAllStyles(section, colIndex, r);
+		}
+	}
+};
+
+/** retrive headerColumn index
+* @private
+* @return {number} headerColumn index, return -1 = not found
+*/
+RowGroupingPlugin.prototype._getHeaderColumnIndex = function () {
+	let colCount = this.getColumnCount();
+	for (let columnIndex = 0; columnIndex < colCount; columnIndex++) {
+		if (this._getColumnOption(columnIndex, "isHeaderColumn")) {
+			return columnIndex;
+		}
+	}
+	return -1;
+};
+
+/** @private
+* @param {Object} e
+*/
+RowGroupingPlugin.prototype._onGroupCriteriaChanged = function (e) {
+	let dv = e.sender;
+
+	if (dv.hasGroup()) {
+		if (this._fixedDisplayColumn < 0  // no fixed index
+			|| this._displayColumn < 0 || this._displayColumn >= this.getColumnCount() // _displayColumn not in range of column
+			|| this._getHeaderColumnIndex() < 0 // and not found headerColumn
+		) {
+			// reset _displayColumn = 0 and updatDisplayColumn
+			// this._displayColumn = 0;
+			this._shouldUpdateDisplayColumn = true;
+			this._updateDisplayColumn();
+		}
+	} else {
+		// if not have group then we will clear display column
+		this._shouldUpdateDisplayColumn = true;
+		this._updateDisplayColumn();
+	}
+};
+/** @private
+* @param {Object} e
+*/
+RowGroupingPlugin.prototype._onGroupAdded = function (e) {
+	if (this._footerRows) {
+		e.newGroup.addFooter(this._footerRows);
+	}
+	let newGroup = e.newGroup;
+	// WARNING: contentAsHeader mode is overwrite arrow hidden to boolean
+	if(!this._contentAsHeader && newGroup.disableCollapsing) {
+		if(this._isArrowHidden(newGroup)) {
+			newGroup.disableCollapsing();
+		}
+	}
+
+	let groupColors = this._groupColors;
+	let groupColor;
+	if(groupColors) { // Backward compatibility
+		let groupId = newGroup.getGroupId();
+		groupColor = groupColors[groupId];
+		if(groupColor) {
+			newGroup.setGroupColor(groupColor);
+		}
+	}
+
+	this._dispatch("groupAdded", e);
+	if (this._autoGroupSorting) {
+		if (!this._sortingTimer) {
+			this._sortingTimer = setTimeout(this.sortGroups, 100);
+		}
+	}
+};
+/** @private
+* @param {Object} e
+*/
+RowGroupingPlugin.prototype._onBeforeGroupAdded = function (e) {
+	if (this._contentAsHeader) {
+		if (e.dataView.getGroupLevel() >= this._criteria.length - 1) {
+			e.hideHeaderRow = true;
+		}
+	}
+	this._dispatch("beforeGroupAdded", e);
+};
+
+/** @private
+* @return {number}
+*/
+RowGroupingPlugin.prototype._updateDisplayColumn = function () {
+	if (this._shouldUpdateDisplayColumn) {
+		this._shouldUpdateDisplayColumn = false;
+
+		let host = this._hosts[0];
+		let c, colCount = host.getColumnCount();
+		this._headerColumn = this._getHeaderColumnIndex();
+
+		if (this._displayColumn < 0) {
+			if (this._headerColumn < 0) { // if header column not found we will use column field instead
+				for (c = 0; c < colCount; ++c) {
+					if (this._headerColumnField === this._getField(c)) {
+						this._displayColumn = c;
+						break;
+					}
+				}
+			} else {
+				this._displayColumn = this._headerColumn;
+			}
+		}
+
+		let tgtHeaderColumn = -1;
+		if (this._displayColumn >= 0) {
+			for (c = this._displayColumn; c < colCount; ++c) {
+				if (host.isColumnVisible(c)) {
+					if (!this._getColumnOption(c, "isCheckboxColumn")) {
+						tgtHeaderColumn = c;
+						break;
+					}
+				}
+			}
+		}
+
+		if (this._headerColumn !== tgtHeaderColumn) {
+			let colData;
+			this._clearSectionStyles(this._headerColumn);
+			if (this._headerColumn >= 0) {
+				colData = this._getColumnData(this._headerColumn);
+				if (colData) {
+					colData.isHeaderColumn = false;
+				}
+			}
+
+			if (tgtHeaderColumn >= 0) {
+				colData = this._newColumnData(tgtHeaderColumn);
+				colData.isHeaderColumn = true;
+				this._headerColumnField = this._getField(tgtHeaderColumn);
+			}
+			this._headerColumn = tgtHeaderColumn;
+		}
+	}
+
+	return this._headerColumn;
+};
+
+/** TODO: Need to support when column reordered
+* @private
+* @param {Object} settings SectionSettings
+* @param {number=} firstRowIndex
+* @param {number=} lastRowIndex INCLUSIVE
+*/
+RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, lastRowIndex) {
+	if (!this._hasGroupHeader(settings)) {
+		return;
+	}
+
+	let headerColumn = this._updateDisplayColumn();
+	if (headerColumn < 0) {
+		return;
+	} else if (!this._getColumnOption(headerColumn, "isHeaderColumn")) {
+		return; // Workaround: Newly inserted column doesn't have the flag
+	}
+
+	let dataSource = settings.getDataSource();
+	let section = settings.getSection();
+	let fi = (firstRowIndex != null) ? firstRowIndex : section.getFirstIndexInView();
+	let li = (lastRowIndex != null) ? lastRowIndex : section.getLastIndexInView();
+	let rowsForContentHeader = this._getRowsForContentAsHeader();
+
+	let maxColWidth = -1; // -1 means no limit
+	let colCell = section.getCell(headerColumn, 0, false);
+	if (!this._headerSpanning && colCell) {
+		maxColWidth = colCell.getWidth() - 27; // Ensure padding will subtract icon width (25px for halo, 27px for solar)
+	}
+
+	let colCount = section.getColumnCount();
+	let nonGroupListener = this.hasListener("nonGroupBinding");
+	let curGroupLevel = dataSource.getGroupLevel(fi);
+	let arg = {
+		section: section,
+		colCount: colCount
+	};
+	let currentGroup;
+	let needCal = this._autoGroupHiding || this._contentAsHeader;
+
+	for (let c = 0; c < colCount; c++) {
+		if(this._getColumnOption(c, "isCheckboxColumn")) {
+			arg.checkboxColumnIndex = c;
+			break;
+		}
+	}
+
+	let rowPainter = this._rowPainter;
+	for (let r = fi; r <= li; r++) {
+		let indentOffset = 0;
+		let rowId = dataSource.getRowId(r); // Slow
+		let cell = section.getCell(headerColumn, r, false); // Work only one row
+		if (!cell) { // There may be no header to be updated
+			continue;
+		}
+
+		arg.cell = cell;
+		arg.rowIndex = r;
+		arg.colIndex = headerColumn;
+		arg.rowId = rowId;
+		arg.rowData = this._rowGetter(dataSource.getRowData(rowId));
+		arg.noIndent = false;
+
+		let contentHeaderGroup = rowsForContentHeader[rowId];
+		let groupView = dataSource.getGroupByRowId(rowId);
+		let footerRow = false;
+		if (groupView) { // Header Render
+			currentGroup = groupView;
+			curGroupLevel = groupView.getGroupLevel();
+
+			arg.footerIndex = groupView.getFooterRowIndex(rowId);
+			footerRow = arg.footerRow = (arg.footerIndex >= 0);
+			arg.groupId = groupView.getGroupId();
+			arg.dataSource = groupView;
+			arg.collapsed = groupView.isCollapsed();
+
+			arg.hiddenArrow = (footerRow || this._isArrowHidden(groupView)) ? true : false;
+		} else { // Content Render
+			if(needCal) {
+				currentGroup = dataSource.getGroup(rowId); // Slow
+				curGroupLevel = currentGroup.getGroupLevel();
+			} else if(!currentGroup) {
+				currentGroup = dataSource.getGroup(rowId); // Slow
+			}
+
+			if (contentHeaderGroup || nonGroupListener) {
+				arg.dataSource = dataSource;
+				arg.footerIndex = null;
+				arg.groupId = null;
+
+				if (contentHeaderGroup) {
+					arg.collapsed = contentHeaderGroup.isCollapsed();
+				}
+
+				if (nonGroupListener) {
+					arg.rowData = this._rowGetter(dataSource.getRowData(rowId));
+				}
+			}
+			if (contentHeaderGroup) { // In contentHeader mode indent in contentHeader will same the parent header when group level 2
+				indentOffset = -2;
+			} else {
+				// In contentHeader mode with 1 level the content indent more than contentHeader 1
+				if(this._contentAsHeader && this._criteria.length > 1) {
+					indentOffset = -1;
+				}
+			}
+		}
+
+		arg.groupLevel = curGroupLevel;
+
+		let rowLevel = 0;
+		let nonGroupRow = this._autoGroupHiding && currentGroup.getGroupValue() == null && curGroupLevel === 1 && !this._contentAsHeader;
+		arg.nonGroupRow = nonGroupRow;
+
+		if (arg.noIndent || nonGroupRow) { // if user specific indent level, and if group hidden
+			rowLevel = 0;
+		} else if (groupView) { // group header
+			rowLevel = curGroupLevel - 1;
+		} else { // content
+			rowLevel = curGroupLevel + indentOffset; // content have indent more than header 1
+		}
+
+		let indentSize = 0;
+		if(this._indentSizes) {
+			indentSize = this._indentSizes[0];
+			if(rowLevel > 0) {
+				let indentLimit = this._indentSizes.length;
+				indentSize = rowLevel < indentLimit ? this._indentSizes[rowLevel] : this._indentSizes[indentLimit - 1];
+			}
+		} else if(rowLevel > 0) {
+			indentSize = 8 + rowLevel * 4; // 8 is default cell padding
+			if(!groupView) {
+				indentSize += this._arrowSize;
+			}
+		}
+		if (maxColWidth > -1 && maxColWidth < indentSize) {
+			indentSize = maxColWidth;
+		}
+
+		let groupColor;
+		if(currentGroup.getGroupColor) {
+			groupColor = currentGroup.getGroupColor();
+		} else { // Backward compatibility
+			if (this._groupColors) {
+				// TODO: Need better method to find the first level parent's group id
+				let rootGroup = currentGroup ? currentGroup : dataSource.getGroup(rowId); // Slow
+				if (curGroupLevel > 1) {
+					for (let i = curGroupLevel; i > 1; i--) {
+						rootGroup = rootGroup.getDataSource();
+					}
+				}
+				let groupId = rootGroup.getGroupId();
+				groupColor = this._groupColors[groupId];
+			}
+		}
+		arg.colorTagClass = groupColor;
+		arg.indentSize = indentSize;
+		if (groupView) {
+			rowPainter.applyHeaderStyle(arg);
+			this._dispatch(footerRow ? "groupFooterBinding" : "groupHeaderBinding", arg);
+		} else {
+			rowPainter.removeHeaderStyle(section, headerColumn, r);
+			if (contentHeaderGroup) {
+				rowPainter.applyContentAsHeaderStyle(arg);
+			}
+			rowPainter.applyRowStyle(arg);
+			this._dispatch("nonGroupBinding", arg);
+		}
+	}
+	if(!this._updateCursorTimer) {
+		this._updateCursorTimer = setTimeout(this._updateCursor, 100);
+	}
+};
+
+/** @private
+* @return {Object}
+*/
+RowGroupingPlugin.prototype._getRowsForContentAsHeader = function () {
+	if (!this._contentAsHeader) return {};
+
+	let result = {};
+	let dv = this.getDataView();
+	let allGroups = dv.getAllGroups();
+	for (let grpId in allGroups) {
+		let grp = allGroups[grpId];
+		if (!grp.hasGroup()) { // Deepest level group
+			let firstRowId = grp.getAllRowIds(true)[0]; // Prepare first row in group for contentAsHeader mode to use.
+			if (firstRowId) {
+				result[firstRowId] = grp;
+			}
+		}
+	}
+	return result;
+};
+
+/** @private
+* @param {Object} e
+*/
+RowGroupingPlugin.prototype._onColumnIndexChanged = function (e) {
+	if (this._fixedDisplayColumn >= 0) {
+		this._displayColumn = this._fixedDisplayColumn;
+		this.updateHeaders(); // Instant updating
+	} else {
+		if (this._headerColumn >= 0) {
+			this._displayColumn = -1; // Index will move along current display
+		}
+		if (!this._timerId) {
+			this._timerId = setTimeout(this.updateHeaders, 50);
+		}
+	}
+};
+
+/** @public */
+RowGroupingPlugin.prototype.updateHeaders = function () {
+	this._timerId = 0;
+	this._shouldUpdateDisplayColumn = true;
+	let host = this._hosts[0];
+	if (!host || this._disabled) {
+		return;
+	}
+
+	let settingList = host.getAllSectionSettings("content");
+	for (let i = settingList.length; --i >= 0;) {
+		this._updateHeader(settingList[i]);
+	}
+};
+
+/** @private
+* @param {string} rowId
+* @param {boolean=} opt_collapsed=true
+*/
+RowGroupingPlugin.prototype._collapseDataRowId = function (rowId, opt_collapsed) {
+	let dv = this.getDataView();
+	if (dv) {
+		let rowsForContentHeader = this._getRowsForContentAsHeader();
+		let grp = rowsForContentHeader[rowId];
+		if (grp) {
+			grp.collapse(opt_collapsed);
+		}
+	}
+};
+
+/** @private
+* @param {MouseEvent} e
+*/
+RowGroupingPlugin.prototype._onCellClicked = function (e) {
+	if (this._clickDisabled) { return; }
+
+	let changed = false;
+	let host = this._hosts[0];
+	let info = host.getRelativePosition(e);
+	let cellElem = info.cell ? info.cell.getElement() : null;
+	if(!cellElem) {
+		return;
+	}
+
+	let collapsed = cellElem.classList.contains("closed");
+	let rowIndex = info.rowIndex;
+	let settings = info.sectionSettings;
+
+	let dv = settings.getDataSource();
+	let rowId = dv.getRowId(rowIndex);
+	let grpView = dv.getGroupByRowId(rowId);
+	if (grpView) {
+		changed = true;
+		if(grpView.isCollapsible && !grpView.isCollapsible()) { // Prevent applied styles
+			return;
+		}
+		grpView.collapse(!collapsed);
+	} else if (this._contentAsHeader) {
+		changed = true;
+		this._collapseDataRowId(rowId, !collapsed);
+	}
+	if (changed) {
+		if (collapsed) {
+			cellElem.classList.remove("closed");
+		} else {
+			cellElem.classList.add("closed");
+		}
+	}
+
+	info.expanded = collapsed; // After toggled
+	info.group = grpView;
+	this._dispatch("clicked", info);
+};
+
+/** @private */
+RowGroupingPlugin.prototype._updateCursor = function () {
+	let host = this._hosts[0]; // TODO: Make this work for multi-table
+	if (host) {
+		let disableExpander = false;
+		let disableFolder = false;
+		if (!this._clickableCell) {
+			disableFolder = true;
+		}
+		if (this._clickDisabled) {
+			disableExpander = true;
+			disableFolder = true;
+		}
+		if (disableExpander) {
+			host.addClass("expander-disabled");
+		} else {
+			host.removeClass("expander-disabled");
+		}
+		if (disableFolder) {
+			host.addClass("folder-disabled");
+		} else {
+			host.removeClass("folder-disabled");
+		}
+	}
+	this._updateCursorTimer = 0;
+};
+
+/** @private
+* @param {string|Function} field
+* @return {Function} Row data
+*/
+RowGroupingPlugin.prototype._onMapCriteria = function (field) {
+	if (typeof field === "string") {
+		return this._criteriaGetter.bind(null, field);
+	}
+	return field;
+};
+
+/** @public
+* @param {boolean=} opt_expanded
+*/
+RowGroupingPlugin.prototype.expandAll = function (opt_expanded) {
+	this.collapseAll(opt_expanded === false);
+};
+
+/** @public
+* @param {boolean=} opt_collapsed
+*/
+RowGroupingPlugin.prototype.collapseAll = function (opt_collapsed) {
+	let dv = this.getDataView();
+	if (dv) {
+		dv.collapseAllGroups(opt_collapsed);
+	}
+};
+
+/** @public
+* @param {string} groupRowId
+* @param {boolean=} opt_expanded
+*/
+RowGroupingPlugin.prototype.expand = function (groupRowId, opt_expanded) {
+	this.collapse(groupRowId, opt_expanded === false);
+};
+/** @public
+* @param {string} groupRowId
+* @param {boolean=} opt_collapsed
+*/
+RowGroupingPlugin.prototype.collapse = function (groupRowId, opt_collapsed) {
+	let dv = this.getDataView();
+	if (dv) {
+		let grp = dv.getGroup(groupRowId);
+		if (grp) {
+			grp.collapse(opt_collapsed);
+		}
+	}
+};
+
+/** @public
+* @param {boolean=} opt_disabled
+*/
+RowGroupingPlugin.prototype.disableClicking = function (opt_disabled) {
+	this._clickDisabled = opt_disabled !== false;
+	this._updateCursor();
+};
+
+/** Returns an array of states (collapsed or expanded)
+* @public
+* @returns {Array.<RowGroupingPlugin~GroupingState>}
+*/
+RowGroupingPlugin.prototype.getGroupingStates = function () {
+	let dv = this.getDataView();
+
+	return dv.getAllGroups().map(function (group) {
+		return {
+			groupId: group.getGroupId(),
+			collapsed: group.isCollapsed()
+		};
+	});
+};
+
+/** Set state for groups
+* @public
+* @param {Array.<RowGroupingPlugin~GroupingState>|string} states Array state of groupings or JSON String
+*/
+RowGroupingPlugin.prototype.setGroupingStates = function (states) {
+	if (typeof states === 'string') {
+		states = JSON.parse(states);
+	}
+
+	for (let i = 0; i < states.length; i++) {
+		let state = states[i];
+		let groupRowId = state.groupId == null ? i : state.groupId;
+		this.collapse(groupRowId, state.collapsed);
+	}
+};
+
+/** Fixed display column to stay at the same position even though the column has been moved, or shifted by removing and inserting column
+* @public
+* @param {boolean=} opt_enabled
+*/
+RowGroupingPlugin.prototype.enableFixedDisplayColumn = function (opt_enabled) {
+	this._fixedDisplayColumn = (opt_enabled !== false) ? this._displayColumn : -1;
+};
+
+/** @public
+* @param {(boolean|number)=} opt_num
+*/
+RowGroupingPlugin.prototype.enableFooterRow = function (opt_num) {
+	if(opt_num == null || opt_num === true) {
+		opt_num = 1;
+	} else if(opt_num <= 0) { // Including false and null
+		opt_num = 0;
+	}
+
+	this._footerRows = /** @type{number} */(opt_num);
+};
+
+/** @public
+* @return {number}
+*/
+RowGroupingPlugin.prototype.getFooterRowCount = function () {
+	return this._footerRows;
+};
+
+/** @function
+* @param {Object} obj
+* @return {boolean}
+*/
+function isNonFunction(obj) {
+	return obj ? (typeof obj !== "function") : false;
+}
+
+
+
+export default RowGroupingPlugin;
+export { RowGroupingPlugin, RowGroupingPlugin as RowGrouping, RowGroupingPlugin as RowGroupingExtension };