Grid and Valo Theme - adding regular Table component styles doesn't work

I was using the compact and small styles with the Table component.
​They don’t work in Grid component. Should I fill a ticket ?

grid.addStyleName(ValoTheme.TABLE_COMPACT); // "compact"
grid.addStyleName(ValoTheme.TABLE_SMALL); // "small"

Grid is a completely separate component from Table so they’re not “supposed” to work in a sense. That said, Grid should probably have its own set of style variants - you’re welcome to file an enhancement ticket.

I know it’s a complete different Component. Mi english might not be helping me.
Anyway based on this thread
https://vaadin.com/forum#!/thread/9304846/9371796
I created this enhancement ticket
http://dev.vaadin.com/ticket/16937#ticket

Hope it helps. Great work with the Grid Component.

While we are waiting for an out-of-the-box solution as per the ticket, here’s what you can do in the meantime.
In my theme file I do something like this:

.smallgrid .v-grid-body .v-grid-cell { line-height: 18px; // adjust to your needs font-size: 10px; // adjust to your needs } Notice how I only style the body of the grid, not the header (which also uses CSS class
v-grid-cell
). That’s because I had some bad experience with changing the height of the header row(s). It became garbled. I don’t have a need to change the header row as well so no problem for me leaving it out.

In any case, with the above I then do:

myGrid.addStyleName("smallgrid");

Voila!

Also see
https://vaadin.com/forum/#!/thread/10350972/
which has some more recipies.