Vaadin 8 + Grid + custom rendered = blank grid

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 here,  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 !

Dave

Layout :
 
grid.addColumn(MacAddress::getValue, new MacAddressRenderer()).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 MacAddressRenderer extends AbstractRenderer<Object, Long> {

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

        super(Long.class, "");

    }

    @Override
    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 MacAddressRenderer  implements Renderer<Long> {

@Override
    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;

@Connect(com.LERP.MacAddressComponent.MacAddressRenderer.class)
public class MacAddressRendererConnector extends AbstractRendererConnector<Long> {
private static final long serialVersionUID = 6297059428539588111L;

    @Override
    public MacAddressRenderer getRenderer() {
        return (MacAddressRenderer)super.getRenderer();
    }
}

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