@sapui5/sap.ui.vk 1.140.0 → 1.142.0

package/src/sap/ui/vk/ecad/ElementsPanel.js

@@ -15,6 +15,11 @@ sap.ui.define([
 	"sap/m/Input",
 	"sap/m/Table",
 	"sap/m/table/ColumnWidthController",
+	"sap/m/table/columnmenu/Menu",
+	"sap/m/table/columnmenu/QuickGroup",
+	"sap/m/table/columnmenu/QuickGroupItem",
+	"sap/m/table/columnmenu/QuickSort",
+	"sap/m/table/columnmenu/QuickSortItem",
 	"sap/m/Column",
 	"sap/m/ColumnListItem",
 	"sap/m/plugins/ColumnResizer",
@@ -27,6 +32,7 @@ sap.ui.define([
 	"sap/m/p13n/SortController",
 	"sap/m/p13n/MetadataHelper",
 	"sap/ui/core/Control",
+	"sap/ui/core/CustomData",
 	"sap/ui/core/Element",
 	"sap/ui/core/Icon",
 	"sap/ui/core/Lib",
@@ -34,6 +40,7 @@ sap.ui.define([
 	"sap/ui/model/json/JSONModel",
 	"sap/ui/model/Filter",
 	"sap/ui/model/FilterOperator",
+	"sap/ui/model/Sorter",
 	"../Core",
 	"./VisibilityType",
 	"../getResourceBundle",
@@ -47,6 +54,11 @@ sap.ui.define([
 	Input,
 	Table,
 	ColumnWidthController,
+	Menu,
+	QuickGroup,
+	QuickGroupItem,
+	QuickSort,
+	QuickSortItem,
 	Column,
 	ColumnListItem,
 	ColumnResizer,
@@ -59,6 +71,7 @@ sap.ui.define([
 	SortController,
 	MetadataHelper,
 	Control,
+	CustomData,
 	Element,
 	Icon,
 	Lib,
@@ -66,6 +79,7 @@ sap.ui.define([
 	JSONModel,
 	Filter,
 	FilterOperator,
+	Sorter,
 	vkCore,
 	VisibilityType,
 	getResourceBundle,
@@ -73,8 +87,7 @@ sap.ui.define([
 ) {
 	"use strict";
 
-	const Sticky = SapMLibrary.Sticky;
-	const FlexRendertype = SapMLibrary.FlexRendertype;
+	const SortOrder = CoreLibrary.SortOrder;
 
 	const IconType = {
 		Hidden: "sap-icon://hide",
@@ -85,7 +98,8 @@ sap.ui.define([
 	const ColumnName = {
 		RefDes: "refdes",
 		Type: "type",
-		Device: "deviceref"
+		Device: "deviceref",
+		Visibility: "visibility"
 	};
 
 	const ElementType = {
@@ -98,6 +112,14 @@ sap.ui.define([
 		ElementType: "ElementType"
 	};
 
+	function getKeyForItem(element) {
+		return element.data("key");
+	}
+
+	function findItemByKey(items, key) {
+		return items.find(element => getKeyForItem(element) === key);
+	}
+
 	function isAncestorOf(ancestor, descendant) {
 		for (let current = descendant.getParent(); current != null; current = current.getParent()) {
 			if (current === ancestor) {
@@ -120,7 +142,7 @@ sap.ui.define([
 		const metadata = nodeRef?.userData?.metadata ?? {};
 		if (metadata.length != undefined) {
 			const map = new Map();
-			metadata.forEach(function(entry) {
+			metadata.forEach(entry => {
 				if (entry.category === "ecad") {
 					map.set(entry.tag, entry.value);
 				}
@@ -130,6 +152,17 @@ sap.ui.define([
 		return null;
 	}
 
+	function formatElementType(element) {
+		switch (element.type) {
+			case ElementType.Component:
+				return getResourceBundle().getText("ELEMENTS_PANEL_TYPE_COMPONENT");
+			case ElementType.Net:
+				return getResourceBundle().getText("ELEMENTS_PANEL_TYPE_NET");
+			default:
+				return getResourceBundle().getText("ELEMENTS_PANEL_TYPE_UNKNOWN");
+		}
+	}
+
 	/**
 	 * Constructor for a new ElementsPanel.
 	 *
@@ -148,7 +181,7 @@ sap.ui.define([
 	 *
 	 * @extends sap.ui.core.Control
 	 * @author SAP SE
-	 * @version 1.140.0
+	 * @version 1.142.0
 	 *
 	 * @constructor
 	 * @public
@@ -278,7 +311,7 @@ sap.ui.define([
 		this._promise = Promise.all([
 			Lib.load("sap.f"),
 			Lib.load("sap.ui.comp")
-		]).then(() => new Promise((resolve) => {
+		]).then(() => new Promise(resolve => {
 			sap.ui.require([
 				"sap/f/DynamicPage",
 				"sap/f/DynamicPageTitle",
@@ -314,13 +347,93 @@ sap.ui.define([
 					press: this._onSettings.bind(this)
 				});
 
+				// Menu with sorting
+				const sortMenu = new Menu({
+					showTableSettingsButton: true,
+					beforeOpen: this._onBeforeOpenColumnMenu.bind(this),
+					tableSettingsPressed: this._onSettings.bind(this),
+					quickActions: [
+						new QuickSort({
+							change: this._onSort.bind(this), items: [new QuickSortItem()]
+						})
+					]
+				});
+
+				// Menu with sorting and grouping
+				const sortGroupMenu = new Menu({
+					showTableSettingsButton: true,
+					beforeOpen: this._onBeforeOpenColumnMenu.bind(this),
+					tableSettingsPressed: this._onSettings.bind(this),
+					quickActions: [
+						new QuickSort({
+							change: this._onSort.bind(this),
+							items: [new QuickSortItem()]
+						}),
+						new QuickGroup({
+							change: this._onGroup.bind(this),
+							items: [new QuickGroupItem()]
+						})
+					]
+				});
+
+				this._rowTemplate = new ColumnListItem({
+					vAlign: "Middle",
+					cells: [
+						new Label({
+							text: "{refdes}",
+							customData: new CustomData({ key: "key", value: ColumnName.RefDes })
+						}),
+						new Label({
+							text: {
+								path: "",
+								formatter: formatElementType,
+								customData: new CustomData({ key: "key", value: ColumnName.Type })
+							}
+						}),
+						new Label({
+							text: "{deviceref}",
+							customData: new CustomData({ key: "key", value: ColumnName.Device })
+						}),
+						new Icon({
+							src: {
+								path: "",
+								formatter: function(element) {
+									switch (getVisibility(element)) {
+										case VisibilityType.Hidden:
+											return IconType.Hidden;
+										case VisibilityType.Partial:
+											return IconType.Partial;
+										default:
+											return IconType.Visible;
+									}
+								}
+							},
+							tooltip: {
+								path: "",
+								formatter: function(element) {
+									switch (getVisibility(element)) {
+										case VisibilityType.Hidden:
+											return getResourceBundle().getText("ELEMENTS_PANEL_VISIBLE_COLUMN_HIDDEN_TOOLTIP");
+										case VisibilityType.Partial:
+											return getResourceBundle().getText("ELEMENTS_PANEL_VISIBLE_COLUMN_PARTIAL_TOOLTIP");
+										default:
+											return getResourceBundle().getText("ELEMENTS_PANEL_VISIBLE_COLUMN_VISIBLE_TOOLTIP");
+									}
+								}
+							},
+							customData: new CustomData({ key: "key", value: ColumnName.Visibility })
+						})
+					]
+				});
+
 				this._table = new Table({
+					id: "elements-table",
 					mode: "MultiSelect",
 					fixedLayout: "Strict",
 					autoPopinMode: true,
 					popinLayout: "GridSmall",
 					includeItemInSelection: true,
-					sticky: [Sticky.HeaderToolbar, Sticky.ColumnHeaders],
+					sticky: [SapMLibrary.Sticky.HeaderToolbar, SapMLibrary.Sticky.ColumnHeaders],
 					selectionChange: this._onTableSelectionChanged.bind(this),
 					headerToolbar: new OverflowToolbar({
 						content: [
@@ -337,83 +450,36 @@ sap.ui.define([
 					],
 					columns: [
 						new Column({
+							headerMenu: sortMenu,
 							hAlign: CoreLibrary.TextAlign.Begin,
+							customData: new CustomData({ key: "key", value: ColumnName.RefDes }),
 							header: new Label({ text: getResourceBundle().getText("ELEMENTS_PANEL_NAME_COLUMN") })
 
 						}),
 						new Column({
+							headerMenu: sortGroupMenu,
 							hAlign: CoreLibrary.TextAlign.Begin,
+							customData: new CustomData({ key: "key", value: ColumnName.Type }),
 							header: new Label({ text: getResourceBundle().getText("ELEMENTS_PANEL_TYPE_COLUMN") })
 						}),
 						new Column({
+							headerMenu: sortGroupMenu,
 							hAlign: CoreLibrary.TextAlign.Begin,
-							header: new Label({
-								text: getResourceBundle().getText("ELEMENTS_PANEL_DEVICE_REFERENCE_COLUMN")
-							})
+							customData: new CustomData({ key: "key", value: ColumnName.Device }),
+							header: new Label({ text: getResourceBundle().getText("ELEMENTS_PANEL_DEVICE_REFERENCE_COLUMN") })
 						}),
 						new Column({
 							hAlign: CoreLibrary.TextAlign.Center,
+							customData: new CustomData({ key: "key", value: ColumnName.Visibility }),
 							header: new Label({ text: getResourceBundle().getText("ELEMENTS_PANEL_VISIBLE_COLUMN") })
 						})
 					],
 					items: {
 						path: "/",
-						template: new ColumnListItem({
-							vAlign: "Middle",
-							cells: [
-								new Label({
-									text: "{refdes}"
-								}),
-								new Label({
-									text: {
-										path: "",
-										formatter: function(element) {
-											switch (element.type) {
-												case ElementType.Component:
-													return getResourceBundle().getText("ELEMENTS_PANEL_TYPE_COMPONENT");
-												case ElementType.Net:
-													return getResourceBundle().getText("ELEMENTS_PANEL_TYPE_NET");
-												default:
-													return getResourceBundle().getText("ELEMENTS_PANEL_TYPE_UNKNOWN");
-											}
-										}
-									}
-								}),
-								new Label({
-									text: "{deviceref}"
-								}),
-								new Icon({
-									src: {
-										path: "",
-										formatter: function(element) {
-											switch (getVisibility(element)) {
-												case VisibilityType.Hidden:
-													return IconType.Hidden;
-												case VisibilityType.Partial:
-													return IconType.Partial;
-												default:
-													return IconType.Visible;
-											}
-										}
-									},
-									tooltip: {
-										path: "",
-										formatter: function(element) {
-											switch (getVisibility(element)) {
-												case VisibilityType.Hidden:
-													return getResourceBundle().getText("ELEMENTS_PANEL_VISIBLE_COLUMN_HIDDEN_TOOLTIP");
-												case VisibilityType.Partial:
-													return getResourceBundle().getText("ELEMENTS_PANEL_VISIBLE_COLUMN_PARTIAL_TOOLTIP");
-												default:
-													return getResourceBundle().getText("ELEMENTS_PANEL_VISIBLE_COLUMN_VISIBLE_TOOLTIP");
-											}
-										}
-									}
-								})
-							]
-						})
+						template: this._rowTemplate
 					}
 				});
+
 				this._table.setModel(this._model);
 
 				this._filterBar = new FilterBar({
@@ -503,7 +569,7 @@ sap.ui.define([
 
 				const content = new VBox({
 					height: "100%",
-					renderType: FlexRendertype.Bare,
+					renderType: SapMLibrary.FlexRendertype.Bare,
 					items: [
 						this._page,
 						this._message
@@ -515,37 +581,18 @@ sap.ui.define([
 
 				this._p13nEngine = Engine.getInstance();
 
-				this._metadataHelper = new MetadataHelper([
-					{
-						key: ColumnName.RefDes,
-						path: ColumnName.RefDes,
-						label: getResourceBundle().getText("ELEMENTS_PANEL_NAME_COLUMN"),
-						groupable: false
-					},
-					{
-						key: ColumnName.Type,
-						path: ColumnName.Type,
-						label: getResourceBundle().getText("ELEMENTS_PANEL_TYPE_COLUMN")
-					},
-					{
-						key: ColumnName.Device,
-						path: ColumnName.Device,
-						label: getResourceBundle().getText("ELEMENTS_PANEL_DEVICE_REFERENCE_COLUMN")
-					}
-				]);
-
 				// Register the elements table for personalization
-				this._registerTableForP13n();
+				this._registerForP13n();
 
 				// Set up filter bar data handlers
 				this._filterBar.addEventDelegate({
 					// When the user hits the `Enter` key in any of the filter bar controls, we trigger the
 					// search. This handler covers all the filter group items. The basic search field is handled separately.
-					onsapenter: (event) => {
+					onsapenter: event => {
 						const control = event.srcControl;
 						// If `control` itself or its ancestor is a part of the `filterGroupItems` aggregation of
 						// the `FilterBar` control, then we can trigger the search.
-						if (this._filterBar.getFilterGroupItems().some((item) => {
+						if (this._filterBar.getFilterGroupItems().some(item => {
 							const itemControl = item.getControl();
 							return itemControl === control || isAncestorOf(itemControl, control);
 						})) {
@@ -571,13 +618,16 @@ sap.ui.define([
 			this._p13nEngine.detachStateChange(this._onTableStateChange);
 			this._p13nEngine.deregister(this._table);
 			this._p13nEngine = null;
+
 			this._metadataHelper.destroy();
 			this._metadataHelper = null;
 
 			this._model.destroy();
 			this._model = null;
+
 			this._elementTypeModel.destroy();
 			this._elementTypeModel = null;
+
 			this._filterSummaryModel.destroy();
 			this._filterSummaryModel = null;
 
@@ -616,14 +666,40 @@ sap.ui.define([
 		this.fireContentChanged();
 	};
 
-	ElementsPanel.prototype._registerTableForP13n = function() {
+	ElementsPanel.prototype._registerForP13n = function() {
+		this._metadataHelper = new MetadataHelper([
+			{
+				groupable: false,
+				key: ColumnName.RefDes,
+				path: ColumnName.RefDes,
+				label: getResourceBundle().getText("ELEMENTS_PANEL_NAME_COLUMN")
+			},
+			{
+				key: ColumnName.Type,
+				path: ColumnName.Type,
+				label: getResourceBundle().getText("ELEMENTS_PANEL_TYPE_COLUMN")
+			},
+			{
+				key: ColumnName.Device,
+				path: ColumnName.Device,
+				label: getResourceBundle().getText("ELEMENTS_PANEL_DEVICE_REFERENCE_COLUMN")
+			},
+			{
+				sortable: false,
+				groupable: false,
+				key: ColumnName.Visibility,
+				path: ColumnName.Visibility,
+				label: getResourceBundle().getText("ELEMENTS_PANEL_VISIBLE_COLUMN")
+			}
+		]);
 
 		this._p13nEngine.register(this._table, {
 			helper: this._metadataHelper,
 			controller: {
 				columnStates: new SelectionController({
 					control: this._table,
-					targetAggregation: "columns"
+					targetAggregation: "columns",
+					getKeyForItem
 				}),
 				columnWidthStates: new ColumnWidthController({
 					control: this._table
@@ -639,18 +715,17 @@ sap.ui.define([
 
 		this._p13nEngine.attachStateChange(this._onTableStateChange.bind(this));
 
-		// Set up default column visibility and sorting for the task table.
+		// Set up default column visibility and sorting for the table.
 		const state = {
 			columnStates: this._metadataHelper.getProperties().map(({ key }) => ({ key })),
-			sortStates: [{ key: ColumnName.RefDes, descending: true }]
+			sortStates: [{ key: ColumnName.RefDes, descending: false }]
 		};
 
 		this._p13nEngine.applyState(this._table, state);
 	};
 
-	// Open settings dialog for personalization
-	ElementsPanel.prototype._openSettingsDialog = function(panels) {
-		this._p13nEngine.show(this._table, panels, { source: this._table });
+	ElementsPanel.prototype._onSettings = function() {
+		this._p13nEngine.show(this._table, ["columnStates", "sortStates", "groupStates"], { source: this._table });
 	};
 
 	ElementsPanel.prototype._setScene = function(scene) {
@@ -683,12 +758,12 @@ sap.ui.define([
 				}
 				break;
 			case ElementType.Net:
-				nodeRef.children.forEach(function(child) {
+				nodeRef.children.forEach(child => {
 					element.parts.set(child.uid, child);
 					if (this._manager.getVisibilityState(child) === false) {
 						element.hiddenParts.add(child.uid);
 					}
-				}, this);
+				});
 				break;
 			default:
 				break;
@@ -704,7 +779,7 @@ sap.ui.define([
 				return; // don't go further down the hierarchy
 			}
 		}
-		nodeRef.children.forEach((child) => this._scanTree(elements, child));
+		nodeRef.children.forEach(child => this._scanTree(elements, child));
 	};
 
 	ElementsPanel.prototype._onTableSelectionChanged = function(event) {
@@ -712,7 +787,7 @@ sap.ui.define([
 		const selected = event.getParameter("selected");
 		const output = [];
 
-		items.forEach(function(item) {
+		items.forEach(item => {
 			const element = item.getBindingContext().getObject();
 			switch (element.type) {
 				case ElementType.Component:
@@ -724,7 +799,7 @@ sap.ui.define([
 				default:
 					break;
 			}
-		}, this);
+		});
 
 		this._manager.setSelectionState(output, selected, true, true);
 		this._updateButtons();
@@ -738,28 +813,24 @@ sap.ui.define([
 		const process = (list, item, select) => {
 			const element = item.getBindingContext().getObject();
 
-			list.forEach(function(nodeRef) {
+			list.forEach(nodeRef => {
 				const metadata = extractMetadata(nodeRef);
 				const refdes = metadata?.get("refdes");
 
 				if (refdes === element.refdes) {
 					this._table.setSelectedItem(item, select, false);
 				}
-			}, this);
+			});
 		};
 
-		items.forEach(function(item) {
+		items.forEach(item => {
 			process(selected, item, true);
 			process(unselected, item, false);
-		}, this);
+		});
 
 		this._updateButtons();
 	};
 
-	ElementsPanel.prototype._handleResize = function(event) {
-		// this._updateSelection();
-	};
-
 	ElementsPanel.prototype._setContent = function(content) {
 		// If there is no explicitly assigned view state manager then use the content connector's default one.
 		if (content && !this.getViewStateManager()) {
@@ -784,7 +855,7 @@ sap.ui.define([
 		let canShow = false;
 		const selected = this._table.getSelectedItems();
 
-		selected.forEach(function(item) {
+		selected.forEach(item => {
 			const element = item.getBindingContext().getObject();
 			const visibility = getVisibility(element);
 
@@ -796,7 +867,7 @@ sap.ui.define([
 				canHide = canShow = true;
 			}
 
-		}, this);
+		});
 
 		this._showButton.setEnabled(canShow);
 		this._hideButton.setEnabled(canHide);
@@ -806,7 +877,7 @@ sap.ui.define([
 		const toShow = [];
 		const selected = this._table.getSelectedItems();
 
-		selected.forEach(function(item) {
+		selected.forEach(item => {
 			const element = item.getBindingContext().getObject();
 
 			if (element.hiddenParts.size > 0) {
@@ -819,7 +890,7 @@ sap.ui.define([
 					toShow.push(ref.parent);
 				}
 			}
-		}, this);
+		});
 
 		this._skipEvent = true;
 		this._manager.setVisibilityState(toShow, true, true, true);
@@ -831,7 +902,7 @@ sap.ui.define([
 		const toHide = [];
 		const selected = this._table.getSelectedItems();
 
-		selected.forEach(function(item) {
+		selected.forEach(item => {
 			const element = item.getBindingContext().getObject();
 
 			if (element.hiddenParts.size < element.parts.size) {
@@ -844,7 +915,7 @@ sap.ui.define([
 					toHide.push(ref.parent);
 				}
 			}
-		}, this);
+		});
 
 		this._skipEvent = true;
 		this._manager.setVisibilityState(toHide, false, true, true);
@@ -863,7 +934,7 @@ sap.ui.define([
 		await this._promise;
 
 		const process = (list, element, show) => {
-			list.forEach(function(ref) {
+			list.forEach(ref => {
 				const metadata = extractMetadata(ref);
 				const refdes = metadata?.get("refdes");
 
@@ -878,11 +949,9 @@ sap.ui.define([
 							break;
 						case ElementType.Net:
 							if (show) {
-								// element.hiddenParts.delete(ref.uid);
-								ref.children.forEach((child) => element.hiddenParts.delete(child.uid));
+								ref.children.forEach(child => element.hiddenParts.delete(child.uid));
 							} else {
-								// element.hiddenParts.add(ref.uid);
-								ref.children.forEach((child) => element.hiddenParts.add(child.uid));
+								ref.children.forEach(child => element.hiddenParts.add(child.uid));
 							}
 							break;
 						default:
@@ -900,22 +969,18 @@ sap.ui.define([
 						}
 					}
 				}
-			}, this);
+			});
 		};
 
-		this._model.getData().forEach(function(element) {
+		this._model.getData().forEach(element => {
 			process(hidden, element, false);
 			process(visible, element, true);
-		}, this);
+		});
 
 		this._model.updateBindings(true);
 		this._updateButtons();
 	};
 
-	ElementsPanel.prototype._onSettings = function() {
-		this._openSettingsDialog(["columnStates", "sortStates", "groupStates"]);
-	};
-
 	// Go button on the filter bar
 	ElementsPanel.prototype._onSearch = function() {
 		this._table.setShowOverlay(true);
@@ -971,26 +1036,11 @@ sap.ui.define([
 		this._filterSummaryModel.setProperty("/expandedFilterSummary", this._filterBar.retrieveFiltersWithValuesAsTextExpanded());
 	};
 
-	ElementsPanel.prototype._onTableStateChange = function(event) {
-		if (event.getParameter("control") !== this._table) {
-			return;
-		}
-		const state = event.getParameter("state");
-		// NOTE: There is a bug in UI5 1.120 - this event should not be fired with `null` state.
-		// TODO(fix): Remove this check once the bug is fixed in later versions of UI5.
-		if (state == null) {
-			return;
-		}
-	};
-
-	ElementsPanel.prototype._onColumnResize = function(event) {
-	};
-
 	// Returns the filter items with non-empty values from the filter bar.
 	ElementsPanel.prototype._getFiltersWithValues = function() {
 		return this._filterBar
 			.getFilterGroupItems()
-			.filter((filterGroupItem) => {
+			.filter(filterGroupItem => {
 				const control = filterGroupItem.getControl();
 
 				if (control instanceof MultiComboBox) {
@@ -1010,5 +1060,166 @@ sap.ui.define([
 		this._filterBar._updateToolbarText?.();
 	};
 
+	ElementsPanel.prototype._onBeforeOpenColumnMenu = function(event) {
+		const menu = event.getSource();
+		const column = event.getParameter("openBy");
+		const quickActions = menu.getQuickActions();
+
+		// Handle sorting
+		const sortQuickAction = quickActions.find(quickAction => quickAction instanceof QuickSort);
+		if (sortQuickAction != null) {
+			const sortItem = sortQuickAction.getItems()[0];
+			sortItem.setKey(getKeyForItem(column));
+			sortItem.setLabel(column.getHeader().getText(false));
+			sortItem.setSortOrder(column.getSortIndicator());
+		}
+
+		// Handle grouping, if available - not all columns are groupable
+		const groupQuickAction = quickActions.find(quickAction => quickAction instanceof QuickGroup);
+		if (groupQuickAction != null) {
+			const groupItem = groupQuickAction.getItems()[0];
+			groupItem.setKey(getKeyForItem(column));
+			groupItem.setLabel(column.getHeader().getText(false));
+			groupItem.setGrouped(column.data("grouped"));
+		}
+	};
+
+	ElementsPanel.prototype._onColumnResize = function(event) {
+	};
+
+	ElementsPanel.prototype._onSort = function(event) {
+		this._p13nEngine.retrieveState(this._table).then(state => {
+			const sortStates = state.sortStates;
+
+			for (const state of sortStates) {
+				state.sorted = false;
+			}
+
+			const item = event.getParameter("item");
+			const key = item.getKey();
+			const sortOrder = item.getSortOrder();
+
+			if (sortOrder !== SortOrder.None) {
+				sortStates.push({ key, descending: sortOrder === SortOrder.Descending });
+			}
+
+			this._p13nEngine.applyState(this._table, state);
+		});
+	};
+
+	ElementsPanel.prototype._onGroup = function(event) {
+		this._p13nEngine.retrieveState(this._table).then(state => {
+			const groupStates = state.groupStates;
+
+			for (const state of groupStates) {
+				state.grouped = false;
+			}
+
+			const groupItem = event.getParameter("item");
+			const key = groupItem.getKey();
+
+			if (groupItem.getGrouped()) {
+				groupStates.push({ key });
+			}
+
+			this._p13nEngine.applyState(this._table, state);
+		});
+	};
+
+	ElementsPanel.prototype._onTableStateChange = function(event) {
+		if (event.getParameter("control") !== this._table) {
+			return;
+		}
+		const state = event.getParameter("state");
+		// NOTE: There is a bug in UI5 1.120 - this event should not be fired with `null` state.
+		// TODO(fix): Remove this check once the bug is fixed in later versions of UI5.
+		if (state == null) {
+			return;
+		}
+
+		const info = this._table.getBindingInfo("items");
+		const bindingInfo = {
+			path: info.path,
+			model: info.model,
+			factory: info.factory
+		};
+
+		const columns = this._table.getColumns();
+
+		// Reset all columns to be invisible, unsorted and ungrouped
+		for (const column of columns) {
+			column.setVisible(false);
+			column.setSortIndicator(SortOrder.None);
+			column.data("grouped", false);
+
+			const width = state.columnWidthStates[getKeyForItem(column)];
+
+			if (width !== undefined) {
+				column.setWidth();
+			}
+		}
+
+		const cellTemplates = this._rowTemplate.getCells();
+
+		// Make column visible and in right order
+		state.columnStates.forEach((columnState, index) => {
+			const column = findItemByKey(this._table.getColumns(), columnState.key);
+			column.setVisible(true);
+
+			this._table.removeColumn(column);
+			this._table.insertColumn(column, index);
+
+			const template = findItemByKey(cellTemplates, columnState.key);
+
+			this._rowTemplate.removeCell(template);
+			this._rowTemplate.insertCell(template, index);
+		});
+
+		// Create sorters
+		//
+		// If there is a column used for grouping, we need to create a sorter for it as well and that
+		// sorter must be the first in the list of sorters. The column used for grouping can also be one
+		// of the columns used for sorting but it is not mandatory. Only one column can be used for grouping
+		bindingInfo.sorter = [];
+
+		if (state.groupStates.length === 1) {
+			const key = state.groupStates[0].key;
+			const path = this._metadataHelper.getProperty(key).path;
+
+			// If this column is also used for sorting, we need to take its sorting order from the corresponding item in state.sortStates
+			const sortState = state.sortStates.find(sortState => sortState.key === key);
+			const descending = sortState?.descending ?? false;
+
+			const getGroupHeader = context => {
+				switch (path) {
+					case ColumnName.Type:
+						return formatElementType(context.getObject());
+					default:
+						return context.getProperty(path);
+				}
+			};
+
+			bindingInfo.sorter.push(new Sorter(path, descending, getGroupHeader));
+
+			const column = findItemByKey(columns, key);
+			column.data("grouped", true);
+		}
+
+		for (let sortState of state.sortStates) {
+			const column = findItemByKey(columns, sortState.key);
+			column.setSortIndicator(sortState.descending ? SortOrder.Descending : SortOrder.Ascending);
+
+			if (state.groupStates[0]?.key === sortState.key) {
+				continue;
+			}
+
+			const path = this._metadataHelper.getProperty(sortState.key).path;
+			bindingInfo.sorter.push(new Sorter(path, sortState.descending));
+		}
+
+		// Apply new binding info to the table
+		this._table.bindItems(bindingInfo);
+	};
+
 	return ElementsPanel;
 });