How to implement a configurable table with Angular 2+

Question

I am trying to generate a table based on a JSON configuration. Although I can create the table headers OK, I don't know how to dynamically select the row cell data by field name. This is what I have:

columns = [
{
    heading: "Person's Name",
    fieldName = "name"
},
{
    heading: "Person's Age"
    fieldName = "age"
} ];

people = [ 
{
    name: "john",
    age: 25,
    gender: "male"
},
{
    name: "mary",
    age: 18,
    gender: "female"
} ];


<table> 

    <tr>
        <th *ngFor="let column of columns">{{column.heading}}</th>
    </tr>

    <tr *ngFor="let person of people">
        <td *ngFor="let column of columns">{{person.column.fieldName}}</td>
    </tr>

</table>

Clearly {{person.column.fieldName}} does not work i.e. this does not translate into person.name and person.age.

Any thoughts on how to select the person field with the name of the fieldName specified in columns data?

well I don't know how this is even supposed to work. You have 2 completely independent ngFor's. There are now two options. Either ensure in your controller they are always in the correct order, or add another ngFor with the columns inside each person ngFor — Nicolas Gehlert
– Nicolas Gehlert, Commented Mar 9, 2018 at 14:12
Sorry my mistake - I've updated the code example now. So the problem I have is how to use the column.fieldName to select the right field from person. — Mark Chidlow
– Mark Chidlow, Commented Mar 9, 2018 at 14:17

Reza · Accepted Answer · 2018-03-09 14:17:09Z

2

You can access object properties by string indexer

obj.name or obj["name"]

<table> 

    <tr>
        <th *ngFor="let column of columns">{{column.heading}}</th>
    </tr>

    <tr *ngFor="let person of people">
        <td *ngFor="let column of columns">{{person[column.fieldName]}}</td>
    </tr>

</table>

answered Mar 9, 2018 at 14:17

Reza

20.1k18 gold badges102 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mark Chidlow Over a year ago

Works a treat thank you! I should have know this doh!

Nicolas Gehlert Over a year ago

even though not performant this should be the accepted answer. The other accepted answer does not even work. I highly recommend not using this approach since you just do a ton of unneeded ngFor loops.

Mark Chidlow Over a year ago

I'm not sure why you say "unneeded ngFor loops" as they are needed? - or is there a better alternative?

Collectives™ on Stack Overflow

How to implement a configurable table with Angular 2+

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related