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}`; + }); diff --git a/packages/main/test/specs/Table.spec.js b/packages/main/test/specs/Table.spec.js index af341d608911..e093679b49a2 100644 --- a/packages/main/test/specs/Table.spec.js +++ b/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"); + }); });