Wrapping of content in a table

Vaadin 6 / 7 / 8 Framework UI
1

Hi All,

First of all, congratulations on the excellent Vaadin framework. Developing web applications this way really is fun and productive!

I have a question regarding the Table component: When displaying a long text in a column, a horizontal scollbar appears below the table. How can we prevent the horizontal scrollbar for appearing but wrap the long text instead?

I provided some code which displays a Table which has two columns: name and description. The description column contains a very long line of text which I ideally would like to wrap.


package com.example.test;

import java.util.ArrayList;
import java.util.List;

import com.vaadin.Application;
import com.vaadin.data.util.BeanItemContainer;
import com.vaadin.ui.Table;
import com.vaadin.ui.Window;

public class TestApplication extends Application {
	@Override
	public void init() {
		Window mainWindow = new Window("Test Application");
		Table table = new Table();
		table.setHeight("100%");
		table.setWidth("300");
		table.setPageLength(0);
		table.setContainerDataSource(new BeanItemContainer<Person>(createTestData()));
		table.setVisibleColumns(new String[] { "name", "description" });
		mainWindow.addComponent(table);
		setMainWindow(mainWindow);
	}

	private List<Person> createTestData() {
		List<Person> persons = new ArrayList<Person>();

		for (int i = 0; i < 20; i++) {
			persons
					.add(new Person(
							"Name " + i,
							"This is a long descrptionThis is a long descrption This is a long descrption This is a long descrptionThis is a long descrption This is a long descrption This is a long descrptionThis is a long descrption This is a long descrption This is a long descrptionThis is a long descrption This is a long descrption"));
		}

		return persons;
	}

	public static class Person {
		private String name;
		private String description;

		public Person(String name, String description) {
			this.name = name;
			this.description = description;
		}

		public String getName() {
			return name;
		}

		public void setName(String name) {
			this.name = name;
		}

		public String getDescription() {
			return description;
		}

		public void setDescription(String description) {
			this.description = description;
		}
	}
}

Regards,
Jamie Craane

2

Hi Jamie,

table’s row height must be fixed for all rows in order to let lazy loading feature to work. I suppose, you can try the following in your situation:

  • use generated column with the Label for your column where you want the text to be wrapped
  • use fixed height for that label, which is enough to fit the number of lines you wish
  • adjust (if necessary) css for a Label to let it wrap the text

This way, all your rows should be the fixed height and also contain wrapped long lines.

Best,
Dmitri

3

Hi Dmitri,

Thanks for your answer. I did not follow you suggestions exactly but here is an example of how I made the text wrap in a table column:


public void init() {
		setTheme("mytheme");
		Window mainWindow = new Window("Test Application");
		Table table = new Table();
		table.setHeight("100%");
		table.setWidth("100%");
		table.setPageLength(0);
		table.setColumnWidth("title", 55);
		table.setColumnExpandRatio("description", 1);
		table.setContainerDataSource(new BeanItemContainer<Person>(createTestData()));
		table.setVisibleColumns(new String[] { "name", "description" });
		mainWindow.addComponent(table);
		setMainWindow(mainWindow);
		getMainWindow().getContent().setHeight("100%");
}

I explicitly set the width of the first column to 55 and gave the second column an expandratio of 1. I also added the following css declaration to my custom theme named mytheme:


 @import url(../runo/styles.css);

.v-table-cell-wrapper {
	white-space: normal;
}

Now, the text wraps nicely when you resize the table.

Regards,
Jamie

4

Вот на эту

../reindeer/styles.css

часть кода пишет: [quote]
WARNING: File D:\liferay\liferay-plugins-sdk-6.1.1\portlets\stepVaadin-portlet\docroot\WEB-INF\VAADIN\themes\mytheme/…/reindeer/styles.css does not exist
[/quote]

mytheme создал в проекте WEB-INF/VAADIN/themes/mytheme в ней свой файл styles.css в котором указанный тобой код. В init() написал setTheme("mytheme");

и нихрена не переносится. Ворнинг должен быть или нет? Или надо весь путь от диска писать или какие еще могут быть проблемы?

5

Thanks for the help Jamie!
However, is there a way of doing this with table.setPageLength(x), where x is non-zero?
I fear it is much more difficult.

Thanks

6

Got another solution if u setup your table yourself you can set:

table.addContainerProperty("myIdTest", TextArea.class, null);

So you can set the Item with an TextArea included. If the TextArea is configured right it’ll do all you need. (I’m using Vaadin 7)
(FYI → Setting the item: )


TextArea test = new TextArea();
test.setRows(3);
test.setWordwrap(true);
test.setValue("my very long String value with a lots of whitespaces");
test.setSizeFull();
test.setReadOnly(true);
table.addItem( new Object[] { test }, lineCounter);
7

Hi I encountered the following problem.
I add addGeneratedColumn

table.addGeneratedColumn("quest", (Table source, Object itemId, Object columnId) -> { String html = ((WorksOrderEntity) itemId).getHtml(); Label label = new Label(html, ContentMode.HTML); return label; }); Then I call method table.setCurrentPageFirstItemId(anyId);
Table scroll to wrong item !