'Spreadsheet' data model with Ember Data


I am trying to represent a ‘spreadsheet’ like data model using ember-data.

The main reason for this is that I want to load .CSV data into this model structure and view the data from both column- and row-oriented perspectives.

I do not know ahead of time what the content of the .CSV will be so a row-based data model with column names would not work, as I understand it.

I have four main models:

App.DataSet = DS.Model.extend({
  name: attr('string'),
  columns: hasMany('column', {async:true}),
  rows: hasMany('row', {async:true})

App.Column = DS.Model.extend({
  dataSet: belongsTo('data-set'),
  name: attr(),
  cells: hasMany('cells',{async:true})

App.Row = DS.Model.extend({
  dataSet: belongsTo('data-set'),  
  cells: hasMany('cell',{async:true})

App.Cell = DS.Model.extend({
  row: belongsTo('row'),
  column: belongsTo('column'),
  value: attr()

I have created some FIXTURE data for the model and it seems to work (although any suggestions for a better approach are welcomed!).

I am now trying to display the data in a table. My index controller is an ArrayController which looks for 'DataSet’s from the store. My template looks like:

  {{#each d in model}}
        <tr>{{#each col in d.columns}}<td>{{col.name}}</td>{{/each}}</tr>
        {{#each row in d.rows}}
            {{#each cell in row.cells}}<td>{{cell.column.id}}&nbsp;{{cell.value}}</td>{{/each}}

When this is rendered, I find that for some rows the cells are correctly ordered with respect to the columns but in others they are not. I am including a screenshot to make this point clear.

How do I render each cell in correct column order?