Ngx-datatable: Data not rendering

[murac]

Hello!

I'm having a problem where my data is show up blank in the table. The columns are displaying correctly, however. When using the dummy data in the documentation everything works, but when I switch to mine, no luck. I've console.logged both data sets and they are both arrays of objects. The datatable is using pagination and displays the correct count and number of pages. I'm importing a csv file and building the array that way. I thought it might have been spaces in the columns, but that wasn't the case.
<-- test data
https://files.gitter.im/swimlane/angular2-data-table/OSlA/blob
<--- mine

The code is straight from the docs. What's going on here? Thanks for the help!

[amcdnl]

Can you post a demo plunkr?

[murac]

Ok here we go. I managed to modify one of yours from the docs.

https://gist.run/?id=1dd2022892e239279f63ec6050ac7f0d

I provided the test.csv file you'll have to save it to your computer to import it, however. Thank you, thank you for your help!

[murac]

Ok, figured it out. Moral of the story: set a "prop" value when building the TableColumn object.

[amcdnl]

Glad to hear you got it, sorry didn't get to it sooo busy!

I'm gonna make that example u posted part of demos! Thanks for sharing!

[murac]

Go for it.
No offence taken, I just needed some time to let it all simmer. But this means I won't feel bad for pestering you next time!

[anitalpatil]

Even I am facing same kinda issue murac for ngx-datatable to render the row data getting the data in the form of object, if i display data in front end with property binding to json am able to display in json format, but not in data table.... have you got solution for it?

[SeverinAlexB]

+1

[atiquevevegum]

Did you guyz got any help. Even I am also getting the same issue. while calling

test.ts
rowselect = [
{ company: 'Austin', country: 'Male', industry: 'Swimlane' },
{ company: 'Austin', country: 'Male', industry: 'Swimlane' },
];
selected: any[] = [];
rows = [
];
columns = [
{ prop: 'company' },
{ name: 'country' },
{ name: 'industry' }
];

for(let i = 0; i < this.total_searches; i++) {
//For Table Data
this.rows.push({
"company": this.result[i]._source.COMPANY_NAME,
"country": this.result[i]._source.COUNTRY_NAME,
"industry": this.result[i]._source.INDUSTRY_TYPE
});
}

html

style="width: 105%;height: 100%"
class="material"
**[rows]="rowselect"**
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[limit]="10"
[selected]="selected"
[selectionType]="'checkbox'"
[selectAllRowsOnPage]="false"
[displayCheck]="displayCheck"
(activate)="onActivate($event)"
(select)='onSelect($event)'>
[width]="40"
[sortable]="false"
[canAutoResize]="false"
[draggable]="false"
[resizeable]="false"
[headerCheckboxable]="true"
[checkboxable]="true">

I got the data if I pull from rowselect, but I didn't get the data if I pull from rows array. Both structure are same. But I got the count. Still no data display.

This issue is still there with "@swimlane/ngx-datatable": "^13.1.0",

Any help ?

[anitalpatil]

@atiquevevegum For listing employee I wrote code as follows may be it will help you
In HTML

<ngx-datatable   
class='material'
[columns]="columns"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[limit]="5"
[rows]='rows'
(sort)="onSort($event)">
        <ngx-datatable-column name="{{ 'NAME' | translate }}" prop="displayname">
          <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.displayname}}
          </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="{{ 'EMAIL.LABEL' | translate }}" prop="email">
          <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.email}}
          </ng-template>
        </ngx-datatable-column>

         <ngx-datatable-column name="{{ 'EMPLOYEE TYPE' | translate }}" prop="emptname">
          <ng-template let-row="row" ngx-datatable-cell-template>
            {{row.emptname}}
          </ng-template>
        </ngx-datatable-column>      
  </ngx-datatable>

In ts file fetched the data from db and added the data to rows[]
rows = [];

constructor(private EmployeeService: EmployeeService) {

}
ngOnInit() {
this.getAllEmployees();
}
getAllEmployees() {
this.EmployeeService.getAllEmployees().subscribe(
data => {
this.rows = data;
}
);
}

[aravindnaidu09]

when I used prop it worked.

[enchanter5525]

Hello anyone I have ngx datatable. When i add a new recoord it is not showing in the table .any help?

[shrunk3]

put a if check on top of ngx-datatable as it checks for dirty data check adding ngIf will resolve this issue