Unable to apply classes to cells in angular app

Tags: #<Tag:0x00007efc646457a0>
#1

This looks a bit like a bug to me - but maybe I’m doing something wrong…

I’m trying to apply a class to a cell by settting the className property in the cells callback. The class is defined in the css of my angular 6 component. I can verify in the browser, that the class gets applied correctly to the cell, but it has no effect.

If I use one of HOT’s classes, it works.

Also I note that when I’m using the array syntax of the className property, then the classes are joined by comma instead of white-space.

I was able to reproduce these two issues with a simple sample application, which can be found here on StackBlitz.
A small ordinary table at the end of this sample proves that the class is actually defined and works.

Why is my class not applied on the HOT?

Any help would be greatly appreciated!
Robert

PS: I’m new to HOT and I love it!

#2

Hi @robert.hegner

and here is an example with Angular and cells method applying a className red to the first row https://stackblitz.com/edit/angular-5ykm8c-juz5wc?file=src/styles.css

#3

Thank you, this helps!

So the key points are:

  • The selector needs to include ‘.handsontable’, so for example .handsontable .red { background: #ee0000 } instead of .red { background: #ee0000 }
  • It seems to be required to define the classes on a global level. It doesn’t work if the class is defined in the component’s css. I still don’t really understand that part. Would be nice (from an encapsulation point of view) if it was possible to define the classes in the component’s css. So in your example: in ‘app/heroes/heroes.component.css’ instead of ‘styles.css’.

Also note that there is the other issue I mentioned (multiple classes concatenated by comma instead by space).

But anyway you helped me to the point where this is no longer a blocking issue for me - thank you!

#4

Yes, Handsontable has it’s own styles and some of them use important! so you can try to use it as well when defining a parent body .handsontable .yourClass won’t work.

When it comes to the CSS file structure I’ll ask the colleague who made the wrapper. Maybe it’d be better to allow the component’s CSS file to handle the styling of the table.

#5

I believe that we can close the topic as there are no new comment

#6