Ngx-Data table display empty row

I’m submitting a … (check one with “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 I have Used Ngx Data table for Displaying data in table. I am fetching data from WEB API , API Returns correct data , but ngx data table displaces blank data , it display correct no of rows , but cell value blank , am i missing any bindings?

https://plnkr.co/edit/l3yBOwtxSKhDwffAEx7S?p=preview

I have written below code 👍 this.fetch(data => { // cache our list this.temp = […data]; this.rows = data; });

fetch(cb) { const req = new XMLHttpRequest(); req.open(“GET”, http://localhost/RealEstateAPI/api/LocationInfoes/GetCities); debugger

req.onload = () => {
    debugger
  cb(JSON.parse(req.response));
};
req.send();

}

<ngx-datatable #table style=“width: 100%” class=“material” [rows]=“rows” [columnMode]=“‘force’” [headerHeight]=“50” [footerHeight]=“50” [rowHeight]=“‘auto’” [limit]=“10” [selected]=“selected” [selectionType]=“‘checkbox’” (activate)=“onActivate($event)” (select)=‘onSelect($event)’> <ngx-datatable-column [width]=“60” [sortable]=“false” [canAutoResize]=“false” [draggable]=“false” [resizeable]=“false”> <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected" let-selectFn="selectFn"> <md-checkbox class=“example-margin” [checked]=“allRowsSelected” (change)=“selectFn(!allRowsSelected)”></md-checkbox> </ng-template> <ng-template ngx-datatable-cell-template let-value="value" let-isSelected="isSelected" let-onCheckboxChangeFn="onCheckboxChangeFn"> <md-checkbox class=“example-margin” [checked]=“isSelected” (change)=“onCheckboxChangeFn($event)”></md-checkbox> </ng-template> </ngx-datatable-column> <ngx-datatable-column name="ID"></ngx-datatable-column> <ngx-datatable-column name="Name"></ngx-datatable-column> <ngx-datatable-column name="Remark"></ngx-datatable-column> <ngx-datatable-column name="Edit"> <ng-template let-row="row" ngx-datatable-cell-template> </ng-template> </ngx-datatable-column> </ngx-datatable>

Expected behavior

Reproduction of the problem

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

Please tell us about your environment:

• Table version: 0.8.x

• Angular version: 2.0.x

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

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

[wizarrc]

@ThakkarKhushbu I might have found the bug. This library moved to OnPush change detection at version 10.0.4. https://github.com/swimlane/ngx-datatable/blob/master/docs/changelog.md#1004

constructor() {
    this.fetch((data) => {
        this.rows.push(...data);
        this.rows = [...this.rows]; // Refresh the data
    });
}

[tusharkudal]

Try using this

      <ngx-datatable-column prop = "first_name" name="Name"></ngx-datatable-column>
      <ngx-datatable-column prop="user_dept" name="Department"></ngx-datatable-column>
      <ngx-datatable-column prop="group_name" name="Group"></ngx-datatable-column>

I was facing the same issue.