How to set custom color of table row without previous css style

Hello everybody,

I have one question. I use Table component to show some data. It all works OK.
Then, I override setCellStyleGenerator method to apply custom css class to certain rows (basicaly background color of a table row). And it works fine for any predefined css class.

But, in this case I have a bunch of custom colors that depend on table row content, and is there any way to set html style values of table row without using predefined css classes?

Thanks in advance,

You can put CssLayouts in the table cells and override the getCss() to return style properties for the cell, as is done
in this example
. Well, that doesn’t actually style rows, just cells, so it’s a bit limited in that way.

It’s not actually CSS injection (which you could also do); the method simply returns the value of the HTML style attribute for the CssLayout element.

Thank you for prompt reply Marko,

I am new to Vaadin, so as much as I see that example you pointed to is exactly setting custom background color of table cell without predefined css style, I am not sure how to connect CssLayout to actual Table, since it’s filled with data from an SQLContainer.
Which metod of such table should I override to use my CssLayout class with overriden getCss method?

Or there is some other way I still don’t see?

What should you recommend?

Ah, hmm, then it is more complicated.

If we are talking about non-editable Table, you could have a Converter<String,CssLayout> and set such converter for each property (column) in the table that you want to adjust the colors for. However, a converter only gets a value to be converted and doesn’t know anything about the item to which the value belongs… So you wouldn’t have the necessary information for setting the color in the converter. So, using a converter doesn’t look promising.

A ColumnGenerator, on the other hand, does get the item and property ID for each cell to be generated, which should make the coloring logic feasible. So for each column that you want colored, set a ColumnGenerator with the same property ID as the column (so that it hides the original one) and return CssLayout components in the generateCell() method. The data value probably should be shown in a Label.

So that’s maybe the recommended solution for a read-only table.

You could also put the table in editable mode, wrap the CssLayout components inside a CustomField (together with Labels or read-only TextFields), and return those in the TableFieldFactory. That would actually be necessary if you want the values to be editable; if read-only is enough, the CustomField can have some read-only type such as Label for displaying the values; for editing it has to be TextField or other field type.

…or just make enough appropriate style names for different colors and return those in a CellStyleGenerator… If we are talking about a reasonable color palette, that’s not too terrible.

Thanks again Marko for such detailed recapitulation.

To “narrow things down”, it is read-only table.

After your previous post I did some research of my own, and I noticed Table.RowGenerator interface.

Maybe that would be most appropriate to use, but I cannot find any example how to implement it, and how to encorporate custom style into resulting GeneratedRow…

If you can help me with this, it would be most helpfull.

About size of color pallete, well it is not so big in particular, but it must be “user definable”, so any user can set different custom colors for it’s pallete, so any 3-byte value read from database is to be applied as background color of particular row…