CODEWITHSUNDEEP
angularangular-materialngx-datatable
Sivakumar Tadisetti
Sivakumar Tadisetti

Reputation: 5051

ngx-datatable rowClass is not working

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

Upvotes: 8

Views: 15746

Answers (4)

zd.Zhang
zd.Zhang

Reputation: 1

Try this:

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

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

Upvotes: -1

Zlatko
Zlatko

Reputation: 19578

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.

Upvotes: 13

Paritosh
Paritosh

Reputation: 11570

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

Upvotes: 0

rrd
rrd

Reputation: 5957

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

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

Upvotes: 5

Related Questions