sap.ui.table.Table "VisibleRowCountMode.Auto" mode does not work

Question

I'm having trouble setting the number of rows for a table to automagically fill the available estate of its encapsulating container.

According to the API, setting the visibleRowCountMode property to sap.ui.table.VisibleRowCountMode.Auto should render the table to

"[...] automatically fills the height of the surrounding container. The visibleRowCount property is automatically changed accordingly. All rows need the same height, otherwise the auto mode doesn't always work as expected."

I have used the following code:

var oTable = new sap.ui.table.Table( {
    rowHeight           : 30,
    height              : "100%",
    // The below property is seemingly ignored... What did I do wrong?
    visibleRowCountMode : sap.ui.table.VisibleRowCountMode.Auto
});

...but as you can see in this jsbin example http://jsbin.com/vazuz/1/edit it just shows the default 10 rows, and certainly doesn't "change the visibleRowCount property accordingly" :-(

Anyone has a solution? Thanks in advance!

=====================

EDIT: Thanks to @matz3's answer below, I was ultimately able to solve this issue.

Setting the surrounding container DIV to 100%, this seems to be ignored. Setting it to a fixed height, however, worked just fine. But what I really wanted, if a user resized the window, the number of available rows needs to be adjusted accordingly. Setting it to a fixed height is therefor not an option...

However, the trick was in some extra CSS: not only the DIV needed to be set to 100% height, also both BODY and HTML (!!) needed to have a height set to 100%:

html, body {
  height: 100%
}

div#uiArea {
  height: 100%
}

Now, the table spans the full height of the available viewport, and resizing the window adjusts the table rather nicely. See the final working solution here: http://jsbin.com/bosusuya/3/edit

Matz3, thanks for your help!

Answer 1

[...] automatically fills the height of the surrounding container [...]

Your surrounding container is the view, so you have to set the height of it also to a value (e.g. 100%)

this.setHeight("100%");

And your view will be set into the uiArea-div, so this one also needs a height (e.g. 500px)

<div id="uiArea" style="height:500px"></div>

With these changes it now works as expected

Answer 2

CSS hacks is a dirty way. In my application I use to bind visibleRowCount to Array.length For example, if you have model with this data:

[{firstName: 'John', lastName: 'Smith',
{firstName: 'David', lastName: 'Ericsson'}]

You can bind to Array property length like this:

var oTable = new sap.ui.table.Table({
  visibleRowCount : '{/length}'
})

Answer 3

I'm with the same issue. I "resolve" that in this manner. This is not perfect, but it's better than UI5 resizing...

  _resizeTableRow: function () {

        var oTable = this.getView().byId("referenceTabId");
        var sTop = $('#' + oTable.getId()).offset().top;

        var sHeight = $(document).height();

        //if there a row, you can take the row Height
        //var iRowHeight = $(oTable.getAggregation("rows")[0].getDomRef()).height();

        var iRowHeight = 40; 

        var iRows = Math.trunc((sHeight - sTop ) / iRowHeight);

        oTable.setVisibleRowCount(iRows);
       },

Answer 4

Other option is to put the Table in sap.ui.layout.Splitter: