Cannot get value of object in cellRenderer

Tags: #<Tag:0x00007efc65711ca0>
#1

Format of the data is
detailedData: [
{
address: {
value: “HouseName”,
color: “red”
},
mac: {
value: “12:e3:45:hh:gf”,
color: “red”
},
ip: {
value: “10.02.10.12”,
color: “green”
}
},
{
// same sequence goes here
}
]

now i want to display only mac and ip data in the table not address data.

hot1 = new Handsontable(container, {
data: detailedData,
columnSorting: true,
colHeaders: [“MAC”, “IP”],
columns: [
{data: mac.value, renderer: myRenderer}
]
});

function myRenderer(instance, td, row, col, prop, value, cellProperties) {
// What to write here and how can i access mac, ip object here so that i can set here only
innerText and style to the td element by using mac.color value and return it
}

and can we add pivot feature in the table?

#2

Hi @prita.rituraj

I would need to get more detailed list of requirements to help you with this query.

When it comes to the cell renderer

  • value is the data under the cell
  • td.innerHTML is what is shown in the cell
  • instance.getColHeader(col) will return the column name (MAC / IP)
#3

Hi @aleksandra_budnik ,

Can you tell me what i have to write in order to display mac and ip column with cell value as mac.value and color on the text will be mac.color. Same thing is required to display IP.

And for pivot mode :
I have attached the screenshot.Pivot
Baiscally want to display all column present in the table to perform some operation

#4

If I understand you correctly you do not need a custom cell renderer. Here’s an example https://jsfiddle.net/6sg8L05e/1/ when I display mac.color value is a cell.

The requirements related to pivoting sounds doable but would require a lot of investigation to confirm.

#5

@aleksandra_budnik
The colour that you have displayed in the cell needs to be apply on the mac.value i.e, 12:e3:45:hh:gf
So table will look like
image
and needs to apply font color on the text by using their object.color property say, mac.color and ip.color

#6

ok, so if you need the value instead of a color from the mac and ip objects then all you need to change is

 columns: [
    {data: 'mac.color'},
    {data: 'ip.color'}
  ],

to

  columns: [
    {data: 'mac.value'},
    {data: 'ip.value'}
  ],

(lines 22- 25)

Updated demo https://jsfiddle.net/j9kxhadL/

This task

and needs to apply font color on the text

Is more complex as it requires building classes that will contain the color values. You may use style.color for the implementation of cells, but it may be gone after rerendering.
You may also try to push the mac.color and ip.color values to the cell meta. Then you can use the setCellMeta method.

#7

@aleksandra_budnik
I have got the solution but the problem is it will work fine for single array element i.e, which contains only one element but as complexity of the object increases and and size of array it will be too much difficult to get color for every object

#8

Please join me on email @prita.rituraj and we will discuss some approaches suitable for your needs. Please use this email for communication support@handsontable.com and provide this ticket’s URL and your license ID.

Thank you in advance.

#9