Adjust table page length depending on parent's height

I have a VerticalLayout and in it, first a search TextField and under it the Table with results.

The problem I have is that I cannot set all the table rows visible without need to scroll down from the VerticalLayout’s scroll bar.

I want the table rows count to be adjusted to how many are needed so that there won’t be any scrolling from the VerticalLayout but only from the table’s scroll bar, of course. I need it to be adjusted to the available room each screen gives.

On my current monitor, when the table appears, the page lenght is 15, probably calculated based on the parent’s height. Although I only see 14 rows and to see the 15th, I need to scroll down from the VerticalLayout’s scroll bar, just a bit. If I scroll down from the table’s scroll bar, the rows do scroll down, but the last row will be hidden if I don’t scroll down from the VerticalLayout’s scroll bar.

I paste my code:

public void enter(ViewChangeEvent event) {

        UI.getCurrent().getPage().setTitle("Terminals");
        setMargin(true);
        setSpacing(true);

        terminalsList = dao.getAll();
        dataSourceContainer = new BeanItemContainer<TerminalDepositLimit>(TerminalDepositLimit.class);
        dataSourceContainer.addAll(terminalsList);
        
        initSearch();
        initTerminalsTable();
    }

    private void initTerminalsTable() {
        terminalsTable.setContainerDataSource(dataSourceContainer);
        terminalsTable.setWidth("100%");
        terminalsTable.setSelectable(true);
        terminalsTable.setColumnCollapsingAllowed(true);
        terminalsTable.setColumnReorderingAllowed(true);
}

Hi!

About the pagelenth, the default is 15. Setting this to zero will always load all the rows and there will be no lazy loading. For very big tables, this is not a good idea.
If you want the table to be scrollable instead of the outer layout, you would want to make the outer layout fixed height or 100% (it is undefined by default, which means it will shrink as much as it can). In order for the table height to grow with the parent height, set the table to 100% height and it will take as much space as it can. If there is not enough space for all the items, a scrollbar will appear. If you also have a textField inside the layout, you should do a layout.setExpandRatio(table, 1) to let the table be the component that takes all the space (to not divide the space between table and the text field evenly)

Thank you Johan.
It worked. I tried setting the parent to 100%, I tried setting the ratio, but I didn’t try both together.

Ok, good it helped :slight_smile: