CODEWITHSUNDEEP
angularngx-datatable
Bishan
Bishan

Reputation: 15710

Dynamically change row color in ngx-datatable

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

Upvotes: 4

Views: 9498

Answers (2)

James Poulose
James Poulose

Reputation: 3833

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)

Upvotes: 7

connectedMind
connectedMind

Reputation: 439

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.

Upvotes: 0

Related Questions