Table row colour

Vaadin 6 / 7 / 8 Framework UI
1

Hi all I hope you are well. Is there a quick and easy way to disable alternate row colours for vaadin tables? I basically need all the rows in the table to have a white background. Thanks for your time.

2

You’ll need to create a custom theme (very simple, see
Chapter 8. of the Book of Vaadin
), and then add the following to the styles.css

.v-table .v-table-row,  .v-table .v-table-row-odd{
   background: white;
 }

Cheers,

Charles.

3

Thanks thats helpful, however I only want this rule to apply to a single table, not all tables in my app - is there an easy way to do that?

4

Yep; give your table a “stylename” using Component#addStyleName method, and then change the CSS to match the given stylename - e.g.

  UI Building Code: 
   Table table = new Table();
   table.addStyleName("no-stripes");

   syles.css:
 
  .no-stripes  .v-table-row,  .no-stripes  .v-table-row-odd {
     background: white;
   }

Cheers,

Charles.

1 Like
5

Perfect :slight_smile: thanks very much, I am still new to vaadin!

6

This is exactly what I’d like to do, but this is not working so well. I’m using Vaadin 7, so I’m trying this:
d

Page.getCurrent().getStyles().add(".no-stripes .v-table-row-odd {background: white;}"); 
myTable.addStyleName(".no-stripes");

UPDATE: I should use:

myTable.addStyleName("no-stripes");
7

Hi Phil w.
The code-snippet below should do the trick.

.v-table-row {
color: $blueLabel;
background: $whiteGrey;
font-weight: 400;
font-family: Trebuchet MS;
font-size: 14px;
}

.v-table-row-odd {
color: $blueLabel;
background: $whiteGrey;
font-weight: 400;
font-family: Trebuchet MS;
font-size: 14px;
}