@refinitiv-ui/efx-grid 6.0.2 → 6.0.3

package/lib/rt-grid/es6/Grid.js

@@ -304,8 +304,11 @@ var Grid = function(placeholder, config) {
 		t._dv.listen("pageIndexChanged", t._dispatch.bind(t, "pageIndexChanged"));
 		t._dv.listen("pageCountChanged", t._dispatch.bind(t, "pageCountChanged")); // TODO: When implementing filtered row, it may need to implement the conflator
 	}
+	t._grid.setDataSource(t._dv); // Avoid triggering sorting
+
 	if(t._stp) {
 		this._sharedSorter = true;
+		t._stp.listen("preDataSorting", t._onPreDataSorting);
 		t._grid.loadPlugin(t._stp); // The plugin instance is shared and don't need to be reconfigured.
 	} else { // Create built-in plugin
 		t._stp = new SortableTitlePlugin({
@@ -332,7 +335,6 @@ var Grid = function(placeholder, config) {
 	t._grid.enableRowHighlighting(true);
 
 	t._addGridSections();
-	t._grid.setDataSource(t._dv);
 	t._grid.setParent(t._topNode);
 
 	t._snapshot = new SnapshotFiller();

package/lib/tr-grid-checkbox/es6/Checkbox.d.ts

@@ -12,7 +12,8 @@ declare namespace CheckboxPlugin {
         checkboxCreated?: ((...params: any[]) => any),
         checkboxBinding?: ((...params: any[]) => any),
         clicked?: ((...params: any[]) => any),
-        width?: number
+        width?: number,
+        topCheckboxHandler?: boolean
     };
 
     type ColumnOptions = {

package/lib/tr-grid-checkbox/es6/Checkbox.js

@@ -12,6 +12,7 @@ import {injectCss, prettifyCss, extendObject} from "../../tr-grid-util/es6/Util.
 * @property {Function=} checkboxBinding=null Function handler for checkboxBinding event
 * @property {Function=} clicked=null Function handler for checkbox clicked event
 * @property {number=} width=34 Width for checkbox column
+* @property {boolean=} topCheckboxHandler=true If disabled, when clicked on header row checkbox it will not perform default behavior
 */
 
 /** @typedef {Object} CheckboxPlugin~ColumnOptions
@@ -103,6 +104,10 @@ CheckboxPlugin.prototype._disablingField = "CHECK_BOX_DISABLED";
 * @private
 */
 CheckboxPlugin.prototype._autoRowSelection = false;
+/** @type {boolean}
+* @private
+*/
+CheckboxPlugin.prototype._topCheckboxHandler = true;
 /** @type {Function}
 * @private
 */
@@ -348,6 +353,10 @@ CheckboxPlugin.prototype.config = function (options) {
 	if(val) {
 		this._width = val;
 	}
+	val = chkboxOpt["topCheckboxHandler"];
+	if(val != null) {
+		this._topCheckboxHandler = val ? true : false;
+	}
 
 	this.addListener(chkboxOpt, "checkboxCreated");
 	this.addListener(chkboxOpt, "clicked");
@@ -695,7 +704,7 @@ CheckboxPlugin.prototype.setAllCheckStates = function (checked) {
 * @see {@link CheckboxPlugin#checkAll}
 */
 CheckboxPlugin.prototype.selectAllPages = function (checked) {
-	var state = CheckboxPlugin._toCheckState(checked != null ? checked : true);
+	var state = checked != null ? checked : true;
 	var host = this._hosts[0];
 	var dv = host ? host.getDataSource() : null;
 
@@ -982,6 +991,9 @@ CheckboxPlugin.prototype._getAllCheckboxes = function (sectionSettings, ary) {
 * @param {string} state
 */
 CheckboxPlugin.prototype._setDescendantCheckState = function (sectionSettings, state) {
+	if(!this._topCheckboxHandler){
+		return;
+	}
 	var children = sectionSettings.getChildren();
 	if (children) {
 		for (var i = 0; i < children.length; ++i) {

package/lib/tr-grid-conditional-coloring/es6/ConditionalColoring.js

@@ -704,10 +704,14 @@ ConditionalColoringPlugin.prototype.applyColor = function (colIndex, cell, rowDa
 * @param {Object} e
 */
 ConditionalColoringPlugin.prototype._onSectionBinding = function (e) {
+	var dataRows = /** @type{Array.<Object>} */(e["dataRows"]);
+	if(!dataRows) {
+		return; // dataRows could be empty in case of no column is presented
+	}
+
 	var c, r, cell, painter, changedCols, rowDef, rid, changedRow, changedRows;
 	var dataRow, insertedId, colData, blinking, bgBlinking, cachedValues, updatePrev;
 	var section = e["section"];
-	var dataRows = /** @type{Array.<Object>} */(e["dataRows"]);
 	var colCount = section.getColumnCount();
 	var fromR = /** @type{number} */(e["fromRowIndex"]);
 	var toR = /** @type{number} */(e["toRowIndex"]);

package/lib/tr-grid-in-cell-editing/es6/InCellEditing.d.ts

@@ -3,7 +3,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import { Dom } from "../../tr-grid-util/es6/Dom.js";
 import { Popup } from "../../tr-grid-util/es6/Popup.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
-import { isTouchDevice } from "../../tr-grid-util/es6/Util.js";
+import { isTouchDevice, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 import { ElfDate } from "../../tr-grid-util/es6/ElfDate.js";
 import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
 

package/lib/tr-grid-in-cell-editing/es6/InCellEditing.js

@@ -3,7 +3,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import { Dom } from "../../tr-grid-util/es6/Dom.js";
 import { Popup } from "../../tr-grid-util/es6/Popup.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
-import { isTouchDevice } from "../../tr-grid-util/es6/Util.js";
+import { isTouchDevice, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 import { ElfDate } from "../../tr-grid-util/es6/ElfDate.js";
 import { CoralItems } from "../../tr-grid-util/es6/CoralItems.js";
 /** @typedef {Object} InCellEditingPlugin~Options
@@ -337,6 +337,11 @@ InCellEditingPlugin.prototype._elfVersion = 0;
 */
 
 InCellEditingPlugin._primaryColor = "";
+/** @type {string}
+* @private
+*/
+
+InCellEditingPlugin._styles = prettifyCss([":host .cell.editing input[type=text]", ["border-style: solid;"]]);
 /** @private
 * @param {Object} colors
 */
@@ -532,6 +537,13 @@ InCellEditingPlugin.prototype.initialize = function (host, options) {
     InCellEditingPlugin._uiElementTypesMap["number"] = "ef-input";
   }
 
+  if (ElfUtil.isHaloTheme()) {
+    if (!host._inCellEditingStyles) {
+      host._inCellEditingStyles = true;
+      injectCss(InCellEditingPlugin._styles, host.getElement());
+    }
+  }
+
   this.config(options);
 
   if (!InCellEditingPlugin._primaryColor) {

package/lib/tr-grid-row-dragging/es6/RowDragging.d.ts

@@ -25,8 +25,6 @@ declare class RowDraggingPlugin extends GridPlugin {
 
     constructor(options?: RowDraggingPlugin.Options);
 
-    public beforeProcessOption(optionName: string, optionValue: any): any;
-
     public hasMultiTableSupport(): boolean;
 
     public getName(): string;
@@ -45,7 +43,7 @@ declare class RowDraggingPlugin extends GridPlugin {
 
     public cancelDrag(): void;
 
-    public getGuideline(): Element;
+    public getGuideline(): Element|null;
 
 }
 

package/lib/tr-grid-row-dragging/es6/RowDragging.js

@@ -44,6 +44,15 @@ import Dom from "../../tr-grid-util/es6/Dom.js";
 * @type {Object}
 */
 
+
+/** @private
+* @param {Object} pos
+* @return {boolean}
+*/
+var _isInContentSection = function (pos) {
+	return (pos && pos["sectionType"] === "content") ? true : false;
+};
+
 /** @constructor
 * @param {RowDraggingPlugin.Options=} options
 * @extends {GridPlugin}
@@ -58,7 +67,6 @@ var RowDraggingPlugin = function (options) {
 	t._onMouseDown = t._onMouseDown.bind(t);
 
 	t._onDragPulse = t._onDragPulse.bind(t);
-	t._onContentScrolled = t._onContentScrolled.bind(t);
 
 	t._onDragStart = t._onDragStart.bind(t);
 	t._onMouseMove = t._onMouseMove.bind(t);
@@ -181,6 +189,7 @@ RowDraggingPlugin.prototype._autoScroll = true;
 
 /** Prevent built-in config
 * @public
+* @ignore
 * @param {string} optionName
 * @param {*} optionValue
 * @return {*}
@@ -222,7 +231,7 @@ RowDraggingPlugin.prototype.initialize = function (host, options) {
 		host.setAttribute("draggable", "true");
 		host.listen("dragstart", this.startDrag);
 	}
-	// host.listen("mouseover", this._onContentScrolled);
+
 	host.listen("mousedown", this._onMouseDown);
 	host.listen("touchstart", this._onMouseDown);
 
@@ -245,7 +254,6 @@ RowDraggingPlugin.prototype.unload = function (host) {
 
 	// host.removeAttribute("draggable");
 	host.unlisten("dragstart", this.startDrag);
-	// host.unlisten("mouseover", this._onContentScrolled);
 	host.unlisten("mousedown", this._onMouseDown);
 	host.unlisten("touchstart", this._onMouseDown);
 
@@ -288,6 +296,12 @@ RowDraggingPlugin.prototype._onThemeLoaded = function(colors) {
 				"padding: 0 7px 0 7px;",
 				"box-shadow: 0 0 8px var(--grid-dragbox-bordercolor);"
 			],
+			".drag-box-disabled", [
+				"width: 100px;",
+				"left: 0;",
+				"top: 0;",
+				"position: absolute;"
+			],
 			".drag-box-icon", [
 				"top: -4px;",
 				"left: 12px;",
@@ -364,6 +378,8 @@ RowDraggingPlugin.prototype.config = function (options) {
 
 	if (typeof extOptions["dragBoxRenderer"] === "function") {
 		this._dragBoxRenderer = extOptions["dragBoxRenderer"];
+	} else {
+		this._dragBox.className = "drag-box-disabled"; // set disable drag-box
 	}
 
 	this._dragBoxEnabled = !!extOptions["dragBox"];
@@ -437,7 +453,7 @@ RowDraggingPlugin.prototype.startDrag = function (startRef) {
 		pos = this._hitTest(target);
 	}
 
-	if (pos && pos["sectionType"] === "content") {
+	if (_isInContentSection(pos)) {
 		this._clearCache();
 		this._pos = pos;
 		this._onDragStart(startRef);
@@ -559,8 +575,6 @@ RowDraggingPlugin.prototype._onDragStart = function (e) {
 		// then set cursor move will have an effect
 		grid.getElement().style.cursor = "grabbing";
 
-		// Initialize guideline
-		this._updateGuideParent(); // Insert guideline to the document
 		this._updateGuidePosition();
 
 		if (this._autoScroll) {
@@ -597,7 +611,6 @@ RowDraggingPlugin.prototype._onMouseMove = function (e) {
 
 	this._pos = this._hitTest(e); // A new object is created
 
-	this._updateGuideParent();
 	this._updateGuidePosition(e);
 	this._renderDragBox(e);
 
@@ -645,7 +658,7 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 		destPos["dropTarget"] = e ? e.target : null;
 
 		if (!this.disabled) {
-			if (this._dataTransfer && this._isInContentSection()) {
+			if (this._dataTransfer && _isInContentSection(this._pos)) {
 				var destGrid = destPos["grid"] || srcGrid;
 				var destRowIndex = destPos["rowIndex"];
 
@@ -674,11 +687,6 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 */
 RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGrid, destGrid, evtArg) {
 	var destDv = destGrid.getDataSource();
-	var destRowId = destDv.getRowId(destRowIndex);
-
-	if(!destRowId) {
-		return 0;
-	}
 
 	var srcRowIndices = null;
 	var srcDv = srcGrid.getDataSource();
@@ -695,10 +703,16 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 		return 0;
 	}
 
+
 	var movedRowIds = null;
-	if(srcGrid === destGrid) {
+	var destRowId = destDv.getRowId(destRowIndex);
+	if(srcGrid === destGrid) { // TODO: Support wrap mode
 		movedRowIds = srcDv.moveRow(srcRowIndices, destRowIndex) || [];
 	} else {
+		// TODO: Check if we support moving to last row for multi table
+		// if(!destRowId) {
+		// return 0;
+		// }
 		movedRowIds = [];
 		evtArg["destGrid"] = destGrid;
 
@@ -732,7 +746,7 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 	if(movedRowIds.length) {
 		evtArg["originRowId"] = movedRowIds[0];
 		evtArg["originRowIds"] = movedRowIds;
-		evtArg["destinationRowId"] = destRowId;
+		evtArg["destinationRowId"] = destRowId; // Return empty string for the last row
 
 		this._dispatch("dataMoved", evtArg);
 	}
@@ -741,47 +755,51 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 /** @private
 * @return {boolean}
 */
-RowDraggingPlugin.prototype._isInContentSection = function () {
-	return (this._pos["sectionType"] === "content");
-};
-/** @private
-* @return {boolean}
-*/
-RowDraggingPlugin.prototype._hasValidTarget = function () {
-	return (this._pos && this._pos["invalidTarget"]) ? false : true;
-};
-/** @private
-* @return {boolean}
-*/
 RowDraggingPlugin.prototype._isDragCancelled = function () {
 	return (this._pos && this._pos["cancel"]) ? true : false;
 };
 
-/** @private */
-RowDraggingPlugin.prototype._updateGuideParent = function () {
-	if (this._disabled) return;
-
-	if (this._isInContentSection()) {
-		var grid = this._pos["grid"] || null;
-		var pn = this._pos["section"].getColumnHost(); // This is to hide out of view guideline
-		if (pn !== this._guideline.parentNode) {
-			this._guideline.style.width = grid.getWidth() + "px";
-			pn.appendChild(this._guideline);
-		}
-	}
-};
-
 /** @private
-* @param {Event} e
+* @param {Event=} e
 */
 RowDraggingPlugin.prototype._updateGuidePosition = function (e) {
-	if (this._disabled) return;
+	var pos = this._pos;
+	if (this._disabled || !pos || pos["invalidTarget"]) {
+		return;
+	}
 
-	if (this._isInContentSection()) {
-		if (this._hasValidTarget()) {
-			var pos = Dom.getRelativePosition(this._pos["cellElement"], this._guideline.parentNode);
-			this._guideline.style.top = (pos["y"] - 1) + "px";
+	if (_isInContentSection(pos)) {
+		var guideline = this._guideline;
+		// var grid = pos["grid"];
+		var section = pos["section"];
+		var pn = section.getColumnHost(); // This is to hide out of view guideline
+		if (pn !== guideline.parentNode) {
+			guideline.style.width = section.getWidth() + "px";
+			pn.appendChild(guideline);
 		}
+
+		var cellElement = pos["cellElement"];
+		var relativePos = Dom.getRelativePosition(cellElement, pn);
+		var cellTop = relativePos["y"];
+		var rowIndex = pos["rowIndex"];
+		var offsetY = 0;
+
+		if(rowIndex) {
+			offsetY = -1; // Make guideline stay on top of the target cell
+			if(e) { // MouseEvent or TouchEvent
+				var lastRow = section.getRowCount() - 1;
+				if(rowIndex >= lastRow) { // bottommost row
+					var rowHeight = section.getRowHeight(lastRow);
+					relativePos = Dom.getRelativePosition(e, cellElement);
+					if(relativePos["y"] >= (rowHeight / 2) | 0) {
+						offsetY = rowHeight - 3; // TODO: Use actual guideline height for the offset
+						++pos["rowIndex"];
+					}
+				}
+			}
+		} // else { Topmost row
+
+		guideline.style.top = (cellTop + offsetY) + "px";
 	}
 };
 
@@ -864,19 +882,6 @@ RowDraggingPlugin.prototype._onDragPulse = function () {
 		primaryHost.scrollDown(scrollVal);
 	}
 };
-/** @private
-* @param {Event=} e
-*/
-RowDraggingPlugin.prototype._onContentScrolled = function (e) {
-	if (this._scrollingZone && this._dragging && this._pos["hit"]) {
-		var grid = this._pos["grid"];
-		if (grid.getElement() === e.currentTarget) {
-			this._pos = this._hitTest(e);
-			this._dispatch("drag", this._pos);
-			this._updateGuidePosition();
-		}
-	}
-};
 
 
 

package/lib/tr-grid-row-selection/es6/RowSelection.d.ts

@@ -1,7 +1,7 @@
-import { Ext } from '../../tr-grid-util/es6/Ext.js';
-import { EventDispatcher } from '../../tr-grid-util/es6/EventDispatcher.js';
-import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
-import { isMac as isMacFn } from '../../tr-grid-util/es6/Util.js';
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import { EventDispatcher } from "../../tr-grid-util/es6/EventDispatcher.js";
+import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import { isMac as isMacFn } from "../../tr-grid-util/es6/Util.js";
 import { isIE, prepareTSVContent } from "../../tr-grid-util/es6/Util.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
 import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
@@ -46,13 +46,13 @@ declare class RowSelectionPlugin extends GridPlugin {
 
     public getRowAnchor(sectRef?: any): number;
 
-    public getFirstSelectedIndex(sectRef?: any): number|null;
+    public getFirstSelectedIndex(sectRef?: any): number|null|null;
 
-    public getLastSelectedIndex(sectRef?: any): number|null;
+    public getLastSelectedIndex(sectRef?: any): number|null|null;
 
-    public getSelectedRows(sectRef?: any): (number)[];
+    public getSelectedRows(sectRef?: any): (number)[]|null;
 
-    public getSelectedRowIds(sectRef?: any): (string)[];
+    public getSelectedRowIds(sectRef?: any): (string)[]|null;
 
     public getSelectedRowCount(sectRef?: any): number;
 

package/lib/tr-grid-row-selection/es6/RowSelection.js

@@ -1,7 +1,7 @@
-import { Ext } from '../../tr-grid-util/es6/Ext.js';
-import { EventDispatcher } from '../../tr-grid-util/es6/EventDispatcher.js';
-import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
-import { isMac as isMacFn } from '../../tr-grid-util/es6/Util.js';
+import { Ext } from "../../tr-grid-util/es6/Ext.js";
+import { EventDispatcher } from "../../tr-grid-util/es6/EventDispatcher.js";
+import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import { isMac as isMacFn } from "../../tr-grid-util/es6/Util.js";
 import { isIE, prepareTSVContent } from "../../tr-grid-util/es6/Util.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
 import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
@@ -393,7 +393,7 @@ RowSelectionPlugin.prototype.getFirstSelectedIndex = function (sectRef) {
 		var count = rows.length;
 		var dataRow;
 		for (var rowIndex = 0; rowIndex < count; rowIndex++) {
-			dataRow = this._getRowData(rows[rowIndex]);
+			dataRow = this._rowGetter(rows[rowIndex]);
 			if (dataRow && dataRow[this._selectionField]) {
 				return rowIndex;
 			}
@@ -421,7 +421,7 @@ RowSelectionPlugin.prototype.getLastSelectedIndex = function (sectRef) {
 		var count = rows.length;
 		var dataRow;
 		for (var rowIndex = count - 1; rowIndex >= 0; rowIndex--) {
-			dataRow = this._getRowData(rows[rowIndex]);
+			dataRow = this._rowGetter(rows[rowIndex]);
 			if (dataRow && dataRow[this._selectionField]) {
 				return rowIndex;
 			}
@@ -451,7 +451,7 @@ RowSelectionPlugin.prototype.getSelectedRows = function (sectRef) {
 		var selectedRows = [];
 		var dataRow;
 		for (var rowIndex = 0; rowIndex < count; rowIndex++) {
-			dataRow = this._getRowData(rows[rowIndex]);
+			dataRow = this._rowGetter(rows[rowIndex]);
 			if (dataRow && dataRow[this._selectionField]) {
 				selectedRows.push(rowIndex);
 			}
@@ -643,8 +643,8 @@ RowSelectionPlugin.prototype._onMouseDown = function (e) {
 	if (!ctx["hit"] || ctx["sectionType"] !== "content") { return; }
 	if (e.button === 2) { // Right click at the selected column should override clicking row to select;
 		var csp = this._getPlugin("ColumnSelectionPlugin");
-		if (csp && csp['isEnabled']()) {
-			if (csp['isSelectedColumn'](ctx["colIndex"])) {
+		if (csp && csp["isEnabled"]()) {
+			if (csp["isSelectedColumn"](ctx["colIndex"])) {
 				return;
 			}
 		}
@@ -740,7 +740,7 @@ RowSelectionPlugin.prototype._onMouseMove = function (e) {
 */
 RowSelectionPlugin.prototype._setPendingClickIndex = function (rowIndex, host) {
 	this._pendingClickIndex = rowIndex;
-	host && host.listen('mousemove', this._onMouseMove);
+	host && host.listen("mousemove", this._onMouseMove);
 };
 
 /** To clear _pendingClickIndex
@@ -749,7 +749,7 @@ RowSelectionPlugin.prototype._setPendingClickIndex = function (rowIndex, host) {
 */
 RowSelectionPlugin.prototype._clearPendingClickIndex = function (host) {
 	this._pendingClickIndex = -1;
-	host && host.unlisten('mousemove', this._onMouseMove);
+	host && host.unlisten("mousemove", this._onMouseMove);
 };
 
 
@@ -853,15 +853,25 @@ RowSelectionPlugin.prototype._onCopy = function (e) {
 */
 RowSelectionPlugin.prototype._onPostSectionDataBinding = function (e) {
 	if (!this._basedOnContent
-		|| 'content' !== e.sectionType
+		|| "content" !== e.sectionType
 		|| !this._activeGrid) {
 		return;
 	}
-	var dataRow, isSelect;
-	for (var rowIndex = e.fromRowIndex; rowIndex < e.toRowIndex; rowIndex++) {
-		dataRow = this._getRowData(e.dataRows[rowIndex]);
-		isSelect = dataRow ? dataRow[this._selectionField] : false;
-		e.section.setSelectedRow(rowIndex, isSelect === true);
+	var section = e.section;
+	var dv = e.dataSource;
+
+	var field = this._selectionField;
+	section.clearSelectedRows();
+
+	var fromR = section.getFirstIndexInView();
+	var toR = section.getLastIndexInView();
+	for (var r = fromR; r < toR; ++r) {
+		var dataRow = this._rowGetter(dv.getRowDataAt(r));
+		if(dataRow) {
+			if(dataRow[field]) {
+				section.setSelectedRow(r, true);
+			}
+		}
 	}
 	this._updateMenuIcon();
 };
@@ -956,7 +966,7 @@ RowSelectionPlugin.prototype._clearSelectedRows = function (preserveAnchor) { //
 				var dataRow, firstIndex;
 				var len = rows.length;
 				for (i = 0; i < len; i++) {
-					dataRow = this._getRowData(rows[i]);
+					dataRow = this._rowGetter(rows[i]);
 					if (dataRow && dataRow[this._selectionField]) {
 						valueList.push(false);
 						ridList.push(rids[i]);
@@ -1024,8 +1034,8 @@ RowSelectionPlugin.prototype._selectByKey = function (direction, e, pageKey) {
 	}
 	if (next < 0) {
 		var csp = this._getPlugin("ColumnSelectionPlugin");
-		if (!shiftKey && csp && csp['isEnabled']()) {
-			csp['selectSingleColumn'](null, this._activeGrid);
+		if (!shiftKey && csp && csp["isEnabled"]()) {
+			csp["selectSingleColumn"](null, this._activeGrid);
 
 			this.clearAllSelections();
 			return;
@@ -1353,8 +1363,8 @@ RowSelectionPlugin.prototype._dispatchBeforeSelection = function (e, ctx) {
 RowSelectionPlugin.prototype._dispatchSelectionChanged = function (e, rowIndex, section) {
 	if (this._activeGrid) {
 		var csp = this._getPlugin("ColumnSelectionPlugin");
-		if (csp && csp['isEnabled']()) {
-			csp['clearSelection']();
+		if (csp && csp["isEnabled"]()) {
+			csp["clearSelection"]();
 		}
 		var cep = this._getPlugin("CellEditingPlugin");
 		if (cep) {

package/lib/tr-grid-util/es6/ExpanderIcon.js

@@ -39,10 +39,10 @@ ExpanderIcon._iconName = ""; // static variable
 * @private
 */
 ExpanderIcon._styles = prettifyCss([
-	".tr-grid .expander-disabled .expander", [
+	".tr-grid.expander-disabled .expander", [
 		"cursor: default;"
 	],
-	".tr-grid .folder-disabled .column .cell.folder", [
+	".tr-grid.folder-disabled .cell.folder", [
 		"cursor: default;"
 	],
 	".tr-grid .expander", [

package/lib/tr-grid-util/es6/MultiTableManager.d.ts

@@ -18,6 +18,8 @@ declare class MultiTableManager {
 
     public setTableCount(num: number): void;
 
+    public wrapTable(rowCount: number): void;
+
     public getTable(at?: number): Element|null;
 
     public insertRow(rowOption?: any, at?: number): void;
@@ -26,6 +28,12 @@ declare class MultiTableManager {
 
     public getRowCount(): number;
 
+    public insertColumn(columnOption: any, idx?: number): void;
+
+    public removeColumn(colRef: any): void;
+
+    public getColumnCount(): number;
+
 }
 
 export default MultiTableManager;