Angular add css class to row (7.3)

Tags: #<Tag:0x00007efc72853340>
#1

Hi,

First question here (but certainly not last) ^^. There is an old subject about this here: Add a classname to row but I guess it is outdated.

I want to add some css class to some rows. I do it like this:

ngOnInit(): void {
const that = this;
this.dataset = ...;
this.tableSettings = {
  colHeaders: true,
  contextMenu: true,
  manualColumnResize: true,
  data: this.dataset,
  afterRender: (isForced) => {
    const hotInstance = that.hotRegisterer.getInstance(that.hotId);
    const cell = hotInstance.getCell(5, 0);
    cell.parentElement.className = 'cat';
  }
};

}

I wondered if there is a better way to do it? Also I am not sure about using the afterRender hook… basically, each time the data is reloaded, I need to set the CSS class.

Thank you for your help.

Vincent

#2

Welcome Vincent!

I recommend using cells method to add classes. Demo https://jsfiddle.net/xja06wL9/

#3

Hi Alexandra.

Thank you for your answer.

I think that cells, is handy to set the css class on cells. But for performance reasons, I was trying to set the class on the TR element (thats why I was accessing cell.parentElement).

I don’t know if there is a better way (i.e. more HoT-oriented)

Anyway thanks for your quick reply

#4

We usually operate on cells. However, if you want to get the max performance and the rows’ position do not change you can use CSS nth-child(n) like here https://jsfiddle.net/a0d6x97L/

#5