sap.m.Table - Vertical Scrolling with Fixed Header

Question

I have one table having lots of data. Now I want to scroll vertically with table header fixed. can I achieve this?

Here is my code:

Answer 1

To get your own example working, you have to use a ScrollContainer wrapped around the table with vertical="true" and height set to some value. And you need the attribute sticky="ColumnHeaders" on the table itself.

Here is the code from your JS Bin example modified to work:

jQuery.sap.require("sap.m.MessageToast");

// Controller definition
sap.ui.controller("local.controller", {

  onInit: function() {
    var data = [{
      name: "asd",
      amount: "100",
      currency: "USD",
      size: "L"
    }, {
      name: "asd",
      amount: "800",
      currency: "INR",
      size: "XL"
    }, {
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    },{
      name: "asd",
      amount: "454",
      currency: "USD",
      size: "S"

    }];
    var oModel = new sap.ui.model.json.JSONModel(data);
    this.getView().setModel(oModel);
    var table = this.getView().byId("tableid");
    var mytemplate = new sap.m.ColumnListItem({
      cells: [
        new sap.m.Text({
          text: "{name}"
        }), new sap.m.Text({
          text: "{amount}"
        }), new sap.m.Text({
          text: "{currency}"
        }), new sap.m.Text({
          text: "{size}"
        })
      ]
    });
          table.bindAggregation("items",{
          path: "/",
          template : mytemplate
          });
    
  }
});

// Instantiate the View, assign a model and display
var oView = sap.ui.xmlview({
  viewContent: jQuery('#view1').html()
});
oView.placeAt('content');