Adding custom cell renderers in pe:sheet

Question

I am trying to implement a custom cell renderer to the pe:sheet component.

As this component is based on Handsontable, I tried the approach as described here: https://handsontable.com/docs/6.2.2/demo-custom-renderers.html

I also changed the code for registering from Handsontable.renderers.registerRenderer('myRenderer', myCustomRenderer); to this.cfg.renderers.registerRenderer('myRenderer', myCustomRenderer); in an attempt to access the instance of handsontable inside pe:sheet.

I am calling my sheetExtender via the extender attribute of pe:sheet.

function sheetExtender() {
//    this.cfg.renderers.registerRenderer('myRenderer', myCustomRenderer);
//    Handsontable.renderers.registerRenderer('myRenderer', myCustomRenderer);    
    console.log(this);
}

var myCustomRenderer = function (instance, td, row, col, prop, value, cellProperties) {
    $(td).empty().append('TEST');
};

Adding 'myRenderer' to the colType attribute of a pe:sheetcolumn, I would expect the column values to be overwritten by 'TEST'.

When I use 'this.cfg...' I get an Uncaught TypeError: Cannot read property 'registerRenderer' of undefined.

When I use 'Handsontable...' I don't get the error, but no results either, as, I guess, this approach propably didn't add the renderer to the actual instance of handsontable.

Is there a way to add custom cell renderers in pe:sheet, or at least make a cell render HTML?

Answer 1

I am the author of pe:sheet. If you want to customize the renderer you can do the following...

This is where it happens in the component: https://github.com/primefaces-extensions/core/blob/master/src/main/resources/META-INF/resources/primefaces-extensions/sheet/1-sheet.js#L59-L116

You can just override the default TextCellRenderer with your own.

function sheetExtender() {
   this.cfg.textCellRenderer = function (instance, td, row, col, prop, value, cellProperties) {
        Handsontable.renderers.HtmlRenderer.apply(this, arguments);

        // call your custom renderer method here
        myCustomerRenderer(instance, td, row, col, prop, value, cellProperties);
   }    
}