Displaying navigation properties in ngx-datatable

Question

I have a table like this that displays data including several navigation properties :

<table class="table afcstandings">
        <thead>
            <tr>
                <th>team</th>
                <th>coach</th>
                <th>w</th>
                <th>l</th>
                <th>t</th>
                <th>fa</th>
                <th>agst</th>
                <th>diff</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let standing of standingsAFCEast">
                <!-- property binding rather than interpolation-->
                <td>{{ standing.team.teamName }}</td>
                <td>{{ standing.team.coach.coachName }}</td>
                <td>{{ standing.won }}</td>
                <td>{{ standing.lost }}</td>
                <td>{{ standing.tied }}</td>
                <td>{{ standing.pointsFor }}</td>
                <td>{{ standing.pointsAgainst }}</td>
                <td>{{ standing.pointsDifference }}</td>
            </tr>
        </tbody>
    </table>

Here is the data structure that is being read :

 [{"team":{"teamId":22,"teamName":"Carolina Panthers","coach":{"coachId":61,"coachName":"J Smith"},"division":{"divisionId":2,"divisionName":"NFC West"},"headerImage":"","logoImage":"","hex":"","r":null,"g":null,"b":null},"won":2,"lost":1,"tied":0,"pointsFor":82,"pointsAgainst":62,"pointsDifference":20}]

My question is, how do I display this data using ngx-datatable? I have tested with 3 fields, teamName, coachName and won, and am able to display the won field, but not the others, as I am not sure how to drill down into the team object or the coach object.

<ngx-datatable class="ngx-datatable" [rows]="standingsAFCEast">
    <ngx-datatable-column name="team.teamName" [width]="300"></ngx-datatable-column>
    <ngx-datatable-column name="team.coach.coachName"></ngx-datatable-column>
    <ngx-datatable-column name="won"></ngx-datatable-column>
</ngx-datatable>

Any advice would be really appreciated!

score 0 · Accepted Answer · answered Jul 08 '17 at 23:08

After looking at the basic examples, I made this work (Plunker here):

@Component({
  selector: 'my-app',
  template: `
    <div>
      <ngx-datatable
        [rows]="rows"
        [columns]="columns"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="'auto'"
        [reorderable]="reorderable">
      </ngx-datatable>
    </div>
  `
})
export class AppComponent {

  standingsAFCEast = [{
    "team":{
      "teamId":22,
      "teamName":"Carolina Panthers",
      "coach":{
        "coachId":61,
        "coachName":"J Smith"
      },
      "division":{
        "divisionId":2,
        "divisionName":"NFC West"
      },
      "headerImage":"",
      "logoImage":"",
      "hex":"",
      "r":null,
      "g":null,
      "b":null
    },
    "won":2,
    "lost":1,
    "tied":0,
    "pointsFor":82,
    "pointsAgainst":62,
    "pointsDifference":20
  }]

  get rows () {
    return this.standingsAFCEast.map(standing => ({
      team: standing.team.teamName, 
      coach: standing.team.coach.coachName,
      w: standing.won,
      l: standing.lost,
      t: standing.tied,
      fa: standing.pointsFor,
      agst: standing.pointsAgainst,
      diff: standing.pointsDifference
    }))

  }
  // columns = [{name:'team'}, {name:'coach'}, {name:'w'}, {name:'l'}, {name:'t'}, {name:'fa'}, {name:'agst'}, {name:'diff'}]
  columns = Object.keys(this.rows[0]).map(val => ({name: val}))
}

Let me know if this helps!

Displaying navigation properties in ngx-datatable

1 Answers1