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:

 onInit: function() {
   var data = new JSONModel("Model/data.json");
   this.getView().setModel(data);
   var otable = this.getView().byId("PlaceIt");
   otable.bindItems("/employees", new ColumnListItem({
     cells: [
       new Text({
         text: "{name}"
       }),
       new Text({
         text: "{Physics}"
       }),
       new Text({
         text: "{Chemistry}"
       }),
       new Text({
         text: "{Maths}"
       }),
       new Text({
         text: "{English}"
       })
     ]
   }));
   otable.setModel(data);
   var oScrollContainer = new ScrollContainer({
     height: "100px",
     vertical: true,
     focusable: true,
     content: [oTableItems]
   });
 },

<Table id="PlaceIt">
  <columns>
    <Column>
      <Text text="Student Name" />
    </Column>
    <Column>
      <Text text="Physics" />
    </Column>
    <Column>
      <Text text="Chemistry" />
    </Column>
    <Column>
      <Text text="Maths" />
    </Column>
    <Column>
      <Text text="English" />
    </Column>
  </columns>
  <!-- ... -->
</Table>

I tried using sap.m.ScrollContainer control but I'm not getting anything.

Here is a demo.

Answer 1

As of v1.54, the property sticky is publicly available.

sticky
Defines the section of the sap.m.Table control that remains fixed at the top of the page during vertical scrolling as long as the table is in the viewport.

Once its value is set to "ColumnHeaders", the headers will stay fixed while scrolling.

Be aware that this feature is supported only by modern browsers.

---

• Demo: https://jsbin.com/ticivew/edit?js,output
• Property description

• Other sticky options^v1.56 - The syntax for assigning multiple values in XMLView looks as follows:

  <Table sticky="HeaderToolbar,InfoToolbar,ColumnHeaders">