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?

Answer 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>