Thanx, Peter. I’m already givin’ it a try. It seems this is just what I was lookin’ for. 
I’m pretty new to Vaadin, hit this problem and thought I would share a CSS only solution that also provides the ability to add icons.
.grid {
table {
td:nth-child(2) {
button {
height: 24px;
color: #ecf2f8;
border-radius: 4px;
border: 1px solid #1362b1;
border-top-color: #156ab3;
border-bottom-color: #1156a8;
background-color: #197de1;
background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
-webkit-box-shadow: inset 0 1px 0 #4d98e6, inset 0 -1px 0 #166bca, 0 2px 3px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 #4d98e6, inset 0 -1px 0 #166bca, 0 2px 3px rgba(0, 0, 0, 0.05);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
padding: 0 11px;
font-weight: normal;
font-size: 11px;
&:before {
content: "\f06e\00a0";
font-family: FontAwesome;
font-weight: normal;
}
}
}
}
}
Using td:nth-child(2) you can target any given button within that column. Feels a little easier than messing with extending an new renderer.
Another way of doing it is adding a style generator to a grid column like .setStyleGenerator(c → “some-style”)
and then in CSS adding .v-grid-cell.some-style button {}.
Hi, how can i add a button hover a Grid? Like a Circle which will open a Create Item dialog?