SAPUI5 – Multi Filter Table

In SAPUI5 we have 2 controls for table (i) sap.ui.table.Table (ii) sap.m.Table

Currently we have default feature that will allow us to sort and filter. But Multi filter option like that we have got in Excel is missing. Below picture shows Sorting (Ascending/Descending) and Filter option

In order to achieve Multi Filter Excel-like feature I have extended Table UI control and on click of header column it will bring a popup that has multi filter option.

Below is few of the snap shot that works for Multi-Filter on Table UI control:

Sample Code is available in github

https://github.com/jenishprabhu/TableExtend

Code Explained:

STEP1: Table is extended in tableUIExt.js

STEP2: Click event is attached to the table column cell

sap.ui.table.Table.prototype.onAfterRendering.apply(this, arguments);
var count = 0;
this.$().find(‘.sapUiTableColCell’).each(function() {
colClick(count++, $(this));
});

STEP3: custom columnPress event is fired on click of header

col.click(function() {
that.fireColumnPress({‘columnIndex’: idx, ‘event’: this});
});

STEP4: ColumnClickableTable is instantiated

var oTable1 = new ColumnClickableTable(“Table2”, {

.

.

}

STEP5: columnPress event is triggered

STEP6: popOver is opened by attaching this event