TreeTable Newbie questions

What determines how wide the TreeTable decideds to render itself? Mine is never wide enough, and the columns and never wide enough to show the data in the columns…

Basically I’m just using a Tabsheet, that adds a TreeTable to it once the date is selected…

Here is a screenshot of my application’s layout with the different layout pieces drawn on with MS Paint…

Vaadin 6 or 7?

The fix should be the same for both though: make sure that your treetable and every parent layout has setWidth("100%"); You can easily see what layout is the culprit with e.g. FireBug or the Chrome inspector.

Thanks, I have gotten alot more done on the layout now. I am using Vaadin 6.8.4 btw. I didn’t realize so much CSS was required to use Vaadin, but I’m trudging along to a first release.

However, I have two problems I can’t seem to get past.

I would like to shrink the amount of ident per tree node level.
I added this CSS to my custom CSS extension file:

.v-treetable-treespacer .wb-treetable-treespacer {
	/* defines the amount of indent per level */
	width: 2px;

Then I declare the TreeTable like this:

public class TreeTablePnl extends TreeTable {
	public TreeTablePnl() {

The layout looks fine if I have my browser maximized. But if I shrink my browser window size, no scrollbars pop up that would allow the user to move around and see the entire table…
The same thing happens if I hit CTRL-PLUS to make the text larger…Everything gets larger but no scroll bar on the table so the right side gets cut off…
Is this extra CSS I need to add or perhaps did I turn it off by accident with all my CSS hacking to get the negative numbers to be red? :slight_smile:

Attached an updated screenshot…The logout button and the “Logged in as admin” elements do slide with the browser window, I guess since they are small. I just need scrollbars to popup on the table…

Without seeing your code I can’t really make any suggestions. The amount of CSS you have to use is fully related to how much you want to change the default look; nothing strange there, I think :slight_smile:

Here is the TreeTable class:

package com.web;

import java.math.RoundingMode;
import java.text.NumberFormat;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.vaadin.ui.TreeTable;

public class TreeTablePnl extends TreeTable {
	private Logger log = LoggerFactory.getLogger(TreeTablePnl.class);
	private static final long serialVersionUID = -5956961166836640959L;

	public TreeTablePnl() {

		setCellStyleGenerator(new CellStyleGenerator() {
			private static final long serialVersionUID = -9150949781462681615L;

			public String getStyle(Object itemId, Object propertyId) {
				log.debug(itemId + ", " + propertyId);
				if (propertyId != null) {
					int row = ((Integer) itemId).intValue();
					String col = (String) propertyId;
					Item item = getItem(row);
					Property prop = item.getItemProperty(col);
					if (row > 1 && (!col.equals("Description"))) {
						if (prop != null && prop.getValue() != null) {
							Double val = Double.valueOf(String.valueOf(prop.getValue()));
							if (val < 0) {
								return "pnlcell2red";
						return "pnlcell2";
					} else {
						if (!col.equals("Description") && prop != null && prop.getValue() != null) {
							Double val = Double.valueOf(String.valueOf(prop.getValue()));
							if (val < 0) {
								return "pnlcell3red";
						return "pnlcell3";
				return null;

	protected String formatPropertyValue(Object rowId, Object colId, Property property) {
		// log.debug("formatPropertyValue: " + rowId + ", " + colId + ", " +
		// property.getType().getName() + ":" + property.getValue());
		if (property.getType().getName().equals("java.lang.Double") && property.getValue() != null) {
			// log.debug("desc: " +
			// getItem(rowId).getItemProperty("Description"));
			if (getItem(rowId).getItemProperty("Description").getValue().equals("Position")) {
				// do nothing
			} else {
				NumberFormat nf = NumberFormat.getCurrencyInstance();
				String val = nf.format(property.getValue());
				return val;
		return super.formatPropertyValue(rowId, colId, property);

Here is the content of the particular TabSheet that the Treetable goes on:

package com.web;

import java.util.Date;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;

import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.ComboBox;
import com.vaadin.ui.Component;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.PopupDateField;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window.Notification;
import com.vaadin.ui.themes.ChameleonTheme;
import com.windybay.web.TESAVaadinApplication;
import com.windybay.web.components.ErcotDailyPnlTree;
import com.windybay.web.components.TreeTablePnl;

public class ErcotScreen extends VerticalLayout {

	private static final long serialVersionUID = -7628227344065585756L;
	private Logger log = LoggerFactory.getLogger(ErcotScreen.class);
	private TESAVaadinApplication app;
	private Component activeComponent = null;

	public ErcotScreen(TESAVaadinApplication a) {
		app = a;
		try {
			Label emptyLabel = new Label("&nbsp;", Label.CONTENT_XHTML);

			HorizontalLayout header = new HorizontalLayout();

			// Create & set input prompt
			final ComboBox functionChoose = new ComboBox();
			functionChoose.setInputPrompt("Please select a function");
			functionChoose.addItem("Daily PNL");
			//functionChoose.addItem("Monthly PNL");
			//functionChoose.addItem("YTD PNL");

			// Create the PopupDateField
			final PopupDateField datetime = new PopupDateField();
			datetime.setDateFormat("dd MMM yyyy");

			Button goButton = new Button("Generate");
			goButton.addListener(new ClickListener() {
				private static final long serialVersionUID = -8106147525583452331L;

				public void buttonClick(ClickEvent event) {
					String chooseValue = (String) functionChoose.getValue();
					Date dateValue = (Date) datetime.getValue();
					log.debug("execute button pushed with: " + chooseValue + "," + dateValue);
					ErcotDailyPnlTree dataHandler = new ErcotDailyPnlTree(dateValue);
					TreeTablePnl pnlTree = new TreeTablePnl();
					//dataHandler class calls out to database and does alot of math, nothing UI related
					int pageLength = dataHandler.initTreeWithErcotAwards(dateValue, pnlTree);
					pnlTree.setColumnWidth("Description", 220);

					if (activeComponent != null) {
					activeComponent = null;
					activeComponent = pnlTree;


			Label l = new Label("No function selected");
			activeComponent = l;
		} catch (Throwable ex) {
			log.error("Throwable: ", ex);
			app.getMainWindow().showNotification("Exception " + ex.getClass().getName() + ":" + ex.getMessage(), Notification.TYPE_ERROR_MESSAGE);

Basically, after you click pick your date and click the generate buttton, i do removeComponent and addComponent to put the treetable onto the screen.

Nothing wrong with your code as far as i can see. Try the following: resize the browser window so that you should get scrollbars; then open up FireBug or Chrome inspector and go through the layouts to see which one is overflowing. That’s the layout you need to fix.