Adding classname to renderer doesn't work with v14.2.0

Tags: #<Tag:0x00007f8b1d29a518> #<Tag:0x00007f8b1d29a3d8>
#1

Hi team,

I tried to use a renderer to a cell using custom component. I used the addClassNameWhenNeeded hook that you have before.

When I implement it, it seems like it doesn’t apply the classname to the fixed column.

import Handsontable from 'handsontable';

export type RendererProps = {
	TD: HTMLTableCellElement;
	value: any;
	cellProperties: Handsontable.CellProperties;
};

export const addClassWhenNeeded = (props: RendererProps) => {
	const className = props.cellProperties.className;

	if (className !== void 0) {
		Handsontable.dom.addClass(props.TD, className);
	}
};
#2

Hi @r.evangelio

It would be best if you could send a code demo where the problem is replicable, but can you tell me if the class is not applied at all to the cell, or just the CSS properties?

#3

As far as I checked, the classes where applied if you don’t specify the fixedColumnStart property. It seems like it doesn’t apply it within the cloned table.

#4

@r.evangelio

In this case you will probably need to add !important statement to the CSS properties to override the styling. Can you please check if that helped?

#5

I actually solved this by using the beforeRenderer hook.

export const beforeRendererCallback: AddClassesToCells = (TD, row, column, prop, value, cellProperties) => {
	const className = cellProperties.className;

	if (className !== void 0) {
		Handsontable.dom.addClass(TD, className);
	}
};
#6

@r.evangelio

Thank you for the update. I’m glad that you’ve found the solution. I will close this topic then.

#7