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

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 2

[...] 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