Changing cell class name using setCellMeta not having any effect

[dave.stewart]

Hello,

It’s been a while since I posted!

I’ve been looking at this thread to get an idea on how to change the class of a cell:

Highlight cells based on value of another cell in the row

I have a table with a column called 'Sold'. Based on the value of 'sold', I need to highlight the cells in that row if the 'Auth' value is less than the 'Sold' value. In the screenshot, since 'sold' is 52, the next 12 cells would need to be highlighted. I have tried using cellProperties but I was unsuccessful. [image]

I’ve tried using the method setCellMeta this in the console, and nothing happens, and getting the cell meta shows no change:

Do I need to do this in a hook?

Do I have to manually rerender?

What am I missing?

Some information about the task: we are attempting to show “changed” cells from a previous edit, using an additional array of “updated” column names per row. We are already using a variety of renderers, so think changing the class of the cell would be the simplest, most scalable option.

Thanks

[dave.stewart]

It seems I can update other properties of the cell meta, but not className:

[dave.stewart]

I found this fiddle which seems to work:

I test setCellMeta with react handsontable. I want add className in selected cell

Please find the demo attached https://jsfiddle.net/5k7mjLw2/ I've added line 41. You only needed a call to the renderer. It is needed to repaint the table.

I’ve updated it with some more intuitive code and also added some checks to dump the cell meta.

https://jsfiddle.net/davestewart/0t5fyvg2/13/

This works as well.

We are using handsontable/vue@4.0.0 which apears to be using handsontable@7.0.0.

No idea why this isn’t working then

[dave.stewart]

OK, I’ve found the problem.

It seems the cells() table setting prevents additional classes being added when using setCellMeta():

• https://jsfiddle.net/davestewart/0t5fyvg2/27/

I tried getting the existing cell meta in the function using getCellMeta, but it throws Uncaught RangeError: Maximum call stack size exceeded which I understand now as this function is in turn called by getCellMeta.

Is there a way to get the “base” cell meta in this function?

Or is this a bug / limitation?

Or should I be doing something differently?

Thanks,
Dave

[aleksandra_budnik]

Hey Dave,

glad to see you back.

Yes, the render() method is needed to refresh the Handsontable and attach the className. And yes, cells option is rebuilding the table once it is rerendered so setCellMeta is overwritten.

I’ve made a similar example some time ago here https://we.tl/t-uvGfB1YU7Y (small project .zipped). You might find it useful.