Ngx-datatable: Row Grouping and Row Details not working together

[pssubashps]

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

the row details open by default with out marking for expand
Expected behavior

It should open only when click on the icon
Reproduction of the problem

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

Please tell us about your environment:

• Table version:10.4.0
  

• 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 ]
  
  Chrome Version 63.0.3239.84 (Official Build) (64-bit)

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

[pssubashps]

> <ngx-datatable-row-detail [rowHeight]="120">
>    <ng-template let-row="row" #rowdetails let-expanded="expanded" ngx-datatable-row-detail-template>
>            <ng-container  *ngTemplateOutlet="rowDetailsTemplate"
>            ></ng-container>
>           </ng-template>
>       </ngx-datatable-row-detail>
>       <!-- Group Header Template -->
>     <ngx-datatable-group-header [rowHeight]="50" #myGroupHeader>
>       <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
>         <div style="padding-left:5px;">
>           <a
>             [class.datatable-icon-right]="!expanded"
>             [class.datatable-icon-down]="expanded"
>             title="Expand/Collapse Group"
>             (click)="toggleExpandGroup(group)">
>             <b>Status: {{group.value[0].isGlobal}}</b>
>           </a>                          
>         </div>
>       </ng-template>
>     </ngx-datatable-group-header>

here is the issue.
both are getting the bind with the same property " expanded.". so that is it showing
any suggestions ?

Thanks,
Subash

[sapottier]

A temporary workaround

<ngx-datatable-row-detail #rowDetail [rowHeight]="'auto'"> <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-row-detail-template> <div *ngIf="row.value[rowIndex].expanded"> {{row.value[rowIndex] | json}} </div> </ng-template> </ngx-datatable-row-detail>

<ngx-datatable-column> <ng-template let-row="row" ngx-datatable-cell-template> <div (click)="toggleExpandRow(row)"> toggle </div> </ng-template> </ngx-datatable-column>

toggleExpandRow(row) { row.expanded = !row.expanded; }