Coloring rows in the grid

[likou31]

Hello !
Sorry again for asking a new feature, just to know if it's possible or not.

Could it be possible, just like we can color the task, to color the column row at the right, each row having the possibility to have its own color ? I don't know, maybe the task could have a default property like the text one, being rowInfoColor or something, or maybe like the grid widget you develop also ?

Thanks in advance for your answer !

[bprucha]

I accomplished this using a custom cell component that generates an element with a className based on whatever logic you'd like to use for styling the row:

https://docs.svar.dev/react/gantt/guides/configuration/configure_grid/#adding-custom-html-content-to-cells

Then in the CSS you can target the row using the .wx-row:has(.your-custom-class-name) css selector. In my case I added the .wx-critical className to a cell if the task was calculated to be part of the critical path:

.wx-row:has(.wx-critical) {
  background-color: red;
  color: white;
}

If you're changing the background color you also probably want to target the selected row so it has a different color:

.wx-row.wx-selected:has(.wx-critical) {
  background-color: crimson;
  color: white;
}