Wrapping of content in a table

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

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

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

Вот на эту

../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");

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

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

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);

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 !