Need some Color for Expanded row to show prominently, for which detail is being displayed

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

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

[rahul-winner]

can anyone please help on this ?