Style icon in TreeTable


I am on Vaadin 6.7.5 and I am trying to style a tree table. I have various things I’d like to style:

  • background color of “first level” row"
  • background color of selected row
  • background color on hover
  • icon to use when the node is collapsed
  • icon to use when the node is expanded

I have a select list in the upper left corner of my demo. Basically there is property change listener that set the style of my treetable

I have added this to my CSS to try

test-simple .v-treetable .v-treetable-node-closed {
background: url(…/foo/arrow-right.png) right center no-repeat;

test-simple .v-treetable .v-treetable-node-open {
background: url(…/foo/arrow-down.png) right center no-repeat;

These images do not exist, I just want to check what happens. When I change the value in the drop-down list, I can see the div containing the tree table has the style I am expecting

“v-table v-table-test-simple test-simple v-treetable”

The individual elemenst do not have the test-simple style.

The styling does not have any effect. If I remove “test-simple” in my CSS, I get the expected result (in this case, no icon at all)

Any pointer to give tips to debug that kind of situation would be much appreciated. I am complete newbie to CSS and I have no idea where to look for. I thought #7832 is similar to my problem but I can’t get it to work. Should I add the style somewhere else than treetable? How to debug that?


A similar question is the strategy to style things like the first level of the tree (considering the tree has one root and it has level 0).

I could of course browse the underlying hierarchical container for “all level one” item and assign a style to these. And then use that style name in CSS. But that feels “weird” because browsing the container completely defeats the fact it can lazy load stuff from me. And that would be probably very inefficient.

Can we use something similar to “row” and “row-odd” for these?

Answering myself: use CellStyleGenerator to add style to rows and cells.


I thought you had already answered to yourself so I passed to the next topic… Sorry.

To the CSS question in the first post, if test-simple is a class (style name) then it needs to be prefixed by a . in css (test-simple → .test-simple)
Then, if 2 classes are applied to the same node, in CSS there is no space between them (.test-simple .v-treetable → .test-simple.v-treetable) otherwise it means “a node with the v-treetable class as descendant of a node with the test-simple class”

For more details see
this tutorial
(part “Multiple classes within one attribute” in this case)

Thanks a lot. That did te trick !