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