Table: Dynamic pagesize

Is it possible to set table’s pagesize to be calculated from the height of a table?


We have a panel with vertical layout. We add two components to the panel:

  • form with search criteria
  • table with results

How to make this table expand to fill the rest of the screen without disabling paging mechanism?


Hi, and welcome to the forum!

I’m a little confused by your question: do you want the table to show all rows that the search returns, or do you want the table to be as high as the available space in the view?

For the former case, use Table.setPageLength(0). For the latter, set Table.setHeight(“100%”).

Thanks, Table.setHeight(“100%”) did the trick

I was trying to use Table.setSizeFull() but it wasn’t affecting table’s height.


I tried this but it didn’t quite work for me. Perhaps I got something wrong?

When I tried it, the pagesize of the table is still 15. I can place the table on a Panel and use the Panel’s scrollbars instead of the Table’s scrollbars, but then I lose the table headings when I scroll down.

If, for example, the table is to hold 200 rows, but there is enough room to display 30 visible rows at a time, I’d like the Table’s pagesize to dynamically adjust for 30 visible rows. How do I achieve this?

I’m using Vaadin 6.2.3.


get number of records/objects from your data source (we’ll call it datasourceCount)

        int plen = datasourceCount;
        if (plen > 30) {
            plen = 30;


This is very strange, setSizeFull() should be equal to setWidth(“100%”); setHeight(“100%”);

Sorry, I should have been more explicit in my description.

My table is placed within a SplitPanel, so the space it has available to display rows can vary if the user moves the splitter before the table is displayed. I have a similar issue if perhaps the application runs on a different screen resolution, i.e. the number of rows that can be displayed is not always predetermined. I therefore want to be able to dynamically determine how many rows can be visible and adjust the pagelength accordingly.

I was hoping setSizeFull() or setHeight(“100%”) would work, but after calling these methods the table still only displays the default of 15 rows.


Just wondering whether there are any further thoughts on this topic. I’d like my table to set its number of rows to fill the page, but setHeight(“100%”) in various places does no good.


Matthew Fleming

Matthew, I’ve found the behaviour seems to change with the level of layout nesting.

I can create, say, a VerticalLayout, add the table directly to it and set its expand ratio to occupy all the free space (setExpandRatio(table, 1.0f), and the page size becomes dynamic based on the amount of space it occupies.

However, if I add the VerticalLayout onto another previously created HorizontalLayout or VerticalLayout, then add the table, it no longer dynamically adjusts its page size.

I haven’t yet done extensive testing of this to determine exactly the conditions when it doesn’t work, but avoiding nesting so far works for me.

Hope that helps.

Should not be a problem if the outer HorizontalLayout or VerticalLayout has setHeight(“100%”); (or setSizeFull()) specified.

I still can’t get this to work.

My situation is: I have a main window. Within this window is a tabsheet. One of the tabs contains a CustomComponent. The composition root of the CustomComponent is a VerticalLayout, and the VerticalLayout contains a table. This is the table that should be able to resize itself.

I do setSizeFull() on the CustomComponent, then setHeight(100%) on both the VerticalLayout and the table. I’ve also tried setExpandRatio(table,1.0f) on the VerticalLayout. Maybe I need to do something to the TabSheet?

Elsewhere in my application I have a SplitPanel which contains a table. I thought that the SplitPanel could adjust its height to accommodate the table, but it looks like the height of the SplitPanel needs to be set manually. Is this correct? If it is, I thought I could get the number of rows in the table (from Container.size()) and the row height, and then calculate the necessary SplitPanel height. But it doesn’t look like the API contains a function for querying a table’s row height. I tried setting row height manually with CSS as in the Book of Vaadin

.v-table-components-inside .v-table-cell-content {
height: 54px;

but for some reason this doesn’t work for me.

Thanks very much for your help with these newbie questions. I’ve only been using Vaadin for a few days but despite these little frustrations I’m finding it to be an outstanding tool.


Matthew Fleming, MD
Fleming Dermatopathology

Working now.

I didn’t realize I had to do setHeight(“100%”) and getContent.setHeight(“100%”) on the application’s main window.
It was also necessary to do setSizeFull() on the CustomComponents that were being added as tabs to the TabSheet. This is in addition to setHeight(“100%”) on the VerticalLayouts that are the composition roots for the CustomComponents.

Matthew Fleming

I presume you don’t call Table.setPageLength() in this scenario and just let the component set the length based on its visible size, is that right? Very cool! Works nicely in a SplitPanel that can be user-adjusted as well as the browser height itself.

I have the same problem that the table only shown the default (15) lines.
I’ve put a VerticalLayout on the main Window, with some components and at the end a Table.
I’ve Table.setHeight(100%) but nothing… only those 15 lines…

My code is:

		Window mainWindow = new Window("Test Application");
		VerticalLayout mainLayout = new VerticalLayout();
		VerticalLayout cabecalho = new VerticalLayout();
		HorizontalLayout barraFerramentas = new HorizontalLayout();
		Table table = new Table("Table");
		table=fillTable(table);  // This puts some data on the table
		cabecalho.addComponent(new Label("cabecalho"));
		barraFerramentas.addComponent(new Label("barra"));


I’ve tried to put the table inside a Panel, VerticalLayout, HorizontalLayout but it allways keeps the same height.

Any help is very appreciated.
David Pinheiro

Maybe you’re seeing the same thing I was in
this post
(which I managed to solve right after I posted, argh).

The layout will split the space evenly among the components, even if some of them have fixed sizes. So you can set the sizes for each, including “100%” for the one(s) you want to expand to fill space, and then use this to tell the layout to expand it:

     mainLayout. setExpandRatio(table, 1);

I hope that helps.