updateRender with custom value

Tags: #<Tag:0x00007efc6d53ccd8> #<Tag:0x00007efc6d53c710>
#1

Hello,
I have a table using custom renderers.
I’m matching certain rows using searchPlugin.query.
For each cell in row, I wish to append unique HTML (without changing data). Is it possible to call a second renderer and pass it a variable?

Currently using setDataAtCell, but it’s causing data to change.
Cell already has a renderer, but I wish to prepend additional HTML to certain cells to notify the user of previous values.

I cannot find a solution. Thank you.

#2

Hi @jcousineau

A cell in Handsontable can be associated with only one renderer at a time. However, it is possible to attach custom cell metadata to the cell and utilize the logic within your existing renderer.

Here is an idea

function RowRenderer(instance, td, row, col, prop, value, cellProperties) {
  Handsontable.renderers.HtmlRenderer.apply(this, arguments);
  td.style.fontWeight = 'bold';
  td.style.color = 'green';
  

  if(cellProperties.url){
  console.log('go!')
  	td.innerHTML = `${value}: <a href="${cellProperties.url}" target="_BLANK">LINK</a>`
  }
}

The renderer changes the visual side of the cell, and if it reads that a cell has a cell meta property called url then it attaches a link based on the value of the url.

Here’s a working example https://jsfiddle.net/handsoncode/jL8oxd03/1/

#3

Thank you! I’ve been struggling for a long time, and your solution works!
I had no idea you could attach custom cell metadata. Your JSFiddle example was most helpful!
This works! Thanks!

#4

I am more than happy that I could help :slight_smile:

I will allow myself to close this thread but feel free to create a new one if needed.

#5