Style row/cell based on object property

Tags: #<Tag:0x00007f8b1cedaf18>
#1

Hello,

I’m trying to determine whether this is possible to accomplish with Handsontable.

I have an array of objects (representing a row of data) similar to this structure (sorry, can’t seem to find a way to indent code):
{
id: 1,
style: ‘warning’,
cells {
1: {
id: 1,
style: ‘highlight’
},
2: {
id: 2,
style: ‘’
},
}
}

I am needing to highlight a row based on the object “style” property and/or highlight a cell based on the “cells.ID.style” property. Ideally the entire tr in the above scenario would get a “warning” class, and the cell.1 td above would get a “highlight” class, where cell.2 td would not get a class specified.

These style properties change as the data/application is manipulated.

Any thoughts/ideas appreciated.

#2

Hey @jake.varney

Can you share your implementation? I do not know how many rows you have any if every column is visible.

You can use this demo as a sample https://jsfiddle.net/7k810dtw/

#3

Hello Aleksandra,

I have updated the fiddle with a functional data object, plus an expected results sample showing TR and TD with classes assigned based on the data model.

The table is built dynamically, so it could range from small to very large (width and height). Columns are not always visible.

One common case of the style/class changing is a user changing the value, which conflicts with something else. Our classes (for row and for cell) handle the logic, but we need a way to have hansontable reflect those “style” properties as they change.

#4

Can you send a demo with your recent progress and an issue scenario?

#5

Sorry, I forgot to include the updated fiddle.
https://jsfiddle.net/7k810dtw/9/

Thanks,
-Jake

#6

Thank you for sharing.

If you’d like to style the cells via cells method then you’d need to follow this rules https://handsontable.com/docs/6.2.0/Options.html#cells

You need to create an object of settings var meta = {} and then push the setting like meta.className.
If the data should relate to the value inside a cell then you can add an an IF statement.
if(hot.getDataAtCell(row, col)) where row and col are the parameters of the cells method.

#7