Ngx-datatable: Need some Color for Expanded row to show prominently, for which detail is being displayed

[rahul-winner]

I'm submitting a ...

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

Current behavior
When we expand a row for displaying row details, we could have our own template being rendered as row details, however the row which is expanded cannot be highlighted. We wanted to show the expanded row in some different color.

I'm not sure if it is already pursued or have discussed somewhere. Could you please help me out.

Expected behavior
We need to highlight the row which is expanded.

Reproduction of the problem
Take a table with row details, you could pick from the example as well. Expand couple of rows. You could see that the row which is expanded does not appear prominent.

What is the motivation / use case for changing the behavior?
The expanded row should be displayed prominently, so that user could determine for which row he/she is viewing the details. It gets difficult for user to quickly identify the row which is expanded.

Please tell us about your environment:

• Table version:
  ngx-datatable: 9.2.0

• Angular version:
  Angular version : 4.3.0

• 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 ]
  All browsers

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

[rahul-winner]

Could anyone please help us resolving this issue?

Thanks. Rahul

[Rushipk]

That's the same thing I am looking for. Anyone please resolve this issue.

[mishkolesnikov]

I use rowClass input of ngx-datatable component. If rowClass is a function it actually take 'row' object as parameter which contain only row data and no informatoin about expanding. But there is kinda huck for this function. This function is called in context of body-row component, and you can get access to its propeties through 'this' object. So, for higher level component:

getRowClass(row) {
    return {
      'row-expanded': this.expanded
    };
  }

and

<ngx-datatable
...
[rowClass]="getRowClass"
...>
</ngx-datatable>

[amcdnl]

This is purely for demonstration purposes. Its up to the implementer to decide this.

[rahul-winner]

@amcdnl @mishkolesnikov thanks for you response.

I tried mishkolesnikov's solution, however could not make it work. would you mind pasting your code for reference?

Having said that, I still feel that this should be provided in Ngx-datatable OOTB CSS classes.

Thanks. Rahul

[rahul-winner]

can anyone please help on this ?