Skip to Content
Author's profile photo Sai Vellanki

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:

Capture.gif


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:

Capture1.gif

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.

Assigned Tags

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

      Hi Sai Vellanki,

      The application is working fine on desktop. But coming to the tablet and phone it's not working. The pop up fragment is not opening. So how to make it responsive? Any suggestion?
      Thank You.

      Regards,

      Hemadri

      Author's profile photo Prabuddha Raj
      Prabuddha Raj

      Hi Sai, @saiVellanki
      I need to load dynamic data in a microchart inside a generic tile. I saw your code on JSView. Do you have an example for this usecase?

      Author's profile photo Fernanda Maia
      Fernanda Maia

      Thank you, helped me a lot! =)

      Author's profile photo Venkatesh Machineni
      Venkatesh Machineni

      Hi Sai,

      Nice one!.

      Will this work for sap.m.TableSelectDialog as well?

       

      Bets Regards,

      Venkatesh.

      Author's profile photo asym b
      asym b

      columnclick doesnt work in multiselect table after we select a line item

      please help

      @asym

      Author's profile photo gopi vadde
      gopi vadde

      If possible could you provide following code in js fiddle or any other codeing platforms