Need Help - Display 2 data into one cell using customRenderer

Hello there,

I would like to ask about displaying multiple data in a cell using customRenderer. I tried to find many references but no good result / article appear.

Let’s say I have data such as below:

  var data = [{
    name: 'John Doe',
    project: 'Artificial Intelligent',
    language: 'Python',
    location: 'Japan'
  },{
    name: 'Nakamura',
    project: 'iOT',
    language: 'NodeJS',
    location: 'Japan'
  }];

and I want to create a table like below:

<table>
    <tr><th>Name</th><th>Location</th><th>Info</th></tr>
    <tr><td>John Doe</td><td>Japan</td><td>Artificial Intelligent<br>Python</td></tr>
    <tr><td>Nakamura</td><td>Japan</td><td>iOT<br>NodeJS</td></tr>
</table>

Name | Location | Info

John Doe | Japan | Artificial Intelligent **`<br>`** Python

Nakamura | Japan | iOT <br> NodeJS

Sorry, it’s hard to create a table in this message, but the point is I need to show multiple data from different key and combine them using <br> into third column. In the real case it will not only combining with new line but also modification of the html too.

The problem is, in my customRenderer function, it only sends the value of the column.

// my columns setting
.....
{
    data: 'language',
    editor: false,
    className: 'htMiddle',
    renderer: myCustonRenderer
},
.....		

// this is the custom renderer function. What should I write in ???????
function myCustonRenderer (instance, td, row, col, prop, value, cellProperties) {
	td.innerHTML = value + "<br>" + ???????;
    return td;
}

Thank you.

Hi @charleschristchan

Have you tried to use a Handsontable cell type? Or load another instance of Handsontable inside a cell?

At the first glance it sounds easier that create a custom renderer and if you create another Handsontable instance inside a cell you get more hooks for changes that in a standard HTML table.