How to use a custom renderer but still apply cellProperties?

Tags: #<Tag:0x00007f8b23582068>
#1

I’m trying to conditionally add some custom HTML to table cells, but it’s semi-random across the whole table and not specific to a given column. I also have a lot of other complex column config that I don’t want to re-write.

For example, my column definitions look like this:
{
data: “mass_density”,
type: “numeric”,
className: “input data other-things”,
format: “0[.][0000000000]”,
}

I see some of those values get passed into cellProperties in the custom renderer, but it seems like the custom renderer can only do DOM manipulation, and doesn’t support returning the cellProperties to pass them through. It also doesn’t seem like I can handle this in the cells option since that appears to only support returning the modified cellProperties. Thoughts?

#2

Hey @justinbretting

can you share a full input/ expected output example? When do you want to want to use it and how.

#3

I basically have 2 datasets. The first is the actual data that will appear in the table, and the 2nd is metadata indicating which of those cells are valid or not. The validation logic is handled server side so I don’t really want to rebuild that logic in the client. I can structure the data however is best to be used in HOT, but for example, we may have the following.

hotData = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
]

validationResults = [
[false, true, false],
[true, false, true],
[false, false, true],
]

For the cells where the validationResults are false, I want to add some custom HTML that I can use to indicate that those cells are invalid.

#4

What about something like this https://jsfiddle.net/bcnxz5yd/1/?

#5

Thank you for this - the problem with that fiddle is on line 14 because I’m not always using a TextRenderer. In fact, I have quite a bit of complexity in my column configuration, and I pass it in through the columns option, something like:

columns: [{
data: “mass_density”,
type: “numeric”,
className: "isInput ",
format: “0[.][0000000000]”
},
{
type: ‘dropdown’,
source: [‘yellow’, ‘red’, ‘orange’]
},
{
data: “tag”,
type: “text”,
className: "isOutput "
},
{
type: ‘numeric’,
numericFormat: {
pattern: ‘0,0.00 $’
}
}],

My understanding is that using the TextRenderer (or any other renderer) in the way demonstrated in the fiddle would likely override any configuration that’s specified in the format, className, type, and other column options, but please let me know if that understanding is incorrect.

Thank you again for your attention to this question :slight_smile:

#6

The text cell type doesn’t have a validator, so you can use the validationResults array without any issues. If you define cell as numeric

{
data: “mass_density”,
type: “numeric”,
className: "isInput ",
format: “0[.][0000000000]”
},

the following logic won’t work as Handsontable will force to use its own validator. Still. You could use a custom validator but it only allows to validate cells depending on their values - not coordinates.

#7

I think that I can close the topic as there are no additional questions. I hope that my last comment helped but if not feel free to open a follow up topic.

#8