Cannot apply styles to the rows

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]

[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> };
}

[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