SPAN elements in row cells are showing up empty - no data binding on rows

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

Current behavior

The “table” itself will render the correct number of rows (visible by inspecting the rendered page). However, it appears that data isn’t being properly bound to the body-cell.component. .datatable-body-cell-label appears with an empty SPAN element.

<div class="datatable-body-cell-label">
    <!--template bindings={ "ng-reflect-ng-if": null }-->
    <!--template bindings={ "ng-reflect-ng-if": "true" }-->
    <span></span>
    <!--template bindings={ "ng-reflect-ng-if": null }-->
</div>

Expected behavior

Row data should be bound to the element and render to the page

Reproduction of the problem

Follow the examples in Getting Started as well as using the fetch method described in the demo.

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

Please tell us about your environment:

Mac OS 10.10.5 VS Code Webpack Angular CLI 1.0.15 Node

• Table version: 6.0.2

• Angular version: 2.4.5

• Browser: all

• Language: TypeScript 2.0.10

[avikaza]

Never mind, I figured it out My columns names were in PascalCase and if I do lowercase for my row names in name value pairs there seems to be an issue matching columns to rows … an error would have saved me 4hrs but, I am just learning this component so it is alright

Thank you for a fantastic data-grid though 👍

[AksenovAndrew]

Issue is present.

When I get data from controller in PascalCase see screenshot #1 below Data display properly in code:

  <tr *ngFor="let company of page.Items">
      <td>{{company.Name }}</td>
      <td>{{company.ContactPerson}}</td>
      <td>{{company.OMSId}}</td>
      <td>{{company.Token}}</td>
  </tr>

but data doesn’t display properly in grid, see screenshot #2, in top just html table, bottom grid

<ngx-datatable class="bootstrap ngx-datatable"
               #someTable
               [rows]="page.Items"
               [loadingIndicator]="loading"
               [columns]="columns"
               [externalPaging]="true"
               [externalSorting]="true"
               [columnMode]="ColumnMode.force"
               [count]="page.TotalElements"
               [limit]="page.Size"
               [offset]="page.PageNumber"
               (page)="onPage($event)"
               (sort)="onSort($event)"
               [headerHeight]="50"
               [summaryRow]="true"
               [summaryPosition]="'bottom'"
               [footerHeight]="50"
               rowHeight="auto"
               [reorderable]="reorderable">
  <ngx-datatable-column name="Name" width="100">
    <ng-template let-value="value" ngx-datatable-cell-template>
      {{ value }}
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>

#screen 1

#screen 2