Custom sorter and filter in SAPUI5 Table

[former_member182650]

Hi!

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',

                icon:"/com.sap.scn.demo/resources/sap/ui/table/themes/sap_goldreflection/img/ico12_sort_asc.gif",

                select:function() {

                 var oSorter = new sap.ui.model.Sorter(oColumn.getSortProperty(), false);

                 oSorter.fnCompare=comparator;

                 oTable.getBinding("rows").sort(oSorter);

                

                 for (var i=0;i<oTable.getColumns().length; i++) oTable.getColumns()[i].setSorted(false);                

                 oColumn.setSorted(true);

                 oColumn.setSortOrder(sap.ui.table.SortOrder.Ascending);

                }

    }));

    oCustomMenu.addItem(new sap.ui.commons.MenuItem({

     text: 'Sort descending',

        icon:"/com.sap.scn.demo/resources/sap/ui/table/themes/sap_goldreflection/img/ico12_sort_desc.gif",

        select:function(oControlEvent) {

             var oSorter = new sap.ui.model.Sorter(oColumn.getSortProperty(), true);

             oSorter.fnCompare=comparator;

             oTable.getBinding("rows").sort(oSorter);

                

             for (var i=0;i<oTable.getColumns().length; i++) oTable.getColumns()[i].setSorted(false);

            

             oColumn.setSorted(true);

             oColumn.setSortOrder(sap.ui.table.SortOrder.Descending);

        }

    }));

   

    oCustomMenu.addItem(new sap.ui.commons.MenuTextFieldItem({

  text: 'Filter',

  icon: '/com.sap.scn.demo/resources/sap/ui/table/themes/sap_goldreflection/img/ico12_filter.gif',

  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);

  }

    }));

   

    oColumn.setMenu(oCustomMenu);

    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"

  });

  oTable.addColumn(oColumn);

addColumnSorterAndFilter(oColumn, compareIntegers);

Result

Any suggestions are welcome!

Kind regards