Ngx-datatable: Cannot apply styles to the rows

[mikekov]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
Datatable uses ViewEncapsulation.None, so I can apply styles to it. But body-row.component uses default encapsulation, and styles are ignored.

Say, I can change background color of the table:
.ngx-datatable.material { background: #444; }
but not rows:
.datatable-body-row { background: #665; } <- no effect

Expected behavior

I'd like to style rows in my app instead of modifying css styles in ngx-datatable release folder.
Note that even moving material.css from its location to my app folder is not going to wok.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Styling the grid, applying my own 'selected' color.

Please tell us about your environment:

VS Code, webpack-server.

• Table version: 0.7.x
  
  I checked sources, and they still use encapsulation, so yes.

• Angular version: 2.0.x
  

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  
  Chrome.

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[amcdnl]

Duplicate of many existing issues.

[mikekov]

OK. Any idea how to fix it properly?

[amcdnl]

Done in 7.0 :)

[mikekov]

Thanks, I'll wait impatiently.

[mikekov]

I have 7.0.0 up and running. With view encapsulation I cannot apply any styles to header and rows, just as before.
What am I missing?

[amcdnl]

I'm not implementing view encap. Check out the demo of virtual 10k, i show how to use the styles there.

[mikekov]

Thanks for reference. In case somebody is reading this...

To change grid style I put them in the app global css. For instance to change the header:

.datatable-header {
   color: $text-color;
   background-color: $active-background-color;
}

To modify rows:

.datatable-body-row {
   color: $dim-text-color;
   border-bottom: 1px solid $active-background-color;
   &:hover {
      background-color: $app-dim-selection-color;
   }
   &.active {
      color: $text-color;
      background-color: $app-selection-color;
   }
}

To change rows dynamically add [rowClass]="getRowClass" to your ngx-datatable and define getRowClass function:

getRowClass(row) {
   return { 'important-row': <condition>, ... <more classes as needed> };
}

[shiamalon]

@mikekov Thanks for your answer. I was feeling super stupid already.

[joshua-fogg]

If the above don't fix the issue then also try prefixing ::ng-deep onto your css selectors
ie:
::ng-deep .age-is-ten{ background : pink; height: 1000px; }
allows
getRowClass(row) { return { 'age-is-ten': row.procedureActionableProcedureID === "A100", } }
to target child and nested components / containers

[stkr89]

I'm not able to get access to current component's "this" object inside getRowClass(row) method. Any suggestions?

[deepaksomase]

@sumittokkar - we can access this (parent component) using arrow function. like
getRowClass = (row) => {
}

[frankdavidcorona]

This implementation works for me:
In my template:
<ngx-datatable #ngxDatatable class="my-data-table"...

In my SCSS file:
::ng-deep { .my-data-table { .custom-class { ...

In my component:
getRowClass(row) { return { 'custom-class': <condition> }; }

[Javaman2]

My solution:
I'm binding to an object which has a field named 'status', when an error happens that field is updated to "Error" when error happens.

HTML:

<ngx-datatable>
 [rowClass]="onGetRowClass"
</ngx-datatable>

TypeScript:

  onGetRowClass = (row)=>{
      if(row.status==="Error"){
         return "error";
      }
   }

CSS:

::ng-deep .error{
  background:red;
}

Works like a charm!

[james-poulose]

background:red
@javaman2 , @joshua-fogg
I am able to control the row's background color using rowClass, but not the text color.

::ng-deep .error{
  color:red !important;
}

The above style is just not getting applied! :-(