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.

UI5 now supports fixed header out-of-the-box: https://stackoverflow.com/a/48823778/5846045 — Boghyon Hoffmann, Apr 01 '19 at 08:27
Please consider accepting an answer to let other readers know that this Q&A is resolved. — Boghyon Hoffmann, Oct 21 '22 at 09:23

Boghyon Hoffmann · Answer 1 · 2019-01-09T18:42:36.697

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">
```

score 3 · Answer 2 · answered Jun 14 '16 at 11:32

Not sure why you don't want to use sap.m.Table, but here's an example nonetheless:

sap.ui.controller("view1.initial", {
    onInit : function(oEvent) {
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData({
            data : [
                {
                    "col1": "at curabitur vestibulum",
                    "col2": "porttitor pharetra rutrum",
                    "col3": 93
                },
                {
                    "col1": "hendrerit dui fringilla",
                    "col2": "adipiscing suspendisse lorem",
                    "col3": 36
                },
                {
                    "col1": "placerat vel placerat",
                    "col2": "suspendisse quis sit",
                    "col3": 9
                },
                {
                    "col1": "sagittis at sed",
                    "col2": "malesuada aliquam sit",
                    "col3": 26
                },
                {
                    "col1": "donec donec sed",
                    "col2": "dui tempor nunc",
                    "col3": 38
                },
                {
                    "col1": "sed vitae fringilla",
                    "col2": "vestibulum pretium dolor",
                    "col3": 17
                },
                {
                    "col1": "scelerisque curabitur orci",
                    "col2": "sit sollicitudin amet",
                    "col3": 16
                },
                {
                    "col1": "libero lacus pulvinar",
                    "col2": "lorem velit elit",
                    "col3": 15
                },
                {
                    "col1": "convallis in at",
                    "col2": "fringilla sagittis magna",
                    "col3": 35
                },
                {
                    "col1": "dolor magna sed",
                    "col2": "at turpis tortor",
                    "col3": 3
                },
                {
                    "col1": "elit mi tortor",
                    "col2": "quis aenean turpis",
                    "col3": 32
                },
                {
                    "col1": "ipsum et magna",
                    "col2": "amet massa aliquam",
                    "col3": 59
                },
                {
                    "col1": "eget magna at",
                    "col2": "pharetra amet porta",
                    "col3": 69
                },
                {
                    "col1": "magna et scelerisque",
                    "col2": "aliquam vitae nullam",
                    "col3": 4
                },
                {
                    "col1": "velit etiam odio",
                    "col2": "lorem lacus magna",
                    "col3": 28
                },
                {
                    "col1": "at scelerisque lorem",
                    "col2": "facilisis odio dolor",
                    "col3": 4
                },
                {
                    "col1": "amet ipsum massa",
                    "col2": "sollicitudin sed tortor",
                    "col3": 54
                },
                {
                    "col1": "velit tincidunt massa",
                    "col2": "risus tortor massa",
                    "col3": 7
                },
                {
                    "col1": "id amet adipiscing",
                    "col2": "aliquam vitae adipiscing",
                    "col3": 94
                },
                {
                    "col1": "lorem massa lacus",
                    "col2": "malesuada ac sed",
                    "col3": 27
                }
            ]
        });

        this.getView().setModel(oModel);
    }
});


sap.ui.xmlview("main", {
    viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

/* extra CSS classes here */

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-libs="sap.ui.commons"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
    <mvc:View 
      controllerName="view1.initial"
      xmlns="sap.ui.commons"
      xmlns:l="sap.ui.commons.layout"
      xmlns:t="sap.ui.table"
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc" >
        <t:Table rows="{/data}" visibleRowCount="5">
            <t:columns>
                <t:Column width="100px">
                    <t:label><Label text="col1" /></t:label>
                    <t:template><TextView text="{col1}" /></t:template>
                </t:Column>
                <t:Column width="100px">
                    <t:label><Label text="col2" /></t:label>
                    <t:template><TextView text="{col2}" /></t:template>
                </t:Column>
            </t:columns>
        </t:Table>
    </mvc:View>
</script>

score 2 · Answer 3 · answered Jun 14 '16 at 10:28

2

You will need two tables. First table will have only columns and second will contain items to be displayed with empty column headers.

Second table will be the content of ScrollContainer.

demo

answered Jun 14 '16 at 10:28

Ashish Patil

1,624
2
11
27

this code I tried, In which adding one more page, that I don't want. I have created one application in that I want to impliment – Mahendra Kulkarni Jun 14 '16 at 10:33
One more thing..I have created table header in XML – Mahendra Kulkarni Jun 14 '16 at 11:25
I found the table header fix with vertical scrolling...please check it...Thanks – Mahendra Kulkarni Jun 15 '16 at 09:26
All the calculations for DOM elements should be done in `onAfterRendering` as in `onInit` event DOM is not loaded. [Demo](http://jsbin.com/wifuqa/edit?html,js,output) – Ashish Patil Jun 15 '16 at 09:59

score 1 · Answer 4 · answered Jul 08 '20 at 08:20

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');

<!DOCTYPE HTML>
<html>

<head>
  <meta name="description" content="temp">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="UTF-8">

  <title></title>

  <script id="sap-ui-bootstrap" type="text/javascript" src="https://sapui5.ap1.hana.ondemand.com/resources/sap-ui-cachebuster/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-xx-bindingSyntax="complex">
  </script>

  <!-- XML-based view definition -->
  <script id="view1" type="sapui5/xmlview">
    <mvc:View controllerName="local.controller" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
      <App>
        <Page title="My View" id="page">
          <ScrollContainer
            height="200px"
            vertical="true"
          >
            <Table id="tableid" sticky="ColumnHeaders">
              <columns>
                <Column>
                  <Text text="column1" />
                </Column>
                <Column>
                  <Text text="column2" />
                </Column>
                <Column>
                  <Text text="column3" />
                </Column>
                <Column>
                  <Text text="column4" />
                </Column>
              </columns>
            </Table>
          </ScrollContainer>
        </Page>
      </App>
    </mvc:View>
  </script>


</head>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>

sap.m.Table - Vertical Scrolling with Fixed Header

4 Answers4

Linked

Related