Table cell wrap.

Hi,

is there any way in Vaadin to have a table with rows that wrap their content?
That leads to rows with different height.

I am willing to disable paging, buffering, column resizing whatever :slight_smile:

CSS white-space: normal; does not help. This breaks scrolling functionality. (See picture: I pressed end button; the position is wrong)

Thanks in forward.
12202.jpg

Yes, table has some problems with scrolling if the rows have different heights. The problem is that it’s unable to convert between view position in pixels and the row number. Otherwise
it should work ok
.

The alternative is to put the text in Label with fixed width, it should wrap. This requires that the column type is a Label or that you use GeneratedColumn.

If the table is not very big, you could solve the scrolling issue by disabling scrolling from the table (show all items) and putting it in a Panel, for example. That solution does have some issues though.

Many thanks for response, Marko.

Wrap without CSS does not work.

RE: The alternative is to put the text in Label with fixed width, it should wrap. This requires that the column type is a Label or that you use GeneratedColumn.

The code:
Table table = new Table();
table.addContainerProperty(1, Label.class, null);
table.addContainerProperty(2, Integer.class, null);
table.addContainerProperty(3, Label.class, null);
table.addContainerProperty(4, Label.class, null);

	table.setHeight("100%");
	
	mainWindow.getContent().setHeight("100%");
	mainWindow.getContent().setWidth("100%");
	mainWindow.setSizeFull(); //just to be sure
	for (int i=0;i<100;i++){
		Label firstLabel = new Label("a very long text with description. Really long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long  text.");
		
		if (i % 2 ==0)
			firstLabel = new Label("short");
		if (i % 3 ==0)
			firstLabel = new Label("not so short short short short short short short ");
		firstLabel.setWidth("100px");
		
		Label secondLabel = new Label("djioasdioasj asdio");
		
		if (i % 23 ==0 && i!=1){
			secondLabel = new Label("faljk fklasdj fajio jerio fjoeiarj fioe fjioaef faljk fklasdj fajio jerio fjoeiarj fioe fjioaef faljk fklasdj fajio jerio fjoeiarj fioe fjioaef faljk fklasdj fajio jerio fjoeiarj fioe fjioaef faljk fklasdj fajio jerio fjoeiarj fioe fjioaef faljk fklasdj fajio jerio fjoeiarj fioe fjioaef faljk fklasdj fajio jerio fjoeiarj fioe fjioaef faljk fklasdj fajio jerio fjoeiarj fioe fjioaef faljk fklasdj fajio jerio fjoeiarj fioe fjioaef faljk fklasdj fajio jerio fjoeiarj fioe fjioaef faljk fklasdj fajio jerio fjoeiarj fioe fjioaef faljk fklasdj fajio jerio fjoeiarj fioe fjioaef faljk fklasdj fajio jerio fjoeiarj fioe fjioaef faljk fklasdj fajio jerio fjoeiarj fioe fjioaef faljk fklasdj fajio jerio fjoeiarj fioe fjioaef faljk fklasdj fajio jerio fjoeiarj fioe fjioaef faljk fklasdj fajio jerio fjoeiarj fioe fjioaef ");
		}else{
			secondLabel = new Label("hdgfgd");
		}
		secondLabel.setWidth("100px");
		
		Button btn = new Button("More ...");
		btn.addStyleName(Reindeer.BUTTON_LINK);
		table.addItem(new Object[] {firstLabel,1,secondLabel,btn}, null);
	}
	
	mainWindow.addComponent(table);

Picture - no CSS = no wrap at all:
12203.jpg

Mmm ok, the “white-space: normal” seems to be required as it’s inherited by the Label. I made thisn
new example
, which seems to work at least in Firefox. I don’t know if there are problems with other browsers. There’s something odd with the scrolling, but it seems to works mostly.

That example has the same scroll-problem (FF, opera, chrome) like I’ve sent in the first post. Because it contains only one column the issue is not so obvious.

Only solution I’ve found is to use pagedTable (paginationBar…) with table.setPageLength(25). + CSS of course.

Hopefully Vaadin7 will have a table that will be fast enough for: table.setPageLength(getTableRowsCount(table));

I am surprised that Vaadin lacks such basic functionality → table with text wrap. There is no ticket for it. (just a request for API instead of CSS). Could you create one?

This table is so close to be perfect… :slight_smile:

Thanks,
Peter

The main problem is that to have proper scrolling, the table needs to know the height of each row. If the row height is fixed for all the rows, you can calculate the scroll position in pixels simply by multiplying the row number and row height in pixels. With variable-height rows, it would have to 1) render the rows, 2) store the information. Storing the heights of half-a-million rows would take 2 megabytes in the browser memory, and calculating those heights by rendering would take ages. Vaadin Table is as fast as it is because it only renders the visible area lazily.

So, we can be lucky that it works even a bit in some cases.

The other long-standing issue is the table height limit of about 10 (8? 16?) million pixels, which means limit of some 500-800,000 rows.

Perhaps the issues could be solved with a completely different rendering model for the table - one that doesn’t use a hugely high div element to get the scrollbar.