diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js
index 92df2401a0ce..2aa87497811f 100644
--- a/packages/main/src/Table.js
+++ b/packages/main/src/Table.js
@@ -106,6 +106,19 @@ const metadata = {
},
},
events: /** @lends sap.ui.webcomponents.main.Table.prototype */ {
+ /**
+ * Fired when the ui5-table-column
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,
+ });
+ }
}
}
diff --git a/packages/main/test/pages/Table.html b/packages/main/test/pages/Table.html
index e049b663223a..e91fd5a4beff 100644
--- a/packages/main/test/pages/Table.html
+++ b/packages/main/test/pages/Table.html
@@ -118,9 +118,9 @@
-->
+
-
-
+
@@ -2822,6 +2822,9 @@
}
};
var html = '';
+ const table = document.getElementById("tbl");
+ let tableLable = document.getElementById("tableLabel");
+
products.ProductCollection.forEach(function (product, index) {
var test = "\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t").concat(product.Name, "\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t").concat(product.ProductId, "\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t").concat(product.SupplierName, "\n\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t").concat(product.Width, " x ").concat(product.Depth, " x ").concat(product.Height, " ").concat(product.DimUnit, "\n\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t").concat(product.WeightMeasure, " ").concat(product.WeightUnit, "\n\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t").concat(product.Price, " ").concat(product.CurrencyCode, "\n\t\t\t\t\t\t\t\n\n\t\t\t\t\t\t");
@@ -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}`;
+ });