@openui5/sap.ui.mdc 1.100.0 → 1.101.0

package/src/sap/ui/mdc/Table.js

@@ -16,8 +16,11 @@ sap.ui.define([
 	"sap/m/Text",
 	"sap/m/Title",
 	"sap/m/ColumnHeaderPopover",
+	"sap/m/ColumnPopoverSelectListItem",
+	"sap/m/ColumnPopoverActionItem",
 	"sap/m/OverflowToolbar",
 	"sap/m/library",
+	"sap/m/table/columnmenu/Menu",
 	"sap/ui/core/Core",
 	"sap/ui/core/format/NumberFormat",
 	"sap/ui/core/dnd/DragDropInfo",
@@ -30,6 +33,7 @@ sap.ui.define([
 	"sap/base/strings/capitalize",
 	"sap/base/util/deepEqual",
 	"sap/base/util/Deferred",
+	"sap/base/util/UriParameters",
 	"sap/ui/core/InvisibleMessage",
 	"sap/ui/core/InvisibleText",
 	"sap/ui/mdc/p13n/subcontroller/ColumnController",
@@ -37,13 +41,13 @@ sap.ui.define([
 	"sap/ui/mdc/p13n/subcontroller/FilterController",
 	"sap/ui/mdc/p13n/subcontroller/GroupController",
 	"sap/ui/mdc/p13n/subcontroller/AggregateController",
-	"sap/m/ColumnPopoverSelectListItem",
-	"sap/m/ColumnPopoverActionItem",
 	"sap/ui/mdc/p13n/subcontroller/ColumnWidthController",
 	"sap/ui/mdc/actiontoolbar/ActionToolbarAction",
 	"sap/ui/mdc/table/RowActionItem",
-	"sap/ui/base/ManagedObjectMetadata",
-	"sap/ui/mdc/table/RowSettings"
+	"sap/ui/mdc/table/RowSettings",
+	"sap/ui/mdc/table/menu/QuickActionContainer",
+	"sap/ui/mdc/table/menu/ItemContainer",
+	"sap/ui/base/ManagedObjectMetadata"
 ], function(
 	Control,
 	ActionToolbar,
@@ -56,8 +60,11 @@ sap.ui.define([
 	Text,
 	Title,
 	ColumnHeaderPopover,
+	ColumnPopoverSelectListItem,
+	ColumnPopoverActionItem,
 	OverflowToolbar,
 	MLibrary,
+	ColumnMenu,
 	Core,
 	NumberFormat,
 	DragDropInfo,
@@ -70,6 +77,7 @@ sap.ui.define([
 	capitalize,
 	deepEqual,
 	Deferred,
+	UriParameters,
 	InvisibleMessage,
 	InvisibleText,
 	ColumnController,
@@ -77,23 +85,25 @@ sap.ui.define([
 	FilterController,
 	GroupController,
 	AggregateController,
-	ColumnPopoverSelectListItem,
-	ColumnPopoverActionItem,
 	ColumnWidthController,
 	ActionToolbarAction,
 	RowActionItem,
-	ManagedObjectMetadata,
-	RowSettings
+	RowSettings,
+	QuickActionContainer,
+	ItemContainer,
+	ManagedObjectMetadata
 ) {
 	"use strict";
 
 	var SelectionMode = library.SelectionMode;
 	var TableType = library.TableType;
 	var RowAction = library.RowAction;
+	var P13nMode = library.TableP13nMode;
 	var ToolbarDesign = MLibrary.ToolbarDesign;
 	var ToolbarStyle = MLibrary.ToolbarStyle;
 	var MultiSelectMode = library.MultiSelectMode;
 	var TitleLevel = coreLibrary.TitleLevel;
+	var SortOrder = coreLibrary.SortOrder;
 	var internalMap = new window.WeakMap();
 	var internal = function(oTable) {
 		if (!internalMap.has(oTable)) {
@@ -589,6 +599,7 @@ sap.ui.define([
 		constructor: function() {
 			this._oTableReady = new Deferred();
 			this._oFullInitialize = new Deferred();
+			this._bUseColumnMenu = UriParameters.fromQuery(window.location.search).get("sap-ui-xx-columnmenu") === "true";
 
 			Control.apply(this, arguments);
 			this.bCreated = true;
@@ -655,17 +666,18 @@ sap.ui.define([
 	 * @inheritDoc
 	 */
 	Table.prototype.init = function() {
-
 		Control.prototype.init.apply(this, arguments);
 
-		// indicates whether binding the table is inevitable or not
-		this._bForceRebind = true;
-		this._updateAdaptation(this.getP13nMode());
-
 		// Skip propagation of properties (models and bindingContexts)
 		this.mSkipPropagation = {
 			rowSettings: true
 		};
+
+		// indicates whether binding the table is inevitable or not
+		this._bForceRebind = true;
+
+		this._aSupportedP13nModes = Object.keys(P13nMode);
+		this._updateAdaptation();
 	};
 
 	/**
@@ -990,35 +1002,23 @@ sap.ui.define([
 
 		if (this.getEnableColumnResize() !== bOldEnableColumnResize) {
 			this._updateColumnResizer();
-			this._updateAdaptation(this.getP13nMode());
+			this._updateAdaptation();
 		}
 
 		return this;
 	};
 
 	Table.prototype._onModifications = function() {
-		var oMDCTable = this;
-		this.initialized().then(function() {
-			var oColumnWidth = oMDCTable.getCurrentState().xConfig;
-			var oColumnWidthContent = oColumnWidth.aggregations && oColumnWidth.aggregations.columns;
-			oMDCTable.getColumns().forEach(function(oColumn, iIndex) {
-				var sWidth = oColumnWidthContent && oColumnWidthContent[oColumn.getDataProperty()] && oColumnWidthContent[oColumn.getDataProperty()].width;
-				var oInnerColumn = oMDCTable._oTable.getColumns()[iIndex];
-				if (!sWidth && oInnerColumn.getWidth() !== oColumn.getWidth()) {
-					oInnerColumn.setWidth(oColumn.getWidth());
-				} else if (sWidth && sWidth !== oInnerColumn.getWidth()) {
-					oInnerColumn.setWidth(sWidth);
-				}
-			});
+		this.getColumns().forEach(function(oColumn) {
+			oColumn._onModifications();
 		});
 	};
 
 	Table.prototype.setP13nMode = function(aMode) {
 		var aOldP13nMode = this.getP13nMode();
 
-		var aSortedKeys = null;
+		var aSortedKeys = [];
 		if (aMode && aMode.length > 1){
-			aSortedKeys = [];
 			var mKeys = aMode.reduce(function(mMap, sKey, iIndex){
 				mMap[sKey] = true;
 				return mMap;
@@ -1046,7 +1046,7 @@ sap.ui.define([
 
 		this.setProperty("p13nMode", aSortedKeys, true);
 
-		this._updateAdaptation(this.getP13nMode());
+		this._updateAdaptation();
 
 		if (!deepEqual(aOldP13nMode.sort(), this.getP13nMode().sort())) {
 			updateP13nSettings(this);
@@ -1055,11 +1055,10 @@ sap.ui.define([
 		return this;
 	};
 
-	Table.prototype._updateAdaptation = function(aMode) {
+	Table.prototype._updateAdaptation = function() {
 		var oRegisterConfig = {
 			controller: {}
 		};
-
 		var mRegistryOptions = {
 			Column: ColumnController,
 			Sort: SortController,
@@ -1069,9 +1068,8 @@ sap.ui.define([
 			ColumnWidth: ColumnWidthController
 		};
 
-		aMode.forEach(function(sMode){
-			var sKey = sMode;
-			oRegisterConfig.controller[sKey] = mRegistryOptions[sMode];
+		this.getActiveP13nModes().forEach(function(sMode){
+			oRegisterConfig.controller[sMode] = mRegistryOptions[sMode];
 		});
 
 		if (this.getEnableColumnResize()) {
@@ -1092,7 +1090,7 @@ sap.ui.define([
 		if (oTable._oTable) {
 			var oDnDColumns = oTable._oTable.getDragDropConfig()[0];
 			if (oDnDColumns) {
-				oDnDColumns.setEnabled(oTable.getP13nMode().indexOf("Column") > -1);
+				oDnDColumns.setEnabled(oTable.getActiveP13nModes().indexOf("Column") > -1);
 			}
 		}
 
@@ -1302,7 +1300,15 @@ sap.ui.define([
 			return oRb.getText("table.NO_DATA");
 		}
 
-		return oRb.getText("table.NO_RESULTS");
+	// Table is bound, but does not show any data
+	// If table-internal or external (for example FilterBar) filters are set, then show the message that the data not found and also ask to adjust the filters.
+		var oExternalFilter = Core.byId(this.getFilter());
+		if ((this.isFilteringEnabled() && getFilteredProperties(this).length > 0) ||  //internal filters check
+			(oExternalFilter && getFilteredProperties(oExternalFilter).length > 0)) { //external filters check
+			return oRb.getText("table.NO_RESULTS");
+		}
+		// If no filters set, show only message that the data are not found, and nothing about the filters.
+		return oRb.getText("table.NO_DATA");
 	};
 
 	Table.prototype._updateRowAction = function() {
@@ -1340,6 +1346,9 @@ sap.ui.define([
 			}
 
 			var oDelegate = this.getControlDelegate();
+			this._aSupportedP13nModes = oDelegate.getSupportedP13nModes(this);
+			this._updateAdaptation();
+
 			if (oDelegate.preInit) {
 				// Call after libraries are loaded, but before initializing controls.
 				// This allows the delegate to load additional modules, e.g. from previously loaded libraries, in parallel.
@@ -1386,9 +1395,6 @@ sap.ui.define([
 		var pTableInit = this.initialized().then(function() {
 			this.initPropertyHelper();
 
-			//Make sure that in case of default xConfig appliance the state is initially read once
-			this._onModifications();
-
 			// add this to the micro task execution queue to enable consumers to handle this correctly
 			var oCreationRow = this.getCreationRow();
 			if (oCreationRow) {
@@ -1488,7 +1494,6 @@ sap.ui.define([
 			// Create Toolbar
 			this._oToolbar = new ActionToolbar(this.getId() + "-toolbar", {
 				design: ToolbarDesign.Transparent,
-				style: this._isOfType(TableType.ResponsiveTable) ? ToolbarStyle.Standard : ToolbarStyle.Clear,
 				begin: [
 					this._oTitle
 				],
@@ -1499,6 +1504,7 @@ sap.ui.define([
 				]
 			});
 		}
+		this._oToolbar.setStyle(this._bMobileTable ? ToolbarStyle.Standard : ToolbarStyle.Clear);
 		return this._oToolbar;
 	};
 
@@ -1544,8 +1550,9 @@ sap.ui.define([
 		return this.getEngine().readXConfig(this);
 	};
 
-	function getFilteredProperties(oTable) {
-		var mFilterConditions = oTable.getFilterConditions();
+	// oControl can be a Table or FilterBar - any Control that is able to have Filter
+	function getFilteredProperties(oControl) {
+		var mFilterConditions = oControl.getFilterConditions();
 
 		return Object.keys(mFilterConditions).filter(function(sProperty) {
 			return mFilterConditions[sProperty].length > 0;
@@ -1561,7 +1568,7 @@ sap.ui.define([
 	 */
 	Table.prototype.getCurrentState = function() {
 		var oState = {};
-		var aP13nMode = this.getP13nMode();
+		var aP13nMode = this.getActiveP13nModes();
 
 		if (aP13nMode.indexOf("Column") > -1) {
 			oState.items = this._getVisibleProperties();
@@ -1597,7 +1604,7 @@ sap.ui.define([
 	 * @returns {boolean} Whether filter personalization is enabled
 	 */
 	Table.prototype.isFilteringEnabled = function() {
-		return this.getP13nMode().indexOf("Filter") > -1;
+		return this.getActiveP13nModes().includes(P13nMode.Filter);
 	};
 
 	/**
@@ -1607,7 +1614,7 @@ sap.ui.define([
 	 * @returns {boolean} Whether sort personalization is enabled
 	 */
 	Table.prototype.isSortingEnabled = function() {
-		return this.getP13nMode().indexOf("Sort") > -1;
+		return this.getActiveP13nModes().includes(P13nMode.Sort);
 	};
 
 	/**
@@ -1617,7 +1624,7 @@ sap.ui.define([
 	 * @returns {boolean} Whether group personalization is enabled
 	 */
 	Table.prototype.isGroupingEnabled = function () {
-		return this.getP13nMode().indexOf("Group") > -1;
+		return this.getActiveP13nModes().includes(P13nMode.Group);
 	};
 
 	/**
@@ -1627,11 +1634,26 @@ sap.ui.define([
 	 * @returns {boolean} Whether aggregation personalization is enabled
 	 */
 	Table.prototype.isAggregationEnabled = function () {
-		return this.getP13nMode().indexOf("Aggregate") > -1;
+		return this.getActiveP13nModes().includes(P13nMode.Aggregate);
+	};
+
+	Table.prototype.getSupportedP13nModes = function() {
+		return this._aSupportedP13nModes || [];
+	};
+
+	Table.prototype.getActiveP13nModes = function() {
+		var aP13nModes = this.getP13nMode();
+		var aSupportedP13nModes = this.getSupportedP13nModes();
+
+		aP13nModes = aP13nModes.filter(function(sMode) {
+			return aSupportedP13nModes.includes(sMode);
+		});
+
+		return aP13nModes;
 	};
 
 	Table.prototype._getP13nButtons = function() {
-		var aP13nMode = this.getP13nMode();
+		var aP13nMode = this.getActiveP13nModes();
 		var aButtons = [];
 
 		// Note: 'Aggregate' does not have a p13n UI, if only 'Aggregate' is enabled no settings icon is necessary
@@ -1755,7 +1777,9 @@ sap.ui.define([
 			var mExportSettings = {
 				workbook: {
 					columns: aSheetColumns,
-					context: {title: that.getHeader()}
+					context: {
+						title: that.getHeader() || mCustomConfig.fileName
+					}
 				},
 				dataSource: oRowBinding,
 				fileType: mCustomConfig.selectedFileType,
@@ -1769,7 +1793,9 @@ sap.ui.define([
 				doEnableAccessibility: mCustomConfig.doEnableAccessibility,
 				signature: mCustomConfig.signature,
 				signatureReason: mCustomConfig.signatureReason,
-				orientation: mCustomConfig.selectedOrientation
+				orientation: mCustomConfig.selectedOrientation,
+				fitToPage: mCustomConfig.fitToPage,
+				pdfArchive: mCustomConfig.pdfArchive
 			};
 
 			if (mExportSettings.fileType === "PDF") {
@@ -1916,7 +1942,6 @@ sap.ui.define([
 				]
 			});
 			this._oTemplate = ResponsiveTableType.createTemplate(this.getId() + "-innerTableRow", oRowSettings);
-			this._createColumn = Table.prototype._createMobileColumn;
 			this._sAggregation = "items";
 			// map bindItems to bindRows for Mobile Table to enable reuse of rebind mechanism
 			this._oTable.bindRows = this._oTable.bindItems;
@@ -1948,7 +1973,6 @@ sap.ui.define([
 				],
 				rowSettingsTemplate: oRowSettings
 			});
-			this._createColumn = Table.prototype._createColumn;
 			this._sAggregation = "rows";
 		}
 
@@ -1965,7 +1989,7 @@ sap.ui.define([
 			sourceAggregation: "columns",
 			targetAggregation: "columns",
 			dropPosition: "Between",
-			enabled: this.getP13nMode().indexOf("Column") > -1,
+			enabled: this.getActiveP13nModes().includes(P13nMode.Column),
 			drop: [
 				this._onColumnRearrange, this
 			]
@@ -2001,11 +2025,6 @@ sap.ui.define([
 		} else {
 			oTableType.disableColumnResizer(this, this._oTable);
 		}
-
-		var aMDCColumns = this.getColumns();
-		aMDCColumns.forEach(function(oColumn) {
-			oColumn.updateColumnResizing(bEnableColumnResizer);
-		}, this);
 	};
 
 	Table.prototype._updateSelectionBehavior = function() {
@@ -2040,82 +2059,106 @@ sap.ui.define([
 
 		var oParent = oColumn.getParent(),
 			iIndex = oParent.indexOfColumn(oColumn),
-			oMDCColumn = this.getColumns()[iIndex],
-			bResizeButton = this._bMobileTable && this.getEnableColumnResize();
+			oMDCColumn = this.getColumns()[iIndex];
 
 		this._fullyInitialized().then(function() {
-			var oResourceBundle = Core.getLibraryResourceBundle("sap.ui.mdc");
-			var oProperty = this.getPropertyHelper().getProperty(oMDCColumn.getDataProperty());
+			if (this._bUseColumnMenu) {
+				if (!this._oColumnHeaderMenu) {
+					this._oQuickActionContainer = new QuickActionContainer({table: this});
+					this._oItemContainer = new ItemContainer({table: this});
+					this._oColumnHeaderMenu = new ColumnMenu({
+						_quickActions: [this._oQuickActionContainer],
+						_items: [this._oItemContainer]
+					});
+				}
+				this._oQuickActionContainer.setAssociation("column", oMDCColumn);
+
+				Promise.all([
+					this._oQuickActionContainer.initializeQuickActions(),
+					this._oItemContainer.initializeItems()
+				]).then(function() {
+					if (this._oQuickActionContainer.hasQuickActions() || this._oItemContainer.hasItems()) {
+						if (this._oColumnHeaderMenu._oItemsContainer) {
+							this._oColumnHeaderMenu._oItemsContainer.destroy();
+							this._oColumnHeaderMenu._oItemsContainer = null;
+						}
+						this._oColumnHeaderMenu.openBy(oColumn);
+					}
+				}.bind(this));
+			} else {
+				var oResourceBundle = Core.getLibraryResourceBundle("sap.ui.mdc"),
+					bResizeButton = this._bMobileTable && this.getEnableColumnResize();
 
-			if (this._oPopover) {
-				this._oPopover.destroy();
-				this._oPopover = null;
-			}
+				if (this._oPopover) {
+					this._oPopover.destroy();
+					this._oPopover = null;
+				}
+				if (this.isSortingEnabled()) {
+					var aAscendItems = [] , aDescendItems = [];
+					var aSortableProperties = this.getPropertyHelper().getProperty(oMDCColumn.getDataProperty()).getSortableProperties();
+					aSortableProperties.forEach(function(oProperty) {
+						aAscendItems.push(new Item({
+							text: oProperty.label,
+							key: oProperty.name
+						}));
+						aDescendItems.push(new Item({
+							text: oProperty.label,
+							key: oProperty.name
+						}));
+					});
+
+					// create ColumnHeaderPopover
+					if (aAscendItems.length > 0) {
+						this._oPopover = new ColumnHeaderPopover({
+							items: [
+								new ColumnPopoverSelectListItem({
+									items: aAscendItems,
+									label: oResourceBundle.getText("table.SETTINGS_ASCENDING"),
+									icon: "sap-icon://sort-ascending",
+									action: [SortOrder.Ascending, this._onCustomSort, this]
+								}),
+								new ColumnPopoverSelectListItem({
+									items: aDescendItems,
+									label: oResourceBundle.getText("table.SETTINGS_DESCENDING"),
+									icon: "sap-icon://sort-descending",
+									action: [SortOrder.Descending, this._onCustomSort, this]
+								})
+							]
+						});
+						oColumn.addDependent(this._oPopover);
+					}
+				}
 
-			if (this.isSortingEnabled() && oProperty) {
-				var aAscendItems = [];
-				var aDescendItems = [];
+				var aFilterable = [];
+				var oDelegate = this.getControlDelegate();
+				var aHeaderItems = (oDelegate.addColumnMenuItems && oDelegate.addColumnMenuItems(this, oMDCColumn)) || [];
 
-				oProperty.getSortableProperties().forEach(function(oProperty) {
-					aAscendItems.push(new Item({
-						text: oProperty.label,
-						key: oProperty.name
-					}));
-					aDescendItems.push(new Item({
+				this.getPropertyHelper().getFilterableProperties(oMDCColumn.getDataProperty()).forEach(function(oProperty) {
+					aFilterable.push(new Item({
 						text: oProperty.label,
 						key: oProperty.name
 					}));
 				});
 
-				// create ColumnHeaderPopover
-				if (aAscendItems.length > 0) {
-					this._oPopover = new ColumnHeaderPopover({
-						items: [
-							new ColumnPopoverSelectListItem({
-								items: aAscendItems,
-								label: oResourceBundle.getText("table.SETTINGS_ASCENDING"),
-								icon: "sap-icon://sort-ascending",
-								action: [false, this._onCustomSort, this]
-							}),
-							new ColumnPopoverSelectListItem({
-								items: aDescendItems,
-								label: oResourceBundle.getText("table.SETTINGS_DESCENDING"),
-								icon: "sap-icon://sort-descending",
-								action: [true, this._onCustomSort, this]
-							})
-						]
+				if (this.isFilteringEnabled() && aFilterable.length) {
+					var oFilter = new ColumnPopoverSelectListItem({
+						label: oResourceBundle.getText("table.SETTINGS_FILTER"),
+						icon: "sap-icon://filter",
+						action: [onShowFilterDialog, this]
 					});
-					oColumn.addDependent(this._oPopover);
+					aHeaderItems.unshift(oFilter);
 				}
-			}
-			var oDelegate = this.getControlDelegate();
-			var aHeaderItems = (oDelegate.addColumnMenuItems && oDelegate.addColumnMenuItems(this, oMDCColumn)) || [];
-
-			if (this.isFilteringEnabled() && oProperty && oProperty.getFilterableProperties().length > 0) {
-				aHeaderItems.unshift(new ColumnPopoverSelectListItem({
-					label: oResourceBundle.getText("table.SETTINGS_FILTER"),
-					icon: "sap-icon://filter",
-					action: [onShowFilterDialog, this]
-				}));
-			}
-
-			if (bResizeButton) {
-				var oColumnResize = ResponsiveTableType.startColumnResize(this._oTable, oColumn);
-				oColumnResize && aHeaderItems.push(oColumnResize);
-			}
 
-			aHeaderItems.forEach(function(oItem) {
-				this._createPopover(oItem, oColumn);
-			}, this);
+				if (bResizeButton) {
+					var oColumnResize = ResponsiveTableType.startColumnResize(this._oTable, oColumn);
+					oColumnResize && aHeaderItems.push(oColumnResize);
+				}
 
-			if (this._oPopover) {
-				this._oPopover.openBy(oColumn);
-				this._oPopover.getAggregation("_popover").attachAfterClose(function() {
-					this._bSuppressOpenMenu = false;
+				aHeaderItems.forEach(function(oItem) {
+					this._createPopover(oItem, oColumn);
 				}, this);
-				this._bSuppressOpenMenu = true;
+				this._oPopover && this._oPopover.openBy(oColumn);
 			}
-
 		}.bind(this));
 	};
 
@@ -2130,10 +2173,18 @@ sap.ui.define([
 		}
 	};
 
-	Table.prototype._onCustomSort = function(oEvent, bDescending) {
+	Table.prototype._onCustomSort = function(oEvent, sSortOrder) {
 		var sSortProperty = oEvent.getParameter("property");
 
-		TableSettings.createSort(this, sSortProperty, bDescending, true);
+		this.getCurrentState().sorters.forEach(function(oProp) {
+			if (oProp.name === sSortProperty) {
+				if (oProp.descending && sSortOrder === SortOrder.Descending || !oProp.descending && sSortOrder === SortOrder.Ascending) {
+					sSortOrder = SortOrder.None;
+				}
+			}
+		});
+
+		TableSettings.createSort(this, sSortProperty, sSortOrder, true);
 	};
 
 	Table.prototype._onColumnResize = function(oEvent) {
@@ -2154,34 +2205,20 @@ sap.ui.define([
 		TableSettings.createAggregation(this, sSortProperty);
 	};
 
-	Table.prototype._setColumnWidth = function(oMDCColumn) {
-		if (!this.getEnableAutoColumnWidth() || oMDCColumn.getWidth() || oMDCColumn.isBound("width")) {
-			return;
-		}
-
-		var oPropertyHelper = this._oPropertyHelper;
-		if (oPropertyHelper) {
-			oPropertyHelper.setColumnWidth(oMDCColumn);
-		} else {
-			this.awaitPropertyHelper().then(this._setColumnWidth.bind(this, oMDCColumn));
-		}
-	};
-
-	Table.prototype._insertInnerColumn = function(oMDCColumn, iIndex) {
+	Table.prototype._insertInnerColumn = function(oColumn, iIndex) {
 		if (!this._oTable) {
 			return;
 		}
 
-		this._setColumnWidth(oMDCColumn);
+		var oInnerColumn = oColumn.getInnerColumn();
 
-		var oColumn = this._createColumn(oMDCColumn);
-		setColumnTemplate(this, oMDCColumn, oColumn, iIndex);
+		this._setMobileColumnTemplate(oColumn, iIndex);
 		this._bForceRebind = true;
 
 		if (iIndex === undefined) {
-			this._oTable.addColumn(oColumn);
+			this._oTable.addColumn(oInnerColumn);
 		} else {
-			this._oTable.insertColumn(oColumn, iIndex);
+			this._oTable.insertColumn(oInnerColumn, iIndex);
 		}
 	};
 
@@ -2206,145 +2243,82 @@ sap.ui.define([
 		}, this);
 	};
 
-	function setColumnTemplate(oTable, oColumn, oInnerColumn, iIndex) {
-		var oCellTemplate = oColumn.getTemplate(true);
-
-		if (!oTable._bMobileTable) {
-			var oCreationTemplateClone = oColumn.getCreationTemplate(true);
-
-			// Grid Table content cannot be wrapped!
-			[oCellTemplate, oCreationTemplateClone].forEach(function(oTemplate) {
-				if (!oTemplate) {
-					return;
-				}
-
-				if (oTemplate.setWrapping) {
-					oTemplate.setWrapping(false);
-				}
-
-				if (oTemplate.setRenderWhitespace) {
-					oTemplate.setRenderWhitespace(false);
-				}
-			});
-
-			oInnerColumn.setTemplate(oCellTemplate);
-			oInnerColumn.setCreationTemplate(oCreationTemplateClone);
-		} else if (iIndex >= 0) {
-			oTable._oTemplate.insertCell(oCellTemplate, iIndex);
-			oTable._oTable.getItems().forEach(function(oItem) {
-				// Add lightweight placeholders that can be rendered - if they cannot be rendered, there will be errors in the console.
-				// The actual cells are created after rebind.
-				oItem.insertAggregation("cells", new InvisibleText(), iIndex, true);
-			});
-		} else {
-			oTable._oTemplate.addCell(oCellTemplate);
-		}
-	}
-
-	/**
-	 * Creates and returns a Column that can be added to the grid table, based on the provided MDCColumn
-	 *
-	 * @param {object} oMDCColumn - the mdc column instance using which the GridTable column will be created
-	 * @private
-	 * @returns {object} the column that is created
-	 */
-	Table.prototype._createColumn = function(oMDCColumn) {
-		return GridTableType.createColumn(oMDCColumn.getId() + "-innerColumn", {
-			width: oMDCColumn.getWidth(),
-			minWidth: Math.round(oMDCColumn.getMinWidth() * parseFloat(MLibrary.BaseFontSize)),
-			hAlign: oMDCColumn.getHAlign(),
-			label: oMDCColumn.getColumnHeaderControl(this._bMobileTable, this.getEnableColumnResize()),
-			resizable: this.getEnableColumnResize(),
-			autoResizable: this.getEnableColumnResize()
-		});
-	};
-
-	/**
-	 * Creates and returns a MobileColumn that can be added to the mobile table, based on the provided MDCColumn
-	 *
-	 * @param {object} oMDCColumn - the mdc column instance using which the ResponsiveTable column will be created
-	 * @private
-	 * @returns {object} the column that is created
-	 */
-	Table.prototype._createMobileColumn = function(oMDCColumn) {
-		return ResponsiveTableType.createColumn(oMDCColumn.getId() + "-innerColumn", {
-			width: oMDCColumn.getWidth(),
-			autoPopinWidth: oMDCColumn.getMinWidth(),
-			hAlign: oMDCColumn.getHAlign(),
-			header: oMDCColumn.getColumnHeaderControl(this._bMobileTable, this.getEnableColumnResize()),
-			importance: oMDCColumn.getImportance(),
-			popinDisplay: "Inline"
-		});
-	};
-
 	/**
 	 * Runtime API for JS flex change to avoid rebind.
 	 *
-	 * @param {object} oMDCColumn - the mdc column instance which should be moved
+	 * @param {object} oColumn - the mdc column instance which should be moved
 	 * @param {int} iIndex - the index to which the column should be moved to
 	 * @private
 	 */
-	Table.prototype.moveColumn = function(oMDCColumn, iIndex) {
-		var oColumn;
-		// move column in mdc Table
-		this.removeAggregation("columns", oMDCColumn, true);
-		this.insertAggregation("columns", oMDCColumn, iIndex, true);
+	Table.prototype.moveColumn = function(oColumn, iIndex) {
+		oColumn._bIsBeingMoved = true;
+		this.removeAggregation("columns", oColumn, true);
+		this.insertAggregation("columns", oColumn, iIndex, true);
+		delete oColumn._bIsBeingMoved;
+
 		if (this._oTable) {
+			var oInnerColumn = oColumn.getInnerColumn();
+
 			// move column in inner table
-			oColumn = this._oTable.removeColumn(oMDCColumn.getId() + "-innerColumn");
-			this._oTable.insertColumn(oColumn, iIndex);
+			this._oTable.removeColumn(oInnerColumn);
+			this._oTable.insertColumn(oInnerColumn, iIndex);
 
-			if (this._bMobileTable) {
-				// responsive table requires the column order to be updated.
-				this._setMobileColumnOrder();
-				// update template for ResponisveTable
-				this._updateColumnTemplate(oMDCColumn, iIndex);
-			}
+			this._setMobileColumnOrder();
+			this._updateMobileColumnTemplate(oColumn, iIndex);
 		}
 	};
 
-	Table.prototype.removeColumn = function(oMDCColumn) {
-		oMDCColumn = this.removeAggregation("columns", oMDCColumn, true);
-		if (this._oTable) {
-			var oColumn = this._oTable.removeColumn(oMDCColumn.getId() + "-innerColumn");
-			oColumn.destroy("KeepDom");
-
-			// update template for ResponsiveTable
-			if (this._bMobileTable) {
-				this._updateColumnTemplate(oMDCColumn, -1);
-			}
-			this._onModifications();
-		}
-		return oMDCColumn;
+	Table.prototype.removeColumn = function(oColumn) {
+		oColumn = this.removeAggregation("columns", oColumn, true);
+		this._updateMobileColumnTemplate(oColumn, -1);
+		return oColumn;
 	};
 
-	Table.prototype.addColumn = function(oMDCColumn) {
-		this.addAggregation("columns", oMDCColumn, true);
-
-		this._insertInnerColumn(oMDCColumn);
+	Table.prototype.addColumn = function(oColumn) {
+		this.addAggregation("columns", oColumn, true);
+		this._insertInnerColumn(oColumn);
+		return this;
+	};
 
+	Table.prototype.insertColumn = function(oColumn, iIndex) {
+		this.insertAggregation("columns", oColumn, iIndex, true);
+		this._insertInnerColumn(oColumn, iIndex);
 		return this;
 	};
 
-	Table.prototype.insertColumn = function(oMDCColumn, iIndex) {
-		this.insertAggregation("columns", oMDCColumn, iIndex, true);
+	Table.prototype._setMobileColumnTemplate = function(oColumn, iIndex) {
+		if (!this._bMobileTable) {
+			return;
+		}
 
-		this._insertInnerColumn(oMDCColumn, iIndex);
-		this._onModifications();
-		return this;
+		var oCellTemplate = oColumn.getTemplateClone();
+
+		if (iIndex >= 0) {
+			this._oTemplate.insertCell(oCellTemplate, iIndex);
+			this._oTable.getItems().forEach(function(oItem) {
+				// Add lightweight placeholders that can be rendered - if they cannot be rendered, there will be errors in the console.
+				// The actual cells are created after rebind.
+				oItem.insertAggregation("cells", new InvisibleText(), iIndex, true);
+			});
+		} else {
+			this._oTemplate.addCell(oCellTemplate);
+		}
 	};
 
-	// ResponsiveTable
-	Table.prototype._updateColumnTemplate = function(oMDCColumn, iIndex) {
+	Table.prototype._updateMobileColumnTemplate = function(oMDCColumn, iIndex) {
+		if (!this._bMobileTable) {
+			return;
+		}
+
 		var oCellTemplate, iCellIndex;
 		// TODO: Check if this can be moved inside the m.Table.
 
 		// Remove cell template when column is hidden
 		// Remove template cell from ColumnListItem (template)
 		if (this._oTemplate) {
-			oCellTemplate = oMDCColumn.getTemplate(true);
+			oCellTemplate = oMDCColumn.getTemplateClone();
 			iCellIndex = this._oTemplate.indexOfCell(oCellTemplate);
-			Table._removeItemCell(this._oTemplate, iCellIndex, iIndex);
+			removeMobileItemCell(this._oTemplate, iCellIndex, iIndex);
 		}
 
 		// Remove cells from actual rendered items, as this is not done automatically
@@ -2352,7 +2326,7 @@ sap.ui.define([
 			this._oTable.getItems().forEach(function(oItem) {
 				// Grouping row (when enabled) will not have cells
 				if (oItem.removeCell) {
-					Table._removeItemCell(oItem, iCellIndex, iIndex);
+					removeMobileItemCell(oItem, iCellIndex, iIndex);
 				}
 			});
 		}
@@ -2363,22 +2337,25 @@ sap.ui.define([
 	 * Updating the responsive table's column order and invalidating avoid rebinds.
 	 * @private
 	 */
-	 Table.prototype._setMobileColumnOrder = function() {
-		this.getColumns().forEach(function(oMDCColumn) {
-			var oColumn = Core.byId(oMDCColumn.getId() + "-innerColumn");
-			if (!oColumn) {
+	Table.prototype._setMobileColumnOrder = function() {
+		if (!this._bMobileTable) {
+			return;
+		}
+
+		this.getColumns().forEach(function(oColumn) {
+			var oInnerColumn = oColumn.getInnerColumn();
+			if (!oInnerColumn) {
 				return;
 			}
 			// since we ensure correct index of the mdcColumn control we can set the same order to the inner responsive table columns
-			oColumn.setOrder(this.indexOfColumn(oMDCColumn));
+			oInnerColumn.setOrder(this.indexOfColumn(oColumn));
 		}, this);
 
 		// invalidate the inner table to apply the correct order on the UI. See sap.m.Column#setOrder
 		this._oTable.invalidate();
 	};
 
-	Table._removeItemCell = function(oItem, iRemoveIndex, iInsertIndex) {
-		// remove cell from index
+	function removeMobileItemCell(oItem, iRemoveIndex, iInsertIndex) {
 		var oCell = oItem.removeCell(iRemoveIndex);
 		if (oCell) {
 			// -1 index destroys the inner content
@@ -2388,7 +2365,7 @@ sap.ui.define([
 				oCell.destroy();
 			}
 		}
-	};
+	}
 
 	Table.prototype._onItemPress = function(oEvent) {
 		this.fireRowPress({
@@ -2537,7 +2514,7 @@ sap.ui.define([
 			Table._addBindingListener(oBindingInfo, "dataReceived", this._onDataReceived.bind(this));
 			Table._addBindingListener(oBindingInfo, "change", this._onBindingChange.bind(this));
 
-			this._updateColumnsBeforeBinding(oBindingInfo);
+			this._updateColumnsBeforeBinding();
 			this.getControlDelegate().updateBinding(this, oBindingInfo, this._bForceRebind ? null : this.getRowBinding());
 			this._updateInnerTableNoDataText();
 			this._bForceRebind = false;
@@ -2631,32 +2608,27 @@ sap.ui.define([
 		}
 	};
 
-	Table.prototype._updateColumnsBeforeBinding = function(oBindingInfo) {
-		var aSorters = [].concat(oBindingInfo.sorter || []);
-		var aMDCColumns = this.getColumns();
-		var bMobileTable = this._bMobileTable;
+	Table.prototype._updateColumnsBeforeBinding = function() {
+		var aColumns = this.getColumns();
 		var oPropertyHelper = this.getPropertyHelper();
 
-		aMDCColumns.forEach(function(oMDCColumn) {
-			var oInnerColumn = Core.byId(oMDCColumn.getId() + "-innerColumn");
-			var oProperty = oPropertyHelper.getProperty(oMDCColumn.getDataProperty());
-			var aSortablePaths = oProperty ? oProperty.getSortableProperties().map(function(oProperty) {
-				return oProperty.path;
+		aColumns.forEach(function(oColumn) {
+			var oInnerColumn = oColumn.getInnerColumn();
+			var oProperty = oPropertyHelper.getProperty(oColumn.getDataProperty());
+			var aSortableProperties = oProperty ? oProperty.getSortableProperties().map(function(oProperty) {
+				return oProperty.name;
 			}) : [];
+			var oSortCondition = this._getSortedProperties().find(function(oSortCondition) {
+				return aSortableProperties.includes(oSortCondition.name);
+			});
+			var sSortOrder = oSortCondition && oSortCondition.descending ? SortOrder.Descending : SortOrder.Ascending;
 
-			if (aSortablePaths.length > 0) {
-				var oSorter = aSorters.find(function(oSorter) {
-					return aSortablePaths.indexOf(oSorter.sPath) > -1;
-				});
-				var sSortOrder = oSorter && oSorter.bDescending ? "Descending" : "Ascending";
-
-				if (bMobileTable) {
-					oInnerColumn.setSortIndicator(oSorter ? sSortOrder : "None");
-				} else {
-					oInnerColumn.setSorted(!!oSorter).setSortOrder(sSortOrder);
-				}
+			if (this._bMobileTable) {
+				oInnerColumn.setSortIndicator(oSortCondition ? sSortOrder : SortOrder.None);
+			} else {
+				oInnerColumn.setSorted(!!oSortCondition).setSortOrder(sSortOrder);
 			}
-		});
+		}, this);
 	};
 
 	/**
@@ -2835,5 +2807,4 @@ sap.ui.define([
 	};
 
 	return Table;
-
-});
+});