Responsive (sap.m) Table: on-Click Column Sort / Filter

Hello All,

There were few questions on SCN – why don’t we have on-Click column sort / filter for Responsive (sap.m) table like we do for Grid (sap.ui.table) table. We need to use View Settings Dialog, in order to sort / filter / group responsive table.

There might be several reasons, why the functionality is not available. But, some developers wish to use the same functionality and not sure how to move forward.

I tried to build a sample and hopefully it works good for you as well.

Firstly, I created a simple table control, which has products data fetched from URL: Products.json

Now, in order to open a pop-up on click of column, we have to use jQuery ‘click’ event, but prior to that we also need to capture column header DOM object.

var oTable = this.getView().byId("idProductsTable");
    oTable.addEventDelegate({
       onAfterRendering: function() {
          var oHeader = this.$().find('.sapMListTblHeaderCell'); //Get hold of table header elements
          for (var i = 0; i < oHeader.length; i++) {
          var oID = oHeader[i].id;
          that.onClick(oID);
        }
      }
   }, oTable);

I used a Responsive Popover control for the pop-up as fragment, where we have list wrapped as content and respective controls as list items for Sort Ascending / Sort Descending / Filter operations.

<core:FragmentDefinition
xmlns:core="sap.ui.core"
xmlns="sap.m">
  <ResponsivePopover title="Options"
  placement= "Bottom"
  afterOpen= "onOpen">
    <content>
        <List>
          <items>
            <CustomListItem type="Active" press="onAscending">
              <HBox alignItems="Center"
                  justifyContent="Center"
                  class="HBoxStyle">
              <Label text="Sort Ascending" />
              </HBox>
            </CustomListItem>
            <CustomListItem type="Active" press="onDescending">
            <HBox alignItems="Center"
                  justifyContent="Center"
                  class="HBoxStyle">
              <Label text="Sort Descending" />
              </HBox>
            </CustomListItem>
            <CustomListItem>
            <HBox alignItems="Center"
                  justifyContent="Center"
                  class="HBoxStyle">
            <Label text="Filter :" />
            <Input width="90%"
                  change="onChange" />
            </HBox>
            </CustomListItem>
          </items>
        </List>
    </content>
  </ResponsivePopover>
</core:FragmentDefinition>

On click of column, we have to capture column that is clicked and ensure sort / filter operations are done for respective column. Use a local model to save the column name as a property which is selected and can be used later for sort / filter operations.

onClick: function(oID) {
     var that = this;
     $('#' + oID).click(function(oEvent) { //Attach Table Header Element Event
     var oTarget = oEvent.currentTarget; //Get hold of Header Element
     var oLabelText = oTarget.childNodes[0].textContent; //Get Column Header text
     var oIndex = oTarget.id.slice(-1); //Get the column Index
     var oView = that.getView();
     var oTable = oView.byId("idProductsTable");
     var oModel = oTable.getModel().getProperty("/ProductCollection"); //Get Hold of Table Model Values
     var oKeys = Object.keys(oModel[0]); //Get Hold of Model Keys to filter the value
     oView.getModel().setProperty("/bindingValue", oKeys[oIndex]); //Save the key value to property
     that._oResponsivePopover.openBy(oTarget);
     });
}

Also, we can pass multiple filters by ‘comma’ separated values in ‘filter’ input box.

For example: To filter Graphics Card / Accessories in category section, Enter: grap, acce  then the result would be:

To make the focus on Input, when Responsive Popover is opened, we can make use of ‘onAfterOpen’ event.

Full Demo: Responsive Table – onClick Column Filter / Sort

Working Snippet:

This is just a basic sample to give an idea. Validations / Multiple Columns sort are not present and when you try to add a new column this code might not work, you need to tweak the code to make it work 😉 (or) the best would be extending the table control (which might take time to build, but more robust).

Happy Learning! 🙂

Best Regards,

Sai.