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

Congeries

I can't explain why, but defining the function like: getRowClass = () => {} solved the issue for me. Thanks a lot! – Cattier

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.

Footer

Awesome Zlatko, ViewEncapsulation.None is worked for me. but what does that mean? – Congeries

As per your detailed explanation, I understood what is ViewEncapsulation. but why I need to allow my css rules go around the app. If it happens, the components which have the same class name will get the same styles right? Can't we write that style as component specific. I don't want to other components to see that class name. – Congeries

The problem is that your data table does not see the style if you lock it to your component only. Try with the /deep/ selector solution, that one should work for you. – Footer

/deep/ is deprecated, ::ng-deep should be used instead. angular.io/guide/component-styles#deprecated-deep--and-ng-deep – Scramble

Answer 2

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

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

Epsom

thank you for your response, but didn't solve the issue. – Congeries

Really? It works fine in mine which is the exact same structure/syntax. – Epsom

Your 'material' class doesn't have any css that might override any row classes (row-color) you are providing, does it? – Epsom

Answer 3

Try adding your css in styles.scss in your root level src folder (besides index.html and main.ts).

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

When you add the styles with your component, it generates styles.....and..
TL;DR;

Reference:

1. https://scotch.io/tutorials/all-the-ways-to-add-css-to-angular-2-components
2. http://blog.ng-book.com/css-isolation-in-angular-2-components/
3. CSS is not working in my angular component

---

Update

Provide the style from parent to child selector.

i.e. if you are applying CSS for a cell, then give the selector like this

.ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell.row-color{
    background-color: green;  
}

PS: try providing this is you global styles.scss

Dockery

Hi Paritosh, still the same issue. Even stopped the server and started again. Thank you for your response. – Congeries

No Paritosh, I am getting styles for other elements, not getting only for ngx-datatable – Congeries

Paritosh, sorry, I am using a theme, so I added the class in theme css file. Then it is working. But I want to give style as component specific. If I give globally, whereever I use ngx-datatable, will get same styles. – Congeries

Answer 4

Try this:

[class.datatable-group-header-container] = "true"

[ngClass] = "{'datatable-group-header-container': true}"

Gerlac