'Spreadsheet' data model with Ember Data

Ember Data
1

Hi,

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:

<div>
  <h1>Data/h1>
  <ul>
  {{#each d in model}}
  <li>
    {{d.name}}
    <br>
    
    <table>
      <thead>
        <tr>{{#each col in d.columns}}<td>{{col.name}}</td>{{/each}}</tr>
      </thead>
      <tbody>
        {{#each row in d.rows}}
          <tr>
            {{#each cell in row.cells}}<td>{{cell.column.id}}&nbsp;{{cell.value}}</td>{{/each}}
          </tr>
        {{/each}}
      </tbody>
    </table>
  </li>
  {{/each}}
  <ul>
</div>

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?

Thanks,

Michael