Problems on rezise the browser

I'm submitting a ...

[ X] bug report

Current behavior

If the table is rendered the first time in a window small and then we maximize the window, the body of the table never get aligned with the header

Expected behavior

the columns of the body get aligned with the header

Reproduction of the problem <ngx-datatable class="material server-scrolling-demo" [rows]="rows" [columnMode]="'force'" [headerHeight]="headerHeight" [rowHeight]="rowHeight" [scrollbarV]="true" [scrollbarH]="true" [loadingIndicator]="isLoading" (scroll)="onScroll($event.offsetY)" [externalSorting]="true" (sort)="onSort($event)" [sorts]="[{prop: 'startTime', dir: 'desc'}]"> <ngx-datatable-column [sortable]="false" [frozenLeft]="true" [resizeable]="false" [maxWidth]="50">

    <ng-template ngx-datatable-cell-template  let-row="row"  let-value="value"  >
      <a (click)="downloadLogs($event)">
        <img src="../assets/images/upload-copy.svg">
      </a>
    </ng-template>
  </ngx-datatable-column>
  <ngx-datatable-column name='startTime' [sortable]="true" [frozenLeft]="true"  [resizeable]="true"  [minWidth]="150" [maxWidth]="250"  >
    <ng-template ngx-datatable-header-template >
      {{'date.time'| translate}}
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template let-row="row">
      {{value | amDateFormat: 'MM/DD/YYYY hh:mm A'}}
    </ng-template>
  </ngx-datatable-column>
    <ngx-datatable-column name="fileName" [sortable]="true" [resizeable]="true" >
      <ng-template ngx-datatable-header-template >
        {{'file.name'| translate}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="type" [sortable]="true" [resizeable]="true" >
      <ng-template ngx-datatable-header-template >
        {{'type'| translate}}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="status" [sortable]="true" [resizeable]="true" >
      <ng-template ngx-datatable-header-template >
        {{'status'| translate}}
      </ng-template>
      <ng-template   let-row="row"  let-value="value" ngx-datatable-cell-template >
        <img src="../assets/images/status-fail.svg" *ngIf="row['status']=='FAILED'">
        <img src="../assets/images/status-complete.svg" *ngIf="row['status']=='COMPLETED'">
        <img src="../assets/images/status-in-progress.svg" *ngIf="row['status']=='OPEN'">
        {{row['rowsProcessed']+'/'+row['totalRows']}}
      </ng-template>
    </ngx-datatable-column>
</ngx-datatable>

What is the motivation / use case for changing the behavior? we are using this component to show a list of "jobs status" in our project

Please tell us about your environment: IOs

Table version: 0.8.x "@swimlane/ngx-datatable": "^11.2.0",
Angular version: 2.0.x 5.2
Browser: just tested in Chrome XX and Firefox XX
Language: [all | TypeScript X.X | ES6/7 | ES5]

swimlane / ngx-datatable

Problems on rezise the browser #1324