Vaadin table with column widths to fit content width

In Vaadin, HorizontalLayout gives each component exactly the space it needs, if there is enough, and no more.

However, in a table created with a BeanItemContainer, all columns have the same width. Since the table content is loaded dynamically, the width is different each time, and different PCs have different font sizes, we don't want to specify a fixed width in pixels.

How can we tell a row to behave like an html or HorizontalLayout table in that it gives each row the correct width, no more and no less?

+3


source to share


3 answers


You can try this with just a CSS rule:

.v-table td:last-child {
    margin-right:auto;
}

      



Chrome> = 4, Firefox> = 3.5, Opera> = 9.6, Safari> = 3.2, IE> = 9

+1


source


It seems to me that you are looking for the expansion factor. It works like an extension relationship HorizontalLayout.

Have a look at https://vaadin.com/api/com/vaadin/ui/Table.html#setColumnExpandRatio%28java.lang.Object%20float%29 for more information.

Table oTable = new Table();
oTable.addContainerProperty("First name", String.class, null);
oTable.addContainerProperty("Last name", String.class, null);
oTable.addContainerProperty(YEAR_PROPERTY, Integer.class, null);

oTable.addItem(new Object[] { "Nicolaus","Copernicus",new Integer(1473) }, new Integer(1));
oTable.addItem(new Object[] { "Tycho",   "Brahe",     new Integer(1546) }, new Integer(2));
oTable.addItem(new Object[] { "Giordano","Bruno",     new Integer(1548) }, new Integer(3));
oTable.addItem(new Object[] { "And this is a very very long cell", "Newton", new Integer(1643) }, new Integer(4));

oTable.setSizeFull();
oTable.setColumnExpandRatio(YEAR_PROPERTY, 1.0f);

      



Edit: if you set expandratio for one cell (like the last one), all the others just take their place. This might be a workaround for your requirement.

If you comment out the last added item, you can see that the first column only takes up the space it needs.

+3


source


setColumnWidth (-1) should activate autoscaling. Although this is usually the default (even with BeanItemContainers, so I'm surprised you don't see this behavior automatically. A related concept, it might be worth chasing setSizeUndefined (), which is a method of the Sizeable interface.

+3


source







All Articles