how to set table columns width

Vaadin 6 / 7 / 8 Framework UI
1

Hi guys,

I have a table component with 5 colums
the tabe is set to accomodate the space given (setsizefull())

what 1 would like to do:

  • columns 2 to 5 have minimal width dictated by their content
  • I would like colum1 to shrink/expand to fill the excess space given in case I resize window/plit panel

How to achieve this?

2

Take a look at Table.setColumnExpandRatio(…) :wink:

3

I have seen setColumnExpandRatio(…) in the documentation, but I havent been able to find out how to properly use it to achieve exactly what I want

Can you show me a short code example, how to use setColumnExpandRatio(…) in my case?

Or is there any example among the downloadable example sources?

4

Hi!

I know it’s an old post, but maybe it’s useful to someone…
setColumnExpandRatio(“columnId1”, 1);
// the other columns’ expand ration leave alone

Bye
K

5

Specific problem here:

I have a table with strings in each cell.
These strings would need, say, 50px column width to be displayed fully.

table_1.setColumnWidth("Header", 20);

This doesnt work though. In fact, any value under the ‘minimum’ of 50 will not take effect.
Any ideas on how to solve this?

(The idea is, when the table is filled with data and rendered, I don’t want the horizontal scrollbar to appear - I’d much rather have all colums squeezed such that they all fit in the 200px wide table)

6

did u solve this issue? I’m interested in it too.

In my case, each column has by default an especific width. If the content exceeds that width, three dots are placed and the text isn’t fully shown.

Old Table class had the ability to manually resize columns’ width. Can it be done in the Grid?

7

jup, same here. I don’t want the scroll bar on the bottom.
All columns need to fit the contents and the less important columns need to shrink if it doesn’t fit on the page.

8

setColumnWidth works fine for me (vaadin 7.6.2).

Table tbList = new Table();
tbList.setWidth(“100%”);
tbList.setContainerDataSource(TascaDAO.getContainerPendentLj(dadesUsuari.getId()));
tbList.setVisibleColumns(new Object { “estat”, “prioritat”, “alta”, “id”, “titol”, “clienom”, “areadescripcio”, “nomabreujat”, “tiptnom” });
tbList.setColumnHeaders(new String { “Es”, “Pr”, “Data”, “Nº T.”, “Títol”, “Client”, “Àrea”, “Op” , “Tipus” });
tbList.setColumnWidth(“titol”, 100);

9

B"H
Hello,
I have same problem with Grid. not Table.
UX expert guide me to never allow the horizental scroll appear and instead squize the columns if needed.
I c no way excpet hooking some event and recaclulate all columns width myself.
Ideas?

10

That’s unfortunately pretty much how you’re going to need to deal with it, if you don’t want to to implement the squeeze columns feature in to Grid.

-Olli

11

This is more or less same issue when user squeeze himself the columns and get empty space at the right side of the grid.
For general users might looks like a bug. so I have to implemented to both cases.
attached screenshot from Grid example: https://vaadin.com/grid

same bug occurs while change content size, e.g. put Grid inside split layout. play with the split and Grid acts abnormaly.

My concern is less the implementation but the performance payment for doing such tricks. as sometimes I have 4-5 Grids at same page.

Thanks for you replly :slight_smile:

30611.png