Skip to Content
Author's profile photo Jenish Prabhu

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

Assigned Tags

      Be the first to leave a comment
      You must be Logged on to comment or reply to a post.