Vaadin 8 + Grid + custom rendered = blank grid


I have a vaadin8 grid which works perfectly fine when I use a built in Renderer, for ex:

grid.addColumn(SomeDto::someDate), new com.vaadin.ui.renderers.DateRenderer()).setCaption("someDate);

But if I try to implement my own Rendered I get a blank grid, no column, nothing - just the scroller.

I even tried and copy-pasted the content of
into a new my.sample.DataRendererCopy and used it like this:

grid.addColumn(SomeDto::someDate), new my.sample.DateRendererCopy()).setCaption("someDate);

No luck.

Happens on todays Vaadin 8.0-SNAPSHOT (8.0-20170127.010204-148)

Any ideas?

Ok, my bad.

What I was looking for was a simple ‘converter’ to convert from Date to String.

Looking at the docs a renderer is responsible for rendering on client side, requires a client side rendered and a connector. Overkill for my needs :slight_smile:

What is the vaadin8 way of doing a custom .toString?
Instead of packing the conversion into the addColumn lambda obviously…

Well, I am facing the same problem …
I am trying to develop a custom grid column renderer that will simply render a Long value to a MAC Address String format as aa:bb:cc:dd:ee:ff.

I was looking first at a conveter as k. mentioned above but with Vaadin 8.0.6 I coudn’t find a way to add a converter to a grid coloumn - is there a way to do so ?

Then, following the explanation
, I was trying to develop a renderer ( see code below ), but all I get is an empty grid.
When looking into the data that is sent to the browser, I do see the JSON records with the right data rendered correctly, but the grid component itself is empty.
I did compile the client side and included the vaadin-client module in my pom.

Please help ?

Many thanks !




grid.addColumn(MacAddress::getValue, new [b]
/b).setCaption(“MAC Address”);

Server Side :

package com.LERP.MacAddressComponent;

import com.LERP.utils.MACAddress;
import com.vaadin.ui.renderers.AbstractRenderer;

import elemental.json.JsonValue;

public class
extends AbstractRenderer<Object, Long> {

private static final long serialVersionUID = 634108443890642623L;
public MacAddressRenderer() {

    super(Long.class, "");


public JsonValue encode(Long value) {

    if (value == null) {
        return super.encode(null);
    } else {
        return super.encode(MACAddress.valueOf(value).toString(), String.class);



Client Side :

package com.LERP.MacAddressComponent.client.MacAddressRenderer;

import com.vaadin.client.renderers.Renderer;
import com.vaadin.client.widget.grid.RendererCellReference;

public class
implements Renderer {

public void render(RendererCellReference cell, Long data) {
cell.getElement().setInnerText(“Redner Something here …”);

The connector :

package com.LERP.MacAddressComponent.client.MacAddressRenderer;

import com.vaadin.client.connectors.grid.AbstractGridRendererConnector;
import com.vaadin.shared.ui.Connect;

public class
extends AbstractRendererConnector {
private static final long serialVersionUID = 6297059428539588111L;

public MacAddressRenderer getRenderer() {
    return (MacAddressRenderer)super.getRenderer();



The easiest way to do Conversions in Vaadin Grid Columns is to apply the conversion either directly to the ValueProvider for the column: grid.addColumn(item -> getMacStringFromLong(item.getLongMacAddress())); or if you want to edit the Long value as is and have the MAC address only rendered in 8.1 you can do:

grid.addColumn(Item::getLongMacAddress, longMac -> getMacStringFromLong(longMac)); This will have the Column typed to Long and editing will be based on the Long value, the visual representation is the String returned from the [font=courier new]
given to a default
. If you want to use some other renderer (like
) you can provide that as the third parameter.

Hope this makes it easier for you to display your data the way you want to!


And about the custom renderers. You need to have a client-side implementation of the renderer connector and instructions on how to render your data on the client-side as well. We have a few examples out there as well as some add-ons that contain custom renderers. To implement your own, I’d recommend taking a good look at
this renderer collection

ThanksTeemu. This is exactly what I did eventually and it worked like a charm