Ngx-datatable: Ngx-Data table display empty row

[ThakkarKhushbu]

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();

}

#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)'>

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]

[gauravshri12]

Facing same issue... table having data but displays nothing.

[wizarrc]

SEC7111: HTTPS security is compromised by http://realestateapi.techextensorproducts.com

@ThakkarKhushbu I can't evaluate till you remove mixed mode from the plunker example. The data source shall be https for plunker for security reasons.

https://msdn.microsoft.com/query/dev12.query?appId=Dev12IDEF1&l=EN-US&k=k(VS.WebClient.Help.SEC7111)

[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
    });
}

[gauravshri12]

NGX-Datatable having data but displays nothing.

export class ShippersearchComponent implements OnInit {

@ViewChild('shipperdatatable') table: any;

rows: any[] = [];
selected = [];
expanded: any = {};
timeout: any;

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

onPage(event) {
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
console.log('paged!', event);
}, 100);
}
onSelect({ selected }) {
console.log('Select Event', selected, this.selected);
}
fetch(cb) {
const req = new XMLHttpRequest();
req.open('GET', http://153.2.134.168:37190/Test/rest/query/search/AA0031);

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

req.send();

}

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

[elhamzaouiaymen]

@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
    });
}

you rock, thanks man

[shankararul]

<ngx-datatable-column *ngFor='let colname of columns' [name]="colname.name" [prop]="colname.prop"></ngx-datatable-column>

Has to set both the name & Prop to get it working otherwise rows were empty !

[HanMyintTun]

faced same issue and able to solve with @shankararul's solution.
<ngx-datatable-column *ngFor = "let m of columnNames" name="{{m}}" prop="{{m}}"></ngx-datatable-column>

[brownjr38]

I had the same issue. Each object in my columns definition only had the name, you must provide the prop too. Example in template:
[columns]="[{name: 'My column name', prop: 'My property in my object'}, ...

The source code in the demos only sets "name" and leaves out the "prop" value. That is where the confusion occurred.

[bDino]

Facing the same issue after upgrading to version 17 and Angular 9. The above suggestions didn't fix it for me. Any ideas?
prop and name is set, so are a few other properties. Setting the columns in the template didn't work either. Could it be some sort of changeDetetcion Issue?

EDIT: Fixed it - my problem was that I had a group template and detail template defined that weren't used and worked in previous versions. Had to put it into an if or remove it and add it dynamically if used.

This causes empty rows:

<!-- Group Header Template -->
    <ngx-datatable-group-header [template]="groupHeaderTemplate"
                                [rowHeight]="50">
      <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
        <ng-content></ng-content>
      </ng-template>
    </ngx-datatable-group-header>

    <!--Detail header template-->
    <ngx-datatable-row-detail [rowHeight]="detailRowHeight"
                              [template]="detailRowTemplate">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
        <ng-content></ng-content>
      </ng-template>
    </ngx-datatable-row-detail>

This works:

<!-- Group Header Template -->
    <ngx-datatable-group-header *ngIf="groupByColumn" [template]="groupHeaderTemplate"
                                [rowHeight]="50">
      <ng-template let-group="group" let-expanded="expanded" ngx-datatable-group-header-template>
        <ng-content></ng-content>
      </ng-template>
    </ngx-datatable-group-header>`

    <!--Detail header template-->
    <ngx-datatable-row-detail *ngIf="detailRowTemplate" [rowHeight]="detailRowHeight"
                              [template]="detailRowTemplate">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
        <ng-content></ng-content>
      </ng-template>
    </ngx-datatable-row-detail>