CODEWITHSUNDEEP
javascripthtmltemplateshandlebars.js
Kazura92
Kazura92

Reputation: 75

Handlebars lookup helper to build dynamic tables

I would like to build a dynamic table using handlebars. I think I have to use lookup helper to achieve my wanted result. I am having some trouble using the lookup helper and the documentation is rather poor.

An example of my object looks like this: 

{
headers:[
  0:"name",
  1:"brand",
  2:"type",
  3:"rating",
  4:"edited"
]
tableContent:[
  0:{
     contentName:{
        name:"Fanta",
        brand:"Coca-Cola Company",
        type:"Soda",
        rating:"3",
        edited:"2017-05-24"}
    }
]
}

Handlebars template:

<script id="itemTemplate" type="text/x-handlebars-template">
  <table id="table" class="bordered highlight centered">
    <thead>
      <tr>
        {{#headers}}
        <th>{{this}}</th>
        {{/headers}}
      </tr>
    </thead>
    <tbody>
      <tr>
        {{#each tableContent}}
        {{#each headers}}
        <td>{{lookup ../contentName headers}}</td>
        {{/each}}
        {{/each}}
      </tr>
    </tbody>
  </table>
</script>

The reason I can't simply do <td> contentName.name </td> and so on, is that the user can create their own columns in the database, so I would have no way of knowing the property names beforehand.

Upvotes: 1

Views: 1669

Answers (1)

ykaragol
ykaragol

Reputation: 6221

With a little modification in your object, you can do it with ember-contextual-table.

Here is the twiddle for you.

Sample code:

{{#data-table data=data.tableContent as |t|}}
  {{#each data.headers as |columnName|}}
    {{t.column propertyName=columnName name=columnName}}
  {{/each}}
{{/data-table}}

Updated

But if you want to make your code run, here it is:

  <table class="bordered highlight centered">
    <thead>
      <tr>
        {{#each data.headers as |header|}}
        <th>{{header}}</th>
        {{/each}}
      </tr>
    </thead>
    <tbody>
      <tr>
        {{#each data.tableContent as |c|}}
          {{#each data.headers as |h|}}
          <td>{{get c h}}</td>
          {{/each}}
        {{/each}}
      </tr>
    </tbody>
  </table>

Have a look at this twiddle

Upvotes: 1

Related Questions