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

I can't explain why, but defining the function like: `getRowClass = () => {}` solved the issue for me. Thanks a lot! — dave0688, Oct 14 '20 at 07:34

Zlatko · Accepted Answer · 2018-03-28T11:12:16.840

13

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.

edited Mar 28 '18 at 11:12

answered Mar 28 '18 at 10:50

Zlatko

18,936
14
70
123

Awesome Zlatko, ViewEncapsulation.None is worked for me. but what does that mean? – Sivakumar Tadisetti Mar 28 '18 at 11:00
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. – Sivakumar Tadisetti Mar 28 '18 at 11:49
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. – Zlatko Mar 28 '18 at 14:38
/deep/ is deprecated, ::ng-deep should be used instead. https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep – Boat Nov 02 '21 at 12:32

score 4 · Answer 2 · answered Mar 28 '18 at 10:18

4

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

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

answered Mar 28 '18 at 10:18

rrd

5,789
3
28
36

thank you for your response, but didn't solve the issue. – Sivakumar Tadisetti Mar 28 '18 at 10:20
Really? It works fine in mine which is the exact same structure/syntax. – rrd Mar 28 '18 at 10:22
Your 'material' class doesn't have any css that might override any row classes (row-color) you are providing, does it? – rrd Mar 28 '18 at 10:25

Paritosh · Answer 3 · 2018-03-28T10:38:28.557

0

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:

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

edited Mar 28 '18 at 10:38

answered Mar 28 '18 at 10:27

Paritosh

11,144
5
56
74

Hi Paritosh, still the same issue. Even stopped the server and started again. Thank you for your response. – Sivakumar Tadisetti Mar 28 '18 at 10:32
No Paritosh, I am getting styles for other elements, not getting only for ngx-datatable – Sivakumar Tadisetti Mar 28 '18 at 10:34
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. – Sivakumar Tadisetti Mar 28 '18 at 10:42

score -1 · Answer 4 · edited Aug 28 '19 at 07:28

-1

Try this:

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

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

edited Aug 28 '19 at 07:28

Elletlar

3,136
7
32
38

answered Aug 28 '19 at 07:06

zd.Zhang

1

ngx-datatable rowClass is not working

4 Answers4

Update