SAPUI5 Table - Remove Filter/Grouping/Sort?

Question

I have a simple table (type sap.ui.table.Table) where I allow my users to sort, filter and group elements. However there is no possibility to remove sorting or grouping once it is applied? The filter could be removed by entering no value in the filter, but how do I remove sorting/grouping?

var oTableEmpl = new sap.ui.table.Table({
  width : "100%",
  visibleRowCount : 20,
  selectionMode : sap.ui.table.SelectionMode.Multi,
  navigationMode : sap.ui.table.NavigationMode.Scrollbar,
  editable : false,
  enableCellFilter : true,
  enableColumnReordering : true,
  enableGrouping : true,
  extension : oMatrixLayout,
});

 oTableEmpl.addColumn(new sap.ui.table.Column({
       label : new sap.ui.commons.Label({
             text : "Label",
             textAlign : sap.ui.core.TextAlign.Center
       }),
       template : new sap.ui.commons.TextView({
             text : "{Value}",
             textAlign : sap.ui.core.TextAlign.Center
       }),
       visible : false,
       sortProperty: "Value",
       filterProperty: "Value",
}));

This might seem easy, but in the table itself there is no option to remove anything. Does it really have to be removed by programming something?

Solution 1

Yes, there is only way to do this by coding. Basically you need to clear sorters and filters of the ListBinding, and then refresh the DataModel. For grouping, reset the grouping of Table and Column to false, after reset, set grouping of Table back to true.

//set group of table and column to false          
oTableEmpl.setEnableGrouping(false);
oTableEmpl.getColumns()[0].setGrouped(false);

var oListBinding = oTableEmpl.getBinding();
oListBinding.aSorters = null;
oListBinding.aFilters = null;
oTableEmpl.getModel().refresh(true);

//after reset, set the enableGrouping back to true
oTableEmpl.setEnableGrouping(true);

I also attached a working code snippet. Please have a check.

<script id='sap-ui-bootstrap' type='text/javascript' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table,sap.viz" data-sap-ui-theme="sap_bluecrystal"></script>

<script id="view1" type="sapui5/xmlview">
    <mvc:View xmlns:core="sap.ui.core" xmlns:layout="sap.ui.commons.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons" xmlns:table="sap.ui.table" controllerName="my.own.controller" xmlns:html="http://www.w3.org/1999/xhtml">
        <layout:VerticalLayout>
            <Button text="Reset" press="onPress" />
            <table:Table id="testTable" rows="{/}" enableGrouping="true">
                <table:Column sortProperty="abc" sorted="true" visible="true">
                    <table:label>
                        <Label text="abc"></Label>
                    </table:label>
                    <table:template>
                        <Label text="{abc}"></Label>
                    </table:template>
                </table:Column>
                <table:Column>
                    <table:label>
                        <Label text="abc2"></Label>
                    </table:label>
                    <table:template>
                        <Label text="{abc2}"></Label>
                    </table:template>
                </table:Column>
            </table:Table>
        </layout:VerticalLayout>
    </mvc:View>
</script>


<script>
    sap.ui.controller("my.own.controller", {
        onInit: function() {
            var aTableData = [{
                abc: 1,
                abc2: "a"
            }, {
                abc: 6,
                abc2: "b"

            }, {
                abc: 6,
                abc2: "c"

            }, {
                abc: 3,
                abc2: "g"

            }, {
                abc: 3,
                abc2: "h"

            }];
            var oTableModel = new sap.ui.model.json.JSONModel();
            oTableModel.setData(aTableData);

            var oTable = this.getView().byId("testTable");
            oTable.setModel(oTableModel);
            oTable.sort(oTable.getColumns()[0]);
        },
        onPress: function() {

            var oTable = this.getView().byId("testTable");
            //set group of table and column to false

            oTable.setEnableGrouping(false);
            oTable.getColumns()[0].setGrouped(false);
            var oModel = oTable.getModel();
            var oListBinding = oTable.getBinding();
            oListBinding.aSorters = null;
            oListBinding.aFilters = null;

            oModel.refresh(true);
            //after reset, set the enableGroup back to true
            oTable.setEnableGrouping(true);
        }


    });

    var myView = sap.ui.xmlview("myView", {
        viewContent: jQuery('#view1').html()
    }); // 
    myView.placeAt('content');
</script>

<body class='sapUiBody'>
    <div id='content'></div>
</body>

Solution 2

For openui5 v1.78.7: If you want to delete these Filters from the table:

You can do:

  var columns = this.byId("tableId").getColumns();
  for (var i = 0, l = columns.length; i < l; i++) {
    var isFiltered = columns[i].getFiltered();
    if (isFiltered) {
      // clear column filter if the filter is set
      columns[i].filter("");
    }
  }

You can clear sort filters with:

    var columns = table.getColumns();
    var sortedCols = table.getSortedColumns();
    for (var i = 0, l = columns.length; i < l; i++) {
      if (sortedCols.indexOf(columns[i]) < 0) {
        columns[i].setSorted(false);
      }
    }

Make sure you set back sort on row binding if you had any with:

    table.getBinding("rows").sort(new Sorter(sPath, bDescending));

Comments

[Haojie]

Hi zyrex, i guess grouping is based on sort. so if sort is cleared, grouping should also be cleared. I didn't try the grouping case, could you please check if grouping is cleared ?

[Daz]

I found that ListBinding.sort(null) works better than oListBinding.aSorters = null