Is there a way to add multiple classes using a render method?
I am trying to create a rather complex table and I am playing around with different functionality from the handsontable.
One thing I was hoping to achieve was to assign diff classes to the cell for styling. Thus, I am using renderers for various scenarios. Thing is when I assign a new class to a cell is like rendering it the first time.
Example:
const cellClasses = (row, col, prop) => {
const cellProperties = {};
if (col === 2 || col === 8 || col === 15) {
cellProperties.renderer = borderTest; // uses function directly
}
if ((row === 6 && col > 1) || (row === 12 && col > 1) || (row === 18 && col > 1)) {
cellProperties.renderer = bgTest; // uses function directly
}
return cellProperties;
};
function bgTest(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.className = 'testbg';
}
function borderTest(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.className += 'testborder';
}
Please disregard the logic. My concern on this issue is that if a cell meets both conditions, then it adds one class to the other.
A hacky way would be for me to do even more IF with a combination of both, but as my mesh gets more complex it gets much more difficult to maintain.
So my question is, is there an easy way to assign multiple classes to cells, but not at the same time.
source to share
In short, no, you cannot assign classes the way you describe, because Handsontable intentionally re-renders the entire cell on each iteration. There is every reason for this, mainly to reduce state errors.
It's not a bad idea to have more specific logic for defining all the renders needed for your columns, so I would say it's prudent (not a hack!) To come up with logic to define your columns declaratively. You might consider using something other than col indices to make your code more scalable. In our tables, we usually use column definitions stored in configuration files or generated from our internal services. Hope it helps!
source to share