RowClass not working with "material striped" theme

[cvsdev]

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, post on Stackoverflow or Gitter

Current behavior

I am using a Table with single Selection and striped material theme, but I want to highlight some special rows.

I tried to use rowClass but it did not work together with the theme. The light gray rows arent't formatted with the "rowClass" style.

Expected behavior The "rowClass" Style overwrites the "striped" RowStyle

Reproduction of the problem https://plnkr.co/edit/q3Tv2EdrAOKNwc06czm2?p=preview

What is the motivation / use case for changing the behavior? Using the rowClass Style to hightlight Rows

Please tell us about your environment: Windows 10 - VS Code

• Table version: 10.2.3

• Angular version: v4.4.4 (see plunker)

Chrome - actual Version

ES5

https://plnkr.co/edit/q3Tv2EdrAOKNwc06czm2?p=preview

[wizarrc]

@cvsdev I can't reproduce your issue.

Oddly enough I CAN reproduce what looks to be a plunker bug! Try opening the punker link in another browser and it should solve your issue. I can't really explain it.

[wizarrc]

@cvsdev changing the css for me works in plunker in Chrome, but somehow not the Edge browser. Looks to be a caching bug with plunker and Edge browser. Hope that helps.

[cvsdev]

Can't be a plunker or browser bug: The last line should be green, because the rowClass condition is: return { 'row-status-open': (row.status) === 'open' }

If i change the css from material striped to material. The last line is shown correctly.

<ngx-datatable class='material striped' [rows]='rows'

<ngx-datatable class='material' [rows]='rows'

[wizarrc]

@cvsdev thanks for showing a picture of what it should be. I must have glossed over the last line, and noticed that the first line did not change color when I updated the css. I see what you mean now.

[wizarrc]

@cvsdev The datatable does not use any kind of style emulation. It's straight up no encapsulation, pure css. Try adding another css to handle striped in addition to your css that handles the non-striped style:

.ngx-datatable.material.striped .row-status-open {
    background-color: green;
}

.ngx-datatable.material.striped .row-status-closed {
  background-color: red;
}

[calipalyssamae]

instead of <ngx-datatableclass='material striped' [rows]='rows'>

make the material striped into one word.

material-striped. And it will work.