Tabular Data Pattern

Design
1

In my application I have a lot of tabular data. The most trivial way to output this tabular data is something like the following:

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    {{#each content}}
      <tr>
        <td>{{firstName}}</td>
        <td>{{lastName}}</td>
      </tr>
    {{/each}}
  </tbody>
</table>

This unfortunately creates a bunch of metamorph tags in between the table rows. This in my opinion is not ideal - and there are some situations where this actually breaks.

So I have created two approaches that seem to minimize on these metamorph tags.

  1. Create a tbody-each helper which passes down the arguments to a CollectionView with a tagName of tbody (Ember Latest - JSFiddle - Code Playground)
  2. Pass the data down to another array controller with tagName of tbody and an item controller with a tagName tr (Ember Latest - JSFiddle - Code Playground)

How have you dealt with this issue? Do either of these patterns make sense? Is one more ‘The Ember Way’ over the other? Are there any performance implications for either approach?

Thanks.

2

I had a similar issue - I ended up just using divs, giving them css classes of thead, tbody, td. eg:

.tr {
  display:table-row
}

You could also try out the ember-metal branch of ember.js if you think it’s safe for your project to use a canary build. In that build there are no metamorph tags.

3

Sorry jsfiddle fail

  1. http://jsfiddle.net/ksykulev/cc1wfpuu/3/
  2. http://jsfiddle.net/ksykulev/2r3bvtqo/2/