Skip to Content
Author's profile photo Angel Puertas

Custom sorter and filter in SAPUI5 Table


I’ve been working with sap.ui.table.Table to adding some sorters and filters. The main purpose of this blog is overwrite default sorting by adding a custom menu to table column header. This code fragment will create a column with default sorting:

//Define the columns and the control templates to be used    
oTable.addColumn(new sap.ui.table.Column({    
    label: new sap.ui.commons.Label({text: "years"}),    
    template: new sap.ui.commons.TextView().bindProperty("text", "years"),    
    sortProperty: "years",    
    filterProperty: "years",    
    width: "200px"

SAPUI5 table sort column algorithm depends on model type. number = number sorting, text = text sorting, etc.

Sometimes we use datasources (external or public services, etc) which contain bad typed attributes like numeric values typed as string. It is possible override default table column header menu to add a custom sorter.

This is an example of wrong sorting:


Step 1. Create function addColumnSorterAndFilter

This function will add a custom menu with sorting asc, desc and filtering functionality.

 * Adds a custom sort menu for a given table
 * @param oColumn Target table column to add custom menu
 * @param comparator Function to compare two values of column oColumn
function addColumnSorterAndFilter(oColumn, comparator) {
  var oTable = oColumn.getParent();
  var oCustomMenu = new sap.ui.commons.Menu();
    oCustomMenu.addItem(new sap.ui.commons.MenuItem({
                text: 'Sort ascending',
                select:function() {
                 var oSorter = new sap.ui.model.Sorter(oColumn.getSortProperty(), false);
                 for (var i=0;i<oTable.getColumns().length; i++) oTable.getColumns()[i].setSorted(false);                
    oCustomMenu.addItem(new sap.ui.commons.MenuItem({
     text: 'Sort descending',
        select:function(oControlEvent) {
             var oSorter = new sap.ui.model.Sorter(oColumn.getSortProperty(), true);
             for (var i=0;i<oTable.getColumns().length; i++) oTable.getColumns()[i].setSorted(false);
    oCustomMenu.addItem(new sap.ui.commons.MenuTextFieldItem({
  text: 'Filter',
  icon: '/',
  select: function(oControlEvent) {
      var filterValue = oControlEvent.getParameters().item.getValue();
      var filterProperty = oControlEvent.getSource().getParent().getParent().mProperties.sortProperty;
      var filters = [];
      if (filterValue.trim() != '') {
      var oFilter1 = new sap.ui.model.Filter(filterProperty, sap.ui.model.FilterOperator.EQ, filterValue);
      filters = [oFilter1];   
      oTable.getBinding("rows").filter(filters, sap.ui.model.FilterType.Application);
    return oColumn;

Step 2. Create your custom comparator

 * Integer comparator
function compareIntegers(value1, value2) {
  if ((value1 == null || value1 == undefined || value1 == '') &&
  (value2 == null || value2 == undefined || value2 == '')) return 0;
  if ((value1 == null || value1 == undefined || value1 == '')) return -1;
  if ((value2 == null || value2 == undefined || value2 == '')) return 1;
  if(parseInt(value1) < parseInt(value2)) return -1;
  if(parseInt(value1) == parseInt(value2)) return 0;
  if(parseInt(value1) > parseInt(value2)) return 1;           

Step 3. Apply new menu to column

var oColumn = new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "years"}),
  template: new sap.ui.commons.TextView().bindProperty("text", "years"),
  sortProperty: "years",
  filterProperty: "years"
addColumnSorterAndFilter(oColumn, compareIntegers);



Any suggestions are welcome!

Kind regards

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Angel,

      thank you for your solution, i'm new to sapui5 and it helps understanding sorters and filters. With my odata model the sorter causes a modified odata request to the gateway and uses the $filter oder orderby options of the gateway. In my case the gateway service hasn't implemented filter or order functionalities, so the order in the table won't change. Of course i tried the gateway service with the rest client, too.

      I have all required odata already in the table. So my question is: is there a way to sort and filter the odatamodel localy in the browser. I can imagine that it's possible to modify the odata model with javascipt.

      Thank you


      Author's profile photo Angel Puertas
      Angel Puertas
      Blog Post Author

      Hi Kai,

      I think there's an option. You could avoid this creating a JSONModel after your read odata call.

      For example:





        function (data, response)


          if (data != undefined) {

            if(data.results.length > 0){

              var modelJSON = new sap.ui.model.json.JSONModel();




              //bind this JSON Model to your table




      If you bind JSON Model to your table you'll enable client sorting & filtering.

      Kind regards

      Author's profile photo Former Member
      Former Member

      Hi Angel,

      thank you very much, with an json model  this works very well on client site.

      Furthermore i put all models in a model.js file, that's included in the index.html to make the models available everywhere.


      //global variables

      var allStockItemModel = new sap.ui.model.json.JSONModel();

      var singleStockItemModel  = new sap.ui.model.json.JSONModel();

      var oModel;

      //var sServiceUrl = "http:HOST:PORT/GW-SERVICE URL";  //for productive

      var sServiceUrl = "proxy/GW-SERVICE-URL"; //for local test

      var user = "user";

      var pw = "pw";

      gw_param = "a parameter""sap.ui.commons.MessageBox");            //do not delete - is needed for correct functionality of messagebox


      function initModel(){      

          oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, false, user, pw);




      function getAllStockItems(){


          var param = ["$filter=param1 eq '"+gw_param+"'"];

 "/ENTITYNAME", null, param, true,

                      function (oData, response){


                          //document.write(allStockItemModel.getJSON()); //for test


                      function (oError){

                          alert("Error while loading allStockItemModel");



      Thank you very much and best wishes


      Author's profile photo Puneet Jagdev
      Puneet Jagdev

      Hi Kai,

      Thanks a Lot for the information. It was a great help!

      Thanks and Regards

      Puneet Jagdev

      Author's profile photo Ivan Slavov
      Ivan Slavov

      Hi Kai,

      Great example!


      Ivan Slavov

      Author's profile photo Former Member
      Former Member

      Great post!!!

      Only a little bug 🙂   For MenuTextFieldItem you must use 'label' property because 'text' is undefined.

      Thanks and best regards

      Author's profile photo Abdul Waheed
      Abdul Waheed

      Is there any way to add filter on JSONModel before binding it to a table?

      Author's profile photo Former Member
      Former Member

      Hi Follower,

      i guess there's no way to use the filter without an binding. If you filter the model, you would probaply lose your data, i don't know if that make scence.

      Furthermore you should add an filter to the odata request (if you use one) and get only the needed data.

      For manual actions on the model you could iterate through the json data manually and sort or filter the model.

      //Here's an example model:

      var oModel = new sap.ui.model.json.JSONModel();


      //iterate through and do what you would, perhaps copy matching values to another model

      $.each(oModel.getProperty("/results"),function( index, entry){

              if(entry.key > 3){

                  alert("greater 3 is " + entry.key);


      For simple filtering an array you also can use somthing like:

      var aResults= oModel.getProperty("/results");

      aResults.filter(function (x) {
      return x.key > 3;

      and put the result back to the model...

      also see jquery - Javascript: How to filter object array based on attributes? - Stack Overflow

      Best wishes


      Author's profile photo Former Member
      Former Member

      Very helpful.  I was needing some help on custom sorting today, so thank you for this post.  I noticed also that this guy:

      1. function compareIntegers(value1, value2) { 
      2.   if ((value1 == null || value1 == undefined || value1 == '') && 
      3.   (value2 == null || value2 == undefined || value2 == '')) return 0
      4.   if ((value1 == null || value1 == undefined || value1 == '')) return -1
      5.   if ((value2 == null || value2 == undefined || value2 == '')) return 1
      6.   if(parseInt(value1) < parseInt(value2)) return -1
      7.   if(parseInt(value1) == parseInt(value2)) return 0
      8.   if(parseInt(value1) > parseInt(value2)) return 1;             
      9. }; 

      Can be reduced using some nifty features of javascript, to this:

      1. function compareIntegers(a, b) { 
      2.   return parseInt(a || 0) - parseInt(b || 0);           
      3. }; 

      Hope this is helpful.



      Author's profile photo Khabir Ahmad Raja
      Khabir Ahmad Raja

      Hi guys I am facing a problem with filter in sap.m.List. Initial filter is working fine but when a user changes the filter in run time the List doesn't updated according to the new filter.

      Any idea how to change the List contents according to the change in filter request?

      var oSelection = 2;

      var oFilter = new sap.ui.model.Filter("Quantity", sap.ui.model.FilterOperator.EQ, oSelection);

      var oComboBox1 = new sap.m.ComboBox("Combobox",{

        selectionChange: function(oControlEvent) {

        oSelection =  3;   //$("#Combobox-inner").val();





      Author's profile photo Former Member
      Former Member

      Hi Kahir,

      i would suggest to update your binding like:


                path: "yout path",

                startIndex: 1,

                template: .... or factory: ....,


                               new sap.ui.modelSorter(sKey,bSortDesc),



      Best wishes


      Author's profile photo Former Member
      Former Member



      Thanks for solution,  I just need to know how we can do this same customization in grouping table.


      I cant find any resources. Thanx in advance.


      Author's profile photo Maxim Creve
      Maxim Creve

      Thanks for the blog, i used it for my requirement.

      A couple of years later it is easier and more readable to use the code below for the comparator:

      oSorter.fnCompare = (value1, value2) => {
      return value1.localeCompare(value2, undefined, {numeric: true, sensitivity: ‘base’});

      Kind regards,