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

[saivellanki]

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 :wink: (or) the best would be extending the table control (which might take time to build, but more robust).

Happy Learning! :smile:

Best Regards,

Sai.