ngx-datatable rowClass is not working

Question

This question might have answers already as I have seen some, which were not helped me to solve the issue. My issue is rowClass in ngx-datatable is not working for me.

Datatable code - test.component.html

<ngx-datatable class="material" 
            [rows]="rows" 
            [columnMode]="'force'" 
            [reorderable]="reorderable"
            [rowClass]="getRowClass"
            (activate)="onActivate($event)">
            <ngx-datatable-column name="Cabinet Name" [flexGrow]="1">
                <ng-template let-row="row" ngx-datatable-cell-template>
                    <mat-icon class='folder-color'>folder</mat-icon>
                    {{ row?.cabinetname }}
                </ng-template>
            </ngx-datatable-column>
</ngx-datatable>

TS Code - test.component.ts

getRowClass = (row) => {
   return {
     'row-color': true
   };
}

SCSS Code - test.component.scss

.row-color {
    background-color: green;
}

In chrome developer tools, it is showing row-color class as added, but rows are not getting the green as background color. I don't know what is wrong with the above code. Please guide me the right way to solve the issue.

Note: I am working on Angular 5

Answer 1

The problem is that your .row-color is scoped to test component. You need to prefix it with /deep/ to break encapsulation:

/deep/ .row-color {
  background-color: green;
}

Alternatively, you can use ViewEncapsulation.None to have your CSS rules go around the app.

Or you need to put this rule somewhere in your global app styles (not bound to any one component).

Here's a working Stackblitz.

What ViewEncapsulation.None does means something like this:

Any css you write will be applied not only on your component, but to the whole context (page). If you Inspect element, you'll see on angular components that you have things like <span _ngcontent-c15>...</span>. So all the stuff on your component, angular marks with the attribute _ngcontent-c15 (or similar). Then all the styles from your component are not simply span, but rather span[_ngcontent-c15]. So if you paint your spans red, it won't leak to other components (they'd be e.g. _content-c16). ViewEncapsulation.None removes that attribute from your component CSS so it's valid all over the page.

Answer 2

Make getRowClass() a proper function and it will work:

getRowClass(row): string {
  return 'row-color';
}