Tables with cell details, virtual scroll and dynamic cell detail height do not work

[Szabadember]

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
Table row details are shown behind each other instead of under each other. Also the layout gets completely screwed up, it is impossible to scroll anymore. It is impossible to open or close row details.

Expected behavior
Rows should be displayed under each other and the user should be able to open and close the detail panel.

Reproduction of the problem
Here is a plunker for easier reproduction:
http://plnkr.co/edit/C0bWPAgQCJR90auNGA25
I also attached the source of a typescript component which can be tested using the ngx-datatable demo app by replacing the contents of dynamic-height.component.ts.

Steps to reproduce:

1. Open all the row details starting from the last row
2. Scroll down to make the first row get completely out of the view (the second row should be on top)
3. Close the row details starting from the last row

What is the motivation / use case for changing the behavior?
I want to build a table where each row can have it's own row detail view with different height

Please tell us about your environment:
Operating system: OS X 10.12.4
IDE: VS Code

• Table version: 0.8.x
  Table version: 8.0.0

• Angular version: 2.0.x
  Angular version: 4.0.3

• 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, Safari, Firefox

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

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'dynamic-height-demo',
  template: `
    <div>
      <h3>
        Dynamic Height w/ Virtual Scrolling
        <small>
          <a href="https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/dynamic-height.component.ts" target="_blank">
            Source
          </a>
        </small>
      </h3>
      <ngx-datatable
        #myTable
        class="material expandable gk-toplevel-container"
        [columnMode]="'force'"
        [headerHeight]="40"
        [footerHeight]="50"
        [rowHeight]="40"
        [scrollbarV]="40"
        [rows]="yearlySums">
        <!-- Row Detail Template -->
        <ngx-datatable-row-detail [rowHeight]="getRowDetailsHeight" (toggle)="onDetailToggle($event)">
            <ng-template let-yearrow="row" ngx-datatable-row-detail-template>
                
            </ng-template>
        </ngx-datatable-row-detail>
        <!-- Column Templates -->
        <ngx-datatable-column
          [width]="60" [resizeable]="false" [sortable]="false" [draggable]="false" [canAutoResize]="false">
            <ng-template let-row="row" ngx-datatable-cell-template>
                <a
                  href="#"
                  [class.icon-right]="!row.$$expanded"
                  [class.icon-down]="row.$$expanded"
                  title="Expand/Collapse Row"
                  (click)="toggleExpandRow(row)">
                </a>
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="year">
            <ng-template let-row="row" ngx-datatable-cell-template>
                <strong>{{row.year}}</strong>
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="sum">
            <ng-template let-row="row" ngx-datatable-cell-template>
                <strong>{{row.sum}}</strong>
            </ng-template>
        </ngx-datatable-column>
    </ngx-datatable>
</div>
  `
})
export class DynamicHeightComponent {

  @ViewChild('myTable') table: any;

  // year, sum pairs
  public yearlySums: Array<{year: number, sum: number, height: number}> = [];

  constructor() {
    this.fetch();
  }

  fetch() {
    this.yearlySums.push({year: 2015, sum: 1750000, height: 50});
    this.yearlySums.push({year: 2016, sum: 2750000, height: 150});
    this.yearlySums.push({year: 2017, sum: 6750000, height: 75});
    this.yearlySums.push({year: 2022, sum: 750000, height: 250});
  }

  public getRowDetailsHeight = (row) => {
    if (row) {
      // tslint:disable-next-line:no-console
      console.log("Details height:", row.height, "index:", row.$$index);
      return row.height;
    }
    console.log("NO Details height");
    return 0;
  }

  public toggleExpandRow = (row) => {
    console.log('Toggled Expand Row!', row);
    this.table.rowDetail.toggleExpandRow(row);
  }

  public onDetailToggle = (event) => {
    console.log('Detail Toggled', event);
  }

}

[Szabadember]

I tested the latest release which included my fix and it works. I will close this issue for you.