Dynamically change row color in ngx-datatable

user_1029088 0
Viewed 6102

I am using ngx-datatable with Angular 7. I need to update the table row color dynamically according to the color value which is comes with the data set.

I have tried rowClass feature. But it is not the what I am looking for.

How can I set the row background-color dynamically with color code in data set?

Here is the stackblitz

ngx-datatable angular
2 Answers

You were really close in your StackBlitz. All the rows were green because you were not deciding anything based on your row data. You were always returning true (which means it always uses the same class). If you return one or more class names based on a condition, you would get the desired result.

Classes

/deep/ .row-color1 {
    background-color: rgb(96, 212, 96);
}
/deep/ .row-color2 {
    background-color: rgb(51, 201, 228);
}

getRowClass() Typescript function

  getRowClass = (row) => {    
   return {
     'row-color1': row.gender == "Male",
     'row-color2': row.gender == "Female",
   };
  }

Here i am returning two classes based on two conditions. The ngx-datable API documentation says that you can return either an object or a string (the above example being an object returned).

I have created a new stackblitz with the fix (forked on yours)

user_2490970

I would not particularly focus on ngx-datatable package, but look into more general solutions, like here:

Generate dynamic css based on variables angular

So I would go with dynamic classes and then enhance the css with the needed colors.

user_121521510
Related