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

package/lib/row-segmenting/es6/RowSegmenting.js

@@ -0,0 +1,1182 @@
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import { GridPlugin, rowDefRowGetter } 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";
+import { Conflator } from "../../tr-grid-util/es6/Conflator.js";
+
+/** @typedef {Object} RowSegmentingPlugin~Options
+* @description The options can be specified by `rowSegmenting` property of the main grid's options
+* @property {boolean=} spanning=true If disabled, segment separator rows will not be spanned/stretched across multiple cells
+* @property {boolean=} colorTag If not specified, the color tag will be disabled when using extension without halo theme.
+* @property {string=} cssField="TAG_CSS_CLASS" Apply CSS class based on the given field
+* @property {Object=} predefinedColors Predefined color object map for color tag
+* @property {Function=} clicked=null Event handler when user clicks on arrows or cells
+* @property {Function=} headerMenuClicked=null Event handler when user clicks on menu icon. The menu icon will be displayed if spanning option is true.
+* @property {Function=} segmentSeparatorBinding=null Logic that will be executed on each segment separator row
+* @property {Function=} nonSegmentSeparatorBinding=null Logic that will be executed for all non segment separator row
+* @property {Function=} sortingLogic=null Logic to be used by sortSegments method
+* @property {string=} rowSpanningField="ROW_SPANNING" Field to be used for spanning segment header rows based on the field values
+* @property {string=} segmentIdField="" Field used for initializing segments based on text id
+* @property {string=} collapsingField="" Field used for indicating that the corresponding segment row is collapsed
+* @property {string=} parentIdField="" Field used for specifying parent segment of the row
+* @property {boolean=} defaultCollapsing=false If enabled, any newly created segment will be collapsed by default
+* @property {(string|number)=} displayColumn=null Render tags in the given column. It can be either the column index, column ID, or field
+*/
+
+/** @callback RowSegmentingPlugin~SortingLogic
+* @description Comparer function for comparing the order of 2 segment separator rows. The function takes 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.
+* @param {Object} rowDataA Row data of the segment separator row
+* @param {Object} rowDataB Row data of the segment separator row
+* @return {number}
+*/
+
+/** @typedef {Object} RowSegmentingPlugin~SegmentDefinition
+* @description An object that can be passed to setSegmentSeparator method
+* @property {Array.<string>=} children=null Array of child row ids
+* @property {boolean=} collapsed Initial expanding/colapssing state of the segment
+*/
+
+/** @constructor
+* @param {RowSegmentingPlugin~Options=} options
+* @extends {GridPlugin}
+*/
+let RowSegmentingPlugin = function (options) {
+	let t = this;
+	t._onPreSectionDataBinding = t._onPreSectionDataBinding.bind(t);
+	t._updateHeader = t._updateHeader.bind(t);
+	t._onArrowClick = t._onArrowClick.bind(t);
+	t._onColumnIndexChanged = t._onColumnIndexChanged.bind(t);
+	t._rtSortingLogic = t._rtSortingLogic.bind(t);
+	t.requestSeparatorRefresh = t.requestSeparatorRefresh.bind(t);
+	t._separatorRefreshConflator = new Conflator(10, t.requestSeparatorRefresh);
+	t._columnIndexChangedConflator = new Conflator(10, t._onColumnIndexChanged);
+
+	t._hosts = [];
+	this.config({ rowSegmenting: options });
+};
+Ext.inherits(RowSegmentingPlugin, GridPlugin);
+
+/** @type {RowSegmentingPlugin~SortingLogic}
+* @private
+*/
+RowSegmentingPlugin.prototype._userSortingLogic = null;
+/** @type {boolean}
+* @private
+*/
+RowSegmentingPlugin.prototype._spanning = true;
+/** @type {boolean}
+* @private
+*/
+RowSegmentingPlugin.prototype._prevSegmentBySegmentId = false;
+/** @type {Array.<number>}
+* @private
+*/
+RowSegmentingPlugin.prototype._indentSizes = null;
+/** @type {number}
+* @private
+*/
+RowSegmentingPlugin.prototype._arrowSize = 9;
+/** @type {number|string}
+* @private
+*/
+RowSegmentingPlugin.prototype._displayColumn = null;
+/** @type {Object}
+* @private
+*/
+RowSegmentingPlugin.prototype._rowPainter = null;
+/** @type {boolean|null}
+* @private
+*/
+RowSegmentingPlugin.prototype._colorTag = null;
+/** @type {string}
+* @private
+*/
+RowSegmentingPlugin.prototype._cssField = "TAG_CSS_CLASS";
+/** @type {string}
+* @private
+*/
+RowSegmentingPlugin.prototype._rowSpanningField = "ROW_SPANNING";
+/** @type {string}
+* @private
+*/
+RowSegmentingPlugin.prototype._segmentIdField = "";
+/** @type {string}
+* @private
+*/
+RowSegmentingPlugin.prototype._collapsingField = "";
+/** @type {string}
+* @private
+*/
+RowSegmentingPlugin.prototype._parentIdField = "";
+/** @type {number}
+* @private
+*/
+RowSegmentingPlugin.prototype._runningId = 0;
+/** @type {Conflator}
+* @private
+*/
+RowSegmentingPlugin.prototype._separatorRefreshConflator = null;
+/** @type {Object}
+* @private
+*/
+RowSegmentingPlugin.prototype._styleTag = null;
+/** @type {Object}
+* @private
+*/
+RowSegmentingPlugin.prototype._predefinedColors = null;
+/** @type {string}
+* @private
+*/
+RowSegmentingPlugin._controlClass = "predefined-color-tag";
+/** @type {Object}
+* @private
+*/
+RowSegmentingPlugin.prototype._collapsingMap = null;
+/** @type {boolean}
+* @private
+*/
+RowSegmentingPlugin.prototype._defaultCollapsing = false;
+
+/** @public
+* @return {string}
+*/
+RowSegmentingPlugin.prototype.getName = function () {
+	return "RowSegmentingPlugin"; // Read Only
+};
+
+/** @public
+* @ignore
+* @param {Element} elem
+* @param {Object} config
+*/
+RowSegmentingPlugin.prototype.beforeInit = function(elem, config) {
+	if (ElfUtil.isHaloTheme()) {
+		this._arrowSize = 18;
+	}
+};
+
+/** @public
+* @param {Object} host core grid instance
+* @param {Object=} options
+*/
+RowSegmentingPlugin.prototype.initialize = function (host, options) {
+	if (this._hosts.indexOf(host) >= 0) {
+		return;
+	}
+
+	ExpanderIcon.loadExpanderStyles();
+
+	this._hosts.push(host);
+	host.listen("columnMoved", this._onColumnIndexChanged);
+	host.listen("columnRemoved", this._onColumnIndexChanged);
+	host.listen("columnAdded", this._onColumnIndexChanged);
+	host.listen("preSectionDataBinding", this._onPreSectionDataBinding);
+
+	this.config(options);
+	let dv = host.getDataSource();
+	if(dv && dv.setSegmentDefaultCollapsing) {
+		dv.setSegmentDefaultCollapsing(this._defaultCollapsing);
+	}
+
+	let enabled = this._colorTag != null ? this._colorTag : ElfUtil.isHaloTheme();
+	RowPainter.disableColorTag(host, enabled === false);
+
+	if (this._predefinedColors != null) {
+		this._injectStyles(this._predefinedColors);
+		host.enableClass(RowSegmentingPlugin._controlClass);
+	}
+
+	RowPainter.applyGroupingStyles(host);
+	host.addClass("folder-disabled"); // Mouse cursor will be pointer when hovering at header rows
+
+	enabled = this._headerMenuClicked;
+	RowPainter.enableHeaderMenu(host, enabled ? true : false);
+};
+
+/** Request for updating the segment separators based on values from segment Id field in row data
+ * @public
+*/
+RowSegmentingPlugin.prototype.requestSeparatorRefresh = function () {
+	if(!this._segmentIdField) {
+		return;
+	}
+	if(this._separatorRefreshConflator.conflate()) {
+		return;
+	}
+
+	let dv = this._getDataView();
+	if (!dv) { return; }
+
+	let collapsingMap = {};
+	if (this._collapsingMap) {
+		collapsingMap = this._collapsingMap;
+		this._collapsingMap = null;
+	}
+
+	let rowId, rowData, segmentId;
+	let dt = dv.getDataSource();
+	let segmentRowIds = this.getSegmentIds() || [];
+	let segmentCount = segmentRowIds.length;
+	if (segmentCount){
+		for(let s = 0; s < segmentCount; s++) {
+			rowId = segmentRowIds[s];
+			rowData = this._rowGetter(dt.getRowData(rowId));
+			segmentId = rowData[this._segmentIdField];
+			if (segmentId) {
+				if (collapsingMap[segmentId] == null) {
+					collapsingMap[segmentId] = this.isSegmentCollapsed(rowId);
+				}
+			}
+		}
+	}
+
+	if (this._prevSegmentBySegmentId) { // Check only the segmentation set by the segment ID field and exclude the segment separator set by the runtime API using the setSegmentSeparator method
+		this._prevSegmentBySegmentId = false;
+		this.unsetAllSegmentSeparators();
+		// Note: if there are chains, their segmenting will be lost here and they cannot be restored
+		// because their children has no segment-id.
+	}
+
+	let rowIds = dt.getAllRowIds();
+	let rowCount = rowIds.length;
+	let segmentMap = {};
+	let segmentArr = [];
+	let separatorArr = [];
+	let collapsingAry = [];
+	let expandingAry = [];
+	let parentId = "";
+	for(let i = 0; i < rowCount; i++) {
+		rowId = rowIds[i];
+		rowData = this._rowGetter(dt.getRowData(rowId));
+		segmentId = rowData[this._segmentIdField];
+		parentId = rowData[this._parentIdField];
+		if(segmentId == null && parentId == null) {
+			continue;
+		}
+		this._prevSegmentBySegmentId = true;
+
+		let segmentInfo = segmentMap[segmentId];
+		let parentInfo = parentId !== segmentId ? segmentMap[parentId] : null; // WARNING: parent must exist beforehand
+		if(segmentInfo) {
+			if(parentInfo) {
+				segmentInfo = parentInfo;
+				parentInfo = null;
+			}
+			segmentInfo.rowIds.push(rowId);
+		} else if(segmentId) {
+			segmentInfo = segmentMap[segmentId] = {
+				rowIds: [],
+				segmentId: rowId
+			};
+			segmentArr.push(segmentInfo);
+			separatorArr.push(rowId);
+
+			let collapsed = (this._collapsingField) ? rowData[this._collapsingField] : collapsingMap[segmentId];
+			if(collapsed != null) {
+				if(collapsed) {
+					collapsingAry.push(rowId);
+				} else {
+					expandingAry.push(rowId);
+				}
+			}
+		}
+
+		if(parentInfo) {
+			parentInfo.rowIds.push(rowId);
+		}
+	}
+	if(segmentArr.length) {
+		this.setSegmentSeparators(separatorArr); // TODO: This method can be merged into setSegmentChildren
+		this.setSegmentChildren(segmentArr);
+	}
+
+	if(collapsingAry.length) {
+		this.collapseSegments(collapsingAry, true);
+	}
+	if(expandingAry.length) {
+		this.collapseSegments(expandingAry, false);
+	}
+};
+/** @public
+* @param {Object=} host core grid instance
+*/
+RowSegmentingPlugin.prototype.unload = function (host) {
+	let at = this._hosts.indexOf(host);
+	if (at < 0) {
+		return;
+	}
+	host.unlisten("columnMoved", this._onColumnIndexChanged);
+	host.unlisten("columnRemoved", this._onColumnIndexChanged);
+	host.unlisten("columnAdded", this._onColumnIndexChanged);
+	host.unlisten("preSectionDataBinding", this._onPreSectionDataBinding);
+	this._hosts.splice(at, 1);
+	if(this._hosts.length <= 0) {
+		this._separatorRefreshConflator.reset();
+		this._columnIndexChangedConflator.reset();
+	}
+	this._dispose();
+};
+
+/** @public
+* @param {Object=} options Grid configuration object
+*/
+RowSegmentingPlugin.prototype.config = function (options) {
+	if (!options) { return; }
+
+	let option = options.rowSegmenting;
+	if (!option) { return; }
+
+	if (typeof option.sortingLogic === "function") {
+		this._userSortingLogic = option.sortingLogic;
+	}
+	if (typeof option.headerMenuClicked === "function") {
+		this._headerMenuClicked = option.headerMenuClicked;
+	}
+	if (option.spanning != null) {
+		this._spanning = option.spanning ? true : false;
+	}
+	if (option.colorTag != null) {
+		this._colorTag = option.colorTag;
+	}
+	if (option.cssField != null) {
+		this._cssField = option.cssField;
+	}
+	if (option.rowSpanningField != null) {
+		this._rowSpanningField = option.rowSpanningField;
+	}
+	if (option.segmentIdField != null) {
+		this._segmentIdField = option.segmentIdField;
+	}
+	if (option.collapsingField != null) {
+		this._collapsingField = option.collapsingField;
+	}
+	if (option.parentIdField != null) {
+		this._parentIdField = option.parentIdField;
+	}
+	if (option.predefinedColors != null && typeof option.predefinedColors === "object") {
+		this._predefinedColors = option.predefinedColors;
+	}
+	if(option.displayColumn != null) {
+		this._displayColumn = option.displayColumn;
+	}
+	if(option.defaultCollapse != null) {
+		this._defaultCollapsing = option.defaultCollapse;
+	}
+	if(option.defaultCollapsing != null) {
+		this._defaultCollapsing = option.defaultCollapsing;
+	}
+
+	this._rowPainter = new RowPainter({
+		clickableCell: false,
+		headerSpanning: this._spanning,
+		footerSpanning: false,
+		onCellClicked: this._onArrowClick,
+		headerMenuClicked: this._headerMenuClicked,
+		segmentMode: true
+	});
+
+	this.addListener(option, "clicked");
+	this.addListener(option, "segmentSeparatorBinding");
+	this.addListener(option, "nonSegmentSeparatorBinding");
+
+	// Collect collapsing states from configuration
+	let collapsingMap = {};
+	let dirty = false;
+	let rows = this._segmentIdField ? options.rows : null; // If there is no segment Id, collapsing states cannot be mapped to the inexistence segments
+	let len = rows ? rows.length : 0;
+	for (let i = 0; i < len; i++) {
+		let row = rows[i];
+		if (row && typeof row === "object") {
+			let segmentId = row.values ? row.values[this._segmentIdField] : null;
+			if (segmentId && collapsingMap[segmentId] == null) {
+				if (row["collapsed"] != null) {
+					dirty = true;
+					collapsingMap[segmentId] = row["collapsed"] ? true : false;
+				}
+			}
+		}
+	}
+
+	if (dirty) {
+		this._collapsingMap = collapsingMap;
+	}
+
+	this.requestSeparatorRefresh();
+};
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+RowSegmentingPlugin.prototype.getConfigObject = function (gridOptions) {
+	let obj = gridOptions || {};
+
+	let extOptions = obj.rowSegmenting;
+	if(!extOptions) {
+		extOptions = obj.rowSegmenting = {};
+	}
+	if(!this._spanning) {
+		extOptions.spanning = false;
+	}
+	if(this._colorTag != null) {
+		extOptions.colorTag = this._colorTag;
+	}
+	if(this._cssField !== "TAG_CSS_CLASS") {
+		extOptions.cssField = this._cssField;
+	}
+	if(this._predefinedColors != null) {
+		extOptions.predefinedColors = this._predefinedColors;
+	}
+	if(this._rowSpanningField != "ROW_SPANNING") {
+		extOptions.rowSpanningField = this._rowSpanningField;
+	}
+	if(this._segmentIdField) {
+		extOptions.segmentIdField = this._segmentIdField;
+	}
+	if(this._collapsingField) {
+		extOptions.collapsingField = this._collapsingField;
+	}
+	if(this._parentIdField) {
+		extOptions.parentIdField = this._parentIdField;
+	}
+	if(this._defaultCollapsing) {
+		extOptions.defaultCollapsing = true;
+	}
+
+	if(this._displayColumn != null) {
+		// WANRING: display column use colId and colIndex for internal, but give field and colIndex for user
+		let curDisIndex = this._resolveDisplayColumn();
+		if(curDisIndex < 0 ) {
+			extOptions.displayColumn = this._displayColumn; // column id
+		} else {
+			let curDisFied = this.getColumnField(curDisIndex);
+			let fields = this.getColumnFields();
+			let currentIndex = fields.indexOf(curDisFied);
+			if(currentIndex === fields.lastIndexOf(curDisFied)) {
+				extOptions.displayColumn = curDisFied; // column field
+			} else { // duplicate col use col index
+				extOptions.displayColumn = curDisIndex; // column index
+			}
+		}
+	}
+
+	// restore runningId for spanningIdField
+	this._runningId = 0;
+
+	return obj;
+};
+
+/** @private
+* @function
+* @param {!Object} obj
+* @param {string} field
+* @param {*} val
+*/
+let _setObjectValue = function(obj, field, val) {
+	if(field) {
+		if(!obj.values) {
+			obj.values = {};
+		}
+		obj.values[field] = val;
+	}
+};
+/** @private
+* @function
+* @param {!Object} obj
+* @param {string} field
+*/
+let _deleteObjectValue = function(obj, field) {
+	if(field && obj.values) {
+		if(obj.values[field]) {
+			delete obj.values[field]; // Slow
+		}
+	}
+};
+/** @public
+* @param {Object} rowData row config object
+* @param {string} rowId
+* @return {!Object} return row config object with update special field data
+*/
+RowSegmentingPlugin.prototype.getRowConfigObject = function (rowData, rowId) {
+	let obj = rowData || {};
+	let segmentIdField = this._segmentIdField;
+	if(!segmentIdField) {
+		return obj;
+	}
+
+	_deleteObjectValue(obj, segmentIdField);
+	_deleteObjectValue(obj, this._parentIdField);
+
+	let dv = this._getDataView();
+	let segment = dv.getSegment(rowId);
+	if(segment) {
+		_setObjectValue(obj, segmentIdField, ++this._runningId);
+		segment.runningId = this._runningId; // WANRING: Add
+
+		let collapsed = segment.isCollapsed();
+		_setObjectValue(obj, this._collapsingField, collapsed);
+
+		if(obj["collapsed"] == null) { // Avoid overriding value from real-time grid
+			obj["collapsed"] = collapsed;
+		}
+	}
+
+	let parentSegment = dv.getSegmentParent(rowId);
+	if(parentSegment) {
+		if(this._parentIdField) {
+			// WARNING: this assumes the parent segment is always appeared before this row id
+			_setObjectValue(obj, this._parentIdField, parentSegment.runningId || this._runningId);
+		} else if(!segment) {
+			_setObjectValue(obj, segmentIdField, this._runningId);
+		}
+	}
+
+	return obj;
+};
+
+/** @private
+* @param {Object} predefinedColors Predefined color object map
+*/
+RowSegmentingPlugin.prototype._injectStyles = function(predefinedColors) {
+	let prefix = ".tr-grid." + RowSegmentingPlugin._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
+*/
+RowSegmentingPlugin.prototype._onPreSectionDataBinding = function (e) {
+	this._updateHeader(
+		e.sectionSettings,
+		e.fromRowIndex,
+		e.toRowIndex - 1
+	);
+};
+
+/**
+ * @private
+*/
+RowSegmentingPlugin.prototype._onColumnIndexChanged = function () {
+	if(this._columnIndexChangedConflator.conflate()) {
+		return;
+	}
+	if(this._spanning) {
+		this._clearSectionHeaderStyle();
+	}
+	// columnAdded event will fire binding, so it will be double render header
+	this.updateHeaders(); // need to force update header when column index is changed
+};
+
+/** @private
+*/
+RowSegmentingPlugin.prototype._clearSectionHeaderStyle = function () {
+	let host = this._hosts[0];
+	if (!host) {
+		return;
+	}
+	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++) {
+			// Currently, removeHeaderStyle removes all stretched cells, no need to use column index. In this case, we're specifying column index 0
+			rowPainter.removeHeaderStyle(section, 0, r);
+		}
+	}
+};
+
+/** @public */
+RowSegmentingPlugin.prototype.updateHeaders = function () {
+	let host = this._hosts[0];
+	if (!host) {
+		return;
+	}
+	let settingList = host.getAllSectionSettings("content");
+	for (let i = settingList.length; --i >= 0;) {
+		this._updateHeader(settingList[i]);
+	}
+};
+
+/** @private
+* @param {Object} settings SectionSettings
+* @return {boolean}
+*/
+RowSegmentingPlugin.prototype._hasSegmentation = function (settings) {
+	if (settings && settings.getType() === "content") {
+		let dv = settings.getDataSource();
+		if (dv) {
+			if(dv.hasSegmentation()) {
+				dv._previouslyHasSegmentation = true; // Allow one more cycle to clean up styling
+				return true;
+			} else if(dv._previouslyHasSegmentation) {
+				dv._previouslyHasSegmentation = false;
+				return true;
+			}
+		}
+	}
+	return false;
+};
+
+/** @public
+* @param {string|number} rowRef Row Id or row index
+* @return {string} parent row id of this segmentation. If the parent row id for this segmentation cannot be found, return ""
+*/
+RowSegmentingPlugin.prototype.getSegmentParentRowId = function (rowRef) {
+	let dv = this._getDataView();
+	if(dv) {
+		// WARNING: getRowId is slow
+		let rowId = (typeof rowRef === "number") ? dv.getRowId(rowRef) : rowRef;
+		return dv.getSegmentParentRowId(rowId);
+	}
+	return "";
+};
+
+/** @private
+* @description Resolve display column from column id to column index
+* @return {number} return column index of display column
+*/
+RowSegmentingPlugin.prototype._resolveDisplayColumn = function () {
+	if(this._displayColumn == null) {
+		return 0;
+	}
+	if(this.getColumnCount() === 0) {
+		return -1;
+	}
+	if(typeof this._displayColumn === "number") {
+		let colId = this.getColumnId(this._displayColumn);
+		if(colId) {
+			this._displayColumn = colId;
+		}
+	}
+	let colIndex = this.getColumnIndex(this._displayColumn);
+	if(colIndex < 0) {
+		colIndex = 0;
+		this._displayColumn = this.getColumnId(colIndex);
+	}
+
+	return colIndex;
+};
+
+/** @private
+* @param {Object} settings SectionSettings
+* @param {number=} firstRowIndex
+* @param {number=} lastRowIndex INCLUSIVE
+*/
+RowSegmentingPlugin.prototype._updateHeader = function (settings, firstRowIndex, lastRowIndex) {
+	if (!this._hasSegmentation(settings) || !this._rowPainter) {
+		return;
+	}
+
+	let headerColumn = this._resolveDisplayColumn();
+	if(headerColumn < 0) {
+		return;
+	}
+	let dv = settings.getDataSource();
+	let dt = dv.getDataSource();
+	let section = settings.getSection();
+	let fi = (firstRowIndex != null) ? firstRowIndex : section.getFirstIndexInView();
+	let li = (lastRowIndex != null) ? lastRowIndex : section.getLastIndexInView();
+
+	let arg = {};
+	arg.section = section;
+	arg.colIndex = headerColumn;
+
+	let colCount = section.getColumnCount();
+	for (let c = 0; c < colCount; c++) {
+		if(this._getColumnOption(c, "isCheckboxColumn")) {
+			arg.checkboxColumnIndex = c;
+			break;
+		}
+	}
+	let cssField = this._cssField;
+	let rowPainter = this._rowPainter;
+	let parentRows = {};
+	for (let r = fi; r <= li; r++) {
+		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.rowData = this._getRow(dv, r); // Support composite and rt-grid
+		arg.spanning = null;
+		arg.content = null;
+		let rowId = arg.rowId = dv.getRowId(r); // Slow
+		// TODO: Getting segment once for better performance
+		let segmentSeparator = arg.segmentSeparator = dv.isSegmentSeparator(rowId);
+		arg.collapsedSegment = arg.collapsed = segmentSeparator ? dv.isSegmentCollapsed(rowId) : false;
+
+		if (segmentSeparator) {
+			arg.groupLevel = dv.getSegmentLevel ? dv.getSegmentLevel(rowId) : 1;
+			arg.indentSize = this._getIndentSize(arg.groupLevel - 1, true); // Group level starts from 1
+			if(dv.getSegment) {
+				let segment = dv.getSegment(rowId);
+				if(segment && arg.groupLevel > 1) { // Sub segment always has name
+					arg.content = segment.getSubSegmentName();
+				}
+			}
+
+			let spanning = arg.rowData[this._rowSpanningField];
+			if(spanning != null) {
+				arg.spanning = !!spanning;
+			}
+
+			if (this._predefinedColors) {
+				arg.colorTagClass = arg.rowData[cssField];
+			}
+			rowPainter.applyHeaderStyle(arg);
+			this._dispatch("segmentSeparatorBinding", arg);
+		} else {
+			arg.groupLevel = 0;
+			let indentLevel = 0;
+			let parentId = dv.getSegmentParentRowId(rowId);
+			if(parentId) {
+				let parentSegment = dv.getSegment(parentId);
+				indentLevel = parentSegment ? parentSegment.getSegmentLevel() + 1 : 1;
+				arg.nonGroupRow = false;
+				let parentRowData = parentRows[parentId];
+				if (!parentRowData) {
+					parentRowData = parentRows[parentId] = this._rowGetter(dt.getRowData(parentId)); // We need to use Datable because parent row may be hidden
+				}
+				arg.colorTagClass = parentRowData[cssField];
+			} else {
+				arg.colorTagClass = null;
+				arg.nonGroupRow = true;
+			}
+			arg.indentSize = this._getIndentSize(indentLevel, false);
+			rowPainter.removeHeaderStyle(arg.section, arg.colIndex, r);
+			rowPainter.applyRowStyle(arg);
+			this._dispatch("nonSegmentSeparatorBinding", arg);
+		}
+	}
+};
+
+/** @private
+* @param {number} indentLevel
+* @param {boolean} groupRow
+* @return {number}
+*/
+RowSegmentingPlugin.prototype._getIndentSize = function (indentLevel, groupRow) {
+	let indentSize = 0;
+	if(this._indentSizes) {
+		indentSize = this._indentSizes[0];
+		if(indentLevel > 0) {
+			let indentLimit = this._indentSizes.length;
+			indentSize = indentLevel < indentLimit ? this._indentSizes[indentLevel] : this._indentSizes[indentLimit - 1];
+		}
+	} else if(indentLevel > 0) {
+		indentSize = 8 + indentLevel * 4; // 8 is default cell padding
+		if(!groupRow) {
+			indentSize += this._arrowSize;
+		}
+	}
+	return indentSize;
+};
+/** @private
+* @param {MouseEvent} e
+*/
+RowSegmentingPlugin.prototype._onArrowClick = function (e) {
+	let host = this._hosts[0];
+	let info = host.getRelativePosition(e);
+	let cellElem = info.cell ? info.cell.getElement() : null;
+	if(!cellElem) {
+		return;
+	}
+
+	let rowIndex = info.rowIndex;
+	let collapsedSegment = this.isSegmentCollapsed(rowIndex); // current state
+	collapsedSegment = !collapsedSegment; // Toggle state
+
+	if (collapsedSegment) {
+		cellElem.classList.add("closed");
+		this.collapseSegment(rowIndex);
+	} else {
+		cellElem.classList.remove("closed");
+		this.expandSegment(rowIndex);
+	}
+	info.collapsedSegment = collapsedSegment;
+	this._dispatch("clicked", info);
+};
+
+/** @private
+* @return {Object} DataView instance
+*/
+RowSegmentingPlugin.prototype._getDataView = function () {
+	let host = this._hosts[0];
+	return host ? host.getDataSource() : null;
+};
+
+/** Set specified row ids as a segment separator
+* @public
+* @param {Array<string>} rowIds
+* @param {boolean=} enabled
+* @return {boolean} Return true if there is any change
+*/
+RowSegmentingPlugin.prototype.setSegmentSeparators = function(rowIds, enabled) {
+	let dv = this._getDataView();
+	if(dv) {
+		return dv.setSegmentSeparators(rowIds, enabled);
+	}
+	return false;
+};
+
+/** Set specified row as a segment separator
+* @public
+* @param {string|number} rowRef Row id or row index
+* @param {*=} options The segment will be created and initialized according to the given option. If the value is false, the specified segment is removed.
+* @return {boolean} Return true if there is any change
+*/
+RowSegmentingPlugin.prototype.setSegmentSeparator = function(rowRef, options) {
+	let dv = this._getDataView();
+	if(dv) {
+		if(options) {
+			dv.setSegmentSeparator(rowRef, true);
+
+			if(Array.isArray(options.children)) {
+				dv.addSegmentChildren(rowRef, options.children);
+			}
+			if(options.collapsed != null) {
+				dv.collapseSegment(rowRef, options.collapsed);
+			}
+		} else {
+			return dv.setSegmentSeparator(rowRef, options == null);
+		}
+	}
+	return false;
+};
+/** Set classification for the specified segment
+* @public
+* @param {string|number} rowRef Row id or row index
+* @param {string|Array.<string>} fields
+* @return {boolean}
+*/
+RowSegmentingPlugin.prototype.setSegmentClassification = function(rowRef, fields) {
+	let dv = this._getDataView();
+	if(dv) {
+		return dv.setSegmentClassification(rowRef, fields);
+	}
+	return false;
+};
+/** Clear all segment separator rows
+* @public
+* @return {boolean} Return true if there is any change
+*/
+RowSegmentingPlugin.prototype.unsetAllSegmentSeparators = function() {
+	let dv = this._getDataView();
+	if(dv) {
+		return dv.unsetAllSegmentSeparators();
+	}
+	return false;
+};
+/** Check if there is at least one segment separator in the data view
+* @public
+* @return {boolean}
+*/
+RowSegmentingPlugin.prototype.hasSegmentation = function() {
+	let dv = this._getDataView();
+	if(dv) {
+		return dv.hasSegmentation();
+	}
+	return false;
+};
+/** Check if the specified row is a segment separator
+* @public
+* @param {string|number} rowRef Row id or row index (not recommended for usage)
+* @return {boolean}
+*/
+RowSegmentingPlugin.prototype.isSegmentSeparator = function(rowRef) {
+	let dv = this._getDataView();
+	if(dv) {
+		let rowId = "";
+		if(typeof rowRef === "number") {
+			rowId = dv.getRowId(rowRef); // WARNING: This is very slow
+		} else {
+			rowId = rowRef;
+		}
+
+		return dv.isSegmentSeparator(rowId);
+	}
+	return false;
+};
+
+/**
+* @public
+* @param {Array.<string >} rowIds
+* @param {Array.<string >} collapsed
+
+* @return {boolean} Return true if there is any change
+*/
+RowSegmentingPlugin.prototype.collapseSegments = function(rowIds, collapsed) {
+	let dv = this._getDataView();
+	if(dv) {
+		return dv.collapseSegments(rowIds, collapsed);
+	}
+	return false;
+};
+
+/** Hide all members in the segment
+* @public
+* @param {string|number} rowRef Row id or row index of the segment separator
+* @param {boolean=} collapsed
+* @return {boolean} Return true if there is any change
+*/
+RowSegmentingPlugin.prototype.collapseSegment = function(rowRef, collapsed) {
+	let dv = this._getDataView();
+	if(dv) {
+		return dv.collapseSegment(rowRef, collapsed);
+	}
+	return false;
+};
+/** @public
+* @param {string|number} rowRef Row id or row index
+* @param {boolean=} expanded
+* @return {boolean} Return true if there is any change
+*/
+RowSegmentingPlugin.prototype.expandSegment = function(rowRef, expanded) {
+	let dv = this._getDataView();
+	if(dv) {
+		return dv.expandSegment(rowRef, expanded);
+	}
+	return false;
+};
+/** @public
+* @return {boolean} Return true if there is any change
+*/
+RowSegmentingPlugin.prototype.expandAllSegments = function() {
+	let dv = this._getDataView();
+	if(dv) {
+		return dv.expandAllSegments();
+	}
+	return false;
+};
+/** @public
+* @param {string|number} rowRef Row id or row index
+* @return {boolean} Return true if only the given row is a collapsed segment separator
+*/
+RowSegmentingPlugin.prototype.isSegmentCollapsed = function(rowRef) {
+	let dv = this._getDataView();
+	if(dv) {
+		return dv.isSegmentCollapsed(rowRef);
+	}
+	return false;
+};
+/** @public
+* @param {Function} func By default, all row members are hidden in a collapsed segment
+*/
+RowSegmentingPlugin.prototype.setSegmentCollapsingLogic = function(func) {
+	let dv = this._getDataView();
+	if(dv) {
+		dv.setSegmentCollapsingLogic(func);
+	}
+};
+
+/** 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
+*/
+RowSegmentingPlugin.prototype.fillSegment = function(segmentRef) {
+	let dv = this._getDataView();
+	if(dv) {
+		dv.fillSegment(segmentRef);
+	}
+};
+/** Remove all existing segment children in each segment and fill the segments with all contnet rows before the next segment separator
+* @public
+*/
+RowSegmentingPlugin.prototype.fillSegments = function() {
+	let dv = this._getDataView();
+	if(dv) {
+		dv.fillSegments();
+	}
+};
+/** @public
+* @param {string|number} segmentRef Row id or row index
+* @param {string|number} rowRef Row id, row index
+*/
+RowSegmentingPlugin.prototype.addSegmentChild = function(segmentRef, rowRef) {
+	let dv = this._getDataView();
+	if(dv) {
+		let dataId;
+		if(this._realTimeGrid) {
+			let rowDef = this._realTimeGrid.getRowDefinition(rowRef);
+			if(rowDef) {
+				dataId = rowDef.getDataId();
+			}
+		}
+		dv.addSegmentChild(segmentRef, rowRef, dataId);
+	}
+};
+
+/** @public
+* @param {Array<Object>} segmentArr Segment array that contain "segmentId", "rowIds" to set segment children
+*/
+RowSegmentingPlugin.prototype.setSegmentChildren = function(segmentArr) {
+	let dv = this._getDataView();
+	if(dv) {
+		dv.setSegmentChildren(segmentArr);
+	}
+};
+
+/** @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.
+*/
+RowSegmentingPlugin.prototype.addSegmentChildren = function(segmentRef, rowRefs) {
+	let dv = this._getDataView();
+	if(dv) {
+		let dataIds;
+		if(this._realTimeGrid) {
+			rowRefs = Array.isArray(rowRefs) ? rowRefs : [rowRefs];
+			let len = rowRefs.length;
+			dataIds = new Array(len);
+			for(let i = 0; i < len; i++) {
+				let rowDef = this._realTimeGrid.getRowDefinition(rowRefs[i]);
+				if(rowDef) {
+					dataIds[i] = rowDef.getDataId();
+				}
+			}
+		}
+		dv.addSegmentChildren(segmentRef, rowRefs, dataIds);
+	}
+};
+/** @public
+* @param {string|number} segmentRef Row id or row index
+* @param {string|number} rowRef Row id, row index
+*/
+RowSegmentingPlugin.prototype.removeSegmentChild = function(segmentRef, rowRef) {
+	let dv = this._getDataView();
+	if(dv) {
+		dv.removeSegmentChild(segmentRef, rowRef);
+	}
+};
+/** @public
+* @param {string|number} segmentRef Row id or row index
+* @param {Array.<string|number>} rowRefs Array of row ids or row indices
+*/
+RowSegmentingPlugin.prototype.removeSegmentChildren = function(segmentRef, rowRefs) {
+	let dv = this._getDataView();
+	if(dv) {
+		dv.removeSegmentChildren(segmentRef, rowRefs);
+	}
+};
+/** @public
+*/
+RowSegmentingPlugin.prototype.removeAllSegmentChildren = function() {
+	let dv = this._getDataView();
+	if(dv) {
+		dv.removeAllSegmentChildren();
+	}
+};
+/** Get row ids of all segment separator
+* @public
+* @return {Array.<string>} Return null if there is no segment separator
+*/
+RowSegmentingPlugin.prototype.getSegmentIds = function() {
+	let dv = this._getDataView();
+	if(dv) {
+		return dv.getSegmentIds();
+	}
+	return null;
+};
+/** 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
+*/
+RowSegmentingPlugin.prototype.getSegmentChildIds = function(segmentRef) {
+	let dv = this._getDataView();
+	if(dv) {
+		return dv.getSegmentChildIds(segmentRef);
+	}
+	return null;
+};
+
+/** @public
+* @param {RowSegmentingPlugin~SortingLogic} sortFunction
+*/
+RowSegmentingPlugin.prototype.setSortingLogic = function (sortFunction) {
+	this._userSortingLogic = (typeof sortFunction === "function") ? sortFunction : null;
+};
+/** @public
+* @param {RowSegmentingPlugin~SortingLogic=} sortFunction
+*/
+RowSegmentingPlugin.prototype.sortSegments = function (sortFunction) {
+	if(sortFunction != null) {
+		this.setSortingLogic(sortFunction);
+	}
+	if (this._userSortingLogic) {
+		let dv = this._getDataView();
+		if (dv) {
+			let sortingLogic = this._realTimeGrid ? this._rtSortingLogic : this._userSortingLogic;
+			dv.sortSegments(sortingLogic);
+		}
+	}
+};
+/** @private
+* @param {Object} rowDataA
+* @param {Object} rowDataB
+* @return {number}
+*/
+RowSegmentingPlugin.prototype._rtSortingLogic = function (rowDataA, rowDataB) {
+	return this._userSortingLogic(
+		rowDefRowGetter(rowDataA),
+		rowDefRowGetter(rowDataB)
+	);
+};
+
+/** @public
+* @param {Object} predefinedColors Predefined color object map
+*/
+RowSegmentingPlugin.prototype.setPredefinedColors = function(predefinedColors) {
+	if(predefinedColors != null && typeof predefinedColors === "object") {
+		this._predefinedColors = predefinedColors;
+		this._injectStyles(predefinedColors);
+	}
+};
+
+/** @public
+* @param {number|string} rowRef rowIndex or rowId
+* @param {boolean|null} spanning if set true when rowRef is row separator, then span that row
+*/
+RowSegmentingPlugin.prototype.spanSegmentSeparator = function(rowRef, spanning) {
+	let dv = this._getDataView();
+	if(!dv) { return; }
+
+	if(typeof rowRef === "string") {
+		rowRef = dv.getRowIndex(rowRef);
+	}
+
+	if(rowRef == null || rowRef < 0) { return; }
+
+	this._setStaticData(dv, rowRef, this._rowSpanningField, spanning);
+
+};
+
+
+
+export default RowSegmentingPlugin;
+export { RowSegmentingPlugin, RowSegmentingPlugin as RowSegmenting, RowSegmentingPlugin as RowSegmentingExtension };