Angular - Change column data colour

You are going to need to either set the class on each table cell in the column
OR
Use a CSS nth child on the <td> element to style the column.

Thanks for your comments.
I did something like this, but dont know if it is the best way.Can yout please comment.

 <ngx-datatable #table 
        class='material mrgn-all-md' 
        [columns]="columns" 
        [columnMode]="'force'" 
        [headerHeight]="50" 
        [footerHeight]="50" 
        [rowHeight]="'auto'" 
        [limit]="10" 
        [rows]='products'>

        <ngx-datatable-column prop="rawmaterial_name">
         <ng-template ngx-datatable-header-template>
           <span>{{'Raw Material'|translate}}</span>
         </ng-template>
         <ng-template let-row="row" ngx-datatable-cell-template>
            <span [ngStyle]="{'color': ' #7960d4'}">{{row.rawmaterial_name}}</span>
         </ng-template>
       </ngx-datatable-column>

      
       <ngx-datatable-column prop="dateofentry_1">
         <ng-template ngx-datatable-header-template>
           <span>{{'DATE OF ENTRY'|translate}}</span>
         </ng-template>
         <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.dateofentry_1  | jalali }}
         </ng-template>
       </ngx-datatable-column>

       <ngx-datatable-column prop="receiptno_1">
         <ng-template ngx-datatable-header-template>
           <span>{{'Receipt No.'|translate}}</span>
         </ng-template>
         <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.receiptno_1}}
         </ng-template>
       </ngx-datatable-column>

        <ngx-datatable-column prop="supplier_name_1">
          <ng-template ngx-datatable-header-template>
            <span>{{'Supplier'|translate}}</span>
          </ng-template>
          <ng-template let-row="row" ngx-datatable-cell-template>
             {{row.supplier_name_1}}
          </ng-template>
        </ngx-datatable-column>
    
        <ngx-datatable-column prop="rawmaterial_quantity_1">
          <ng-template ngx-datatable-header-template>
            <span>{{'Quantity'|translate}}</span>
          </ng-template>
          <ng-template let-row="row" ngx-datatable-cell-template>
             {{row.rawmaterial_quantity_1 | number}}
          </ng-template>
        </ngx-datatable-column>

        <!-- part2 -->
        <ngx-datatable-column prop="dateofentry_3">
         <ng-template ngx-datatable-header-template>
           <span>{{'DATE OF ENTRY'|translate}}</span>
         </ng-template>
         <ng-template let-row="row" ngx-datatable-cell-template>
            <span [ngStyle]="{'color': '#60d460'}">{{row.dateofentry_3  | jalali }}</span>
         </ng-template>
       </ngx-datatable-column>

       <ngx-datatable-column prop="receiptno_3">
         <ng-template ngx-datatable-header-template>
           <span>{{'Receipt No.'|translate}}</span>
         </ng-template>
         <ng-template let-row="row" ngx-datatable-cell-template>
            <span [ngStyle]="{'color': '#60d460'}">{{row.receiptno_3}}</span>
         </ng-template>
       </ngx-datatable-column>

       <ngx-datatable-column prop="mfg_name_3">
         <ng-template ngx-datatable-header-template>
           <span>{{'Manufacturer'|translate}}</span>
         </ng-template>
         <ng-template let-row="row" ngx-datatable-cell-template>
            <span [ngStyle]="{'color': '#60d460'}">{{row.mfg_name_3}}</span>
         </ng-template>
       </ngx-datatable-column>

        <ngx-datatable-column prop="supplier_name_3">
          <ng-template ngx-datatable-header-template>
            <span>{{'Supplier'|translate}}</span>
          </ng-template>
          <ng-template let-row="row" ngx-datatable-cell-template>
            <span [ngStyle]="{'color': '#60d460'}">{{row.supplier_name_3}}</span> 
          </ng-template>
        </ngx-datatable-column>
    
        <ngx-datatable-column prop="rawmaterial_quantity_3">
          <ng-template ngx-datatable-header-template>
            <span>{{'Quantity'|translate}}</span>
          </ng-template>
          <ng-template let-row="row" ngx-datatable-cell-template>
            <span [ngStyle]="{'color': '#60d460'}">{{row.rawmaterial_quantity_3 | number}}</span> 
          </ng-template>
        </ngx-datatable-column>

         <!-- part3 -->
         <ngx-datatable-column prop="dateofentry_2">
            <ng-template ngx-datatable-header-template>
            <span>{{'DATE OF ENTRY'|translate}}</span>
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
               <span [ngStyle]="{'color': '#33c9e4'}">{{row.dateofentry_2  | jalali }}</span>
            </ng-template>
         </ngx-datatable-column>

         <ngx-datatable-column prop="receiptno_2">
            <ng-template ngx-datatable-header-template>
            <span>{{'Receipt No.'|translate}}</span>
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
               <span [ngStyle]="{'color': '#33c9e4'}">{{row.receiptno_2}}</span>
            </ng-template>
         </ngx-datatable-column>

         <ngx-datatable-column prop="mfg_name_2">
            <ng-template ngx-datatable-header-template>
            <span>{{'Manufacturer'|translate}}</span>
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
               <span [ngStyle]="{'color': '#33c9e4'}">{{row.mfg_name_2}}</span>
            </ng-template>
         </ngx-datatable-column>

         <ngx-datatable-column prop="supplier_name_2">
            <ng-template ngx-datatable-header-template>
               <span>{{'Supplier'|translate}}</span>
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
               <span [ngStyle]="{'color': '#33c9e4'}">{{row.supplier_name_2}}</span>
            </ng-template>
         </ngx-datatable-column>

         <ngx-datatable-column prop="rawmaterial_quantity_2">
            <ng-template ngx-datatable-header-template>
               <span>{{'Quantity'|translate}}</span>
            </ng-template>
            <ng-template let-row="row" ngx-datatable-cell-template>
               <span [ngStyle]="{'color': '#33c9e4'}">{{row.rawmaterial_quantity_2 | number}}</span>
            </ng-template>
         </ngx-datatable-column>

        </ngx-datatable>
     </div>
  </div>
 </mat-card>
 </div>

Select allOpen in new window

Sorry Zolf - can you give me a hint and point out what part of the code I should be looking at?

test page : https://stackblitz.com/edit/ngx-datatable-responsive-demo-bdsccq?file=app/demo-component.ts

we use :

  setRowColor(x:any) {
     // console.log(this.rowIndex);
     return {
        'row-color-odd': this.rowIndex%2>0,
        'row-color-even': this.rowIndex%2==0 
     };    
  }

Select allOpen in new window

and [rowClass] :

      <ngx-datatable
        #myTable
        [rowClass]="setRowColor"

Select allOpen in new window

.row-color-odd {
  background-color: green;
}
.row-color-even {
  background-color: blue;
}

Select allOpen in new window

@leakim - I believe the request is about highlighting columns?

my bad, thanks @Julian

Thanks guys  for all the comments.
@Julian
You see, if you see my code where I have a commented Part 2 and Part 3. I want to show those col data in differnt colors. Now I was able to do that using ngstyle but only the text data. I want something similar to the demo link which I provided in my original question.
Basically, i want to be able to show different column in different colors to make user identity different datagroups easily.


@leakim971

Please see the screenshot, I dont want all rows to be coloured in 2 color sets.

@Zolf, I do understand the requirement. What I was asking was - out of the code you posted to help me quickly identify which block relates to the column you want to colour.

I am under a bit of time pressure so difficult to go through each line. If you say 

 <ngx-datatable-column prop="receiptno_3">

Select allOpen in new window

Is the column I need coloured we can go from there.

We have some options here
One is to set the colour on the element itself using a method similar to the one leakim suggested for the row, instead this would return a value based on whether the column should be coloured or not.

This is the way to go if you want the column colouring to be dynamic
So either
a) You want to be able to set a different colour depending on some internal condition
b) You want to be able to dynamically choose which column you want to colour.

If you always want to colour the same column with the same colour you can do it with CSS

tr td:nth-child(3) {
   background-color: blue;
}

Select allOpen in new window

To be able to give you the best answer - need a little more info on what your expectations are.

Lets say I want to high these 3 columns

 <ngx-datatable-column prop="rawmaterial_name">
         <ng-template ngx-datatable-header-template>
           <span>{{'Raw Material'|translate}}</span>
         </ng-template>
         <ng-template let-row="row" ngx-datatable-cell-template>
            <span [ngStyle]="{'color': ' #7960d4'}">{{row.rawmaterial_name}}</span>
         </ng-template>
       </ngx-datatable-column>

Select allOpen in new window

<!-- part2 -->
        <ngx-datatable-column prop="dateofentry_3">
         <ng-template ngx-datatable-header-template>
           <span>{{'DATE OF ENTRY'|translate}}</span>
         </ng-template>
         <ng-template let-row="row" ngx-datatable-cell-template>
            <span [ngStyle]="{'color': '#60d460'}">{{row.dateofentry_3  | jalali }}      </span>
         </ng-template>
       </ngx-datatable-column

Select allOpen in new window

<ngx-datatable-column prop="receiptno_3">
         <ng-template ngx-datatable-header-template>
           <span>{{'Receipt No.'|translate}}</span>
         </ng-template>
         <ng-template let-row="row" ngx-datatable-cell-template>
            <span [ngStyle]="{'color': '#60d460'}">{{row.receiptno_3}}</span>
         </ng-template>
       </ngx-datatable-column>

Select allOpen in new window

b) You want to be able to dynamically choose which column you want to colour.

I want implement this feature. I know before hand which columns to highlight

If you always want to colour the same column with the same colour you can do it with CSS

I dont have tr td in my code. I am using ngx-datatable which dont have tr td 

It does not matter that you are using the ngx-datatable you can still apply the same principle.

.datatable-row-group datatable-body-cell:nth-child(2) {
  background-color: blue;
}

Select allOpen in new window

If you want to do this as part of the rendering look at the GitHup sample from this page (https://swimlane.github.io/ngx-datatable/#css) [The link from your OP]

https://github.com/swimlane/ngx-datatable/blob/master/src/app/basic/css.component.ts

They have a clear example on how to set the class.
From the template.

<ngx-datatable-column name="Name"></ngx-datatable-column>
<ngx-datatable-column name="Gender" headerClass="is-gender" [cellClass]="getCellClass"></ngx-datatable-column>
<ngx-datatable-column name="Age"></ngx-datatable-column>

Select allOpen in new window

And in the component

getCellClass({ row, column, value }): any {
    return {
      'is-female': value === 'female'
    };

Select allOpen in new window

You can choose to add the class directly to the row or have it conditionally return a value. For instance the return could be a class that sets the colour based on some state variable in the component.

Thanks again for your time.

getCellClass({ row, column, value }): any {     return {       'is-female': value === 'female'     };

Select allOpen in new window

Infact I tried to use this, but it was working for rows with conditions.  

I tried something like this, to highlight all the cells for column rawmaterial_name.
Can you please see my code. I added the 'is-female' in my scss file for the component. but no luck
. Please guide me, Appreciate your help!!

    getCellClass({ row, column, value }): any {
    console.log("  row  ",row);
    console.log("  column  ",column);
     console.log("  value  ",value);
    return {
      'is-female': column === 'rawmaterial_name'
    };
  }

Select allOpen in new window

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

.is-female {
    background: pink;
  }

Select allOpen in new window

<ngx-datatable-column prop="rawmaterial_name" [cellClass]="getCellClass">
         <ng-template ngx-datatable-header-template>
           <span>{{'Raw Material'|translate}}</span>
         </ng-template>
         <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.rawmaterial_name}}
         </ng-template>
       </ngx-datatable-column>

Select allOpen in new window

What do the console.log's show?
When you inspect element do you see the class added to the cell?

@Julian,

spot on :) 
cheers mate, got it to work!!!

You are welcome.

also for some reason in the scss file I had to add this /deep/ like so.....what is this deep doing, any idea

/deep/ .is-female {
    background: pink;
  }

/* .is-female {
    background: pink;
  } */

Select allOpen in new window

The /deep/ pseudo class has been deprecated - it used to be for styling elements in child components.

Thanks very much!!

You are welcome.