feat(ui5-table): introduce popinChange event (#1166)

packages/main/src/Table.js

@@ -106,6 +106,19 @@ const metadata = {
 		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Table.prototype */ {
+		/**
+		 * Fired when the <code>ui5-table-column</code> is shown as a pop-in instead of hiding it.
+		 *
+		 * @event
+		 * @param {Array} poppedColumns popped-in columns.
+		 * @since 1.0.0-rc.6
+		 * @public
+		 */
+		popinChange: {
+			detail: {
+				poppedColumns: {},
+			},
+		},
 	},
 };
 
@@ -242,6 +255,11 @@ class Table extends UI5Element {
 		// invalidate only if hidden columns count has changed
 		if (this._hiddenColumns.length !== hiddenColumns.length) {
 			this._hiddenColumns = hiddenColumns;
+			if (hiddenColumns.length) {
+				this.fireEvent("popinChange", {
+					poppedColumns: this._hiddenColumns,
+				});
+			}
 		}
 	}
 

packages/main/test/pages/Table.html

@@ -118,9 +118,9 @@
 		</ui5-table-row> -->
 
 	</ui5-table>
+	<label id="tableLabel">Number of poppedColumns: </label>
 
-
-	<br>
+	<br><br>
 
 	<table border="1" style="width: 100%">
 
@@ -2822,6 +2822,9 @@
 			}
 		};
 		var html = '';
+		const table = document.getElementById("tbl");
+		let tableLable = document.getElementById("tableLabel");
+
 		products.ProductCollection.forEach(function (product, index) {
 			var test = "<ui5-table-row  id=roll-".concat(index, ">\n\t\t\t\t\t\t\t<ui5-table-cell>\n\t\t\t\t\t\t\t\t<div class=\"double-line-content\">\n\t\t\t\t\t\t\t\t\t<ui5-label>\n\t\t\t\t\t\t\t\t\t\t<b>").concat(product.Name, "</b>\n\t\t\t\t\t\t\t\t\t</ui5-label>\n\t\t\t\t\t\t\t\t\t<ui5-label style=\"margin-top: 0.5rem\">").concat(product.ProductId, "</ui5-label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</ui5-table-cell>\n\n\t\t\t\t\t\t\t<ui5-table-cell>\n\t\t\t\t\t\t\t\t<ui5-label class=\"middle\" >").concat(product.SupplierName, "</ui5-label>\n\t\t\t\t\t\t\t</ui5-table-cell>\n\n\t\t\t\t\t\t\t<ui5-table-cell>\n\t\t\t\t\t\t\t\t<ui5-label class=\"middle\" >").concat(product.Width, " x ").concat(product.Depth, " x ").concat(product.Height, " ").concat(product.DimUnit, "</ui5-label>\n\t\t\t\t\t\t\t</ui5-table-cell>\n\n\t\t\t\t\t\t\t<ui5-table-cell>\n\t\t\t\t\t\t\t\t<ui5-label style=\"color: #2b7c2b\" class=\"middle\">\n\t\t\t\t\t\t\t\t\t<b>").concat(product.WeightMeasure, "</b> ").concat(product.WeightUnit, "</ui5-label>\n\t\t\t\t\t\t\t</ui5-table-cell>\n\n\t\t\t\t\t\t\t<ui5-table-cell>\n\t\t\t\t\t\t\t\t<ui5-label class=\"middle\" >\n\t\t\t\t\t\t\t\t\t<b>").concat(product.Price, "</b> ").concat(product.CurrencyCode, "</ui5-label>\n\t\t\t\t\t\t\t</ui5-table-cell>\n\n\t\t\t\t\t\t</ui5-table-row>");
 
@@ -2833,7 +2836,6 @@
 		});
 		document.getElementById("tbl").insertAdjacentHTML('beforeend', html);
 
-
 		document.getElementById("toggleSticky").addEventListener("click", function(event) {
 			document.getElementById("tbl").stickyColumnHeader = !document.getElementById("tbl").stickyColumnHeader
 		});
@@ -2845,6 +2847,10 @@
 		document.getElementById("size-btn-500").addEventListener("click", function(event) {
 			document.getElementById("tbl").style.width = "500px";
 		});
+
+		table.addEventListener("popinChange", function (e) {
+			tableLable.textContent = `Number of poppedColumns: ${e.detail.poppedColumns.length}`;
+		});
 	</script>
 </body>
 

packages/main/test/specs/Table.spec.js

@@ -34,4 +34,14 @@ describe("Table general interaction", () => {
 		const tblLessCells = browser.$("#tblLessCells");
 		assert.equal(tblLessCells.isExisting(), true, 'table with more columns is rendered without JS errors.');
 	});
+
+	it("tests if popinChange is fired when min-width is reacted (500px)", () => {
+		let tableLabel = browser.$("#tableLabel");
+		const btn = browser.$("#size-btn-500");
+
+		btn.click();
+		browser.pause(300);
+
+		assert.strictEqual(tableLabel.getHTML(false), "Number of poppedColumns: 2", "popinChange should be fired and columns should be 4");
+	});
 });