# 'Spreadsheet' data model with Ember Data

**URL:** <https://discuss.emberjs.com/t/spreadsheet-data-model-with-ember-data/6648>\
**Category:** Ember Data\
**Created:** [November 9, 2014, 4:57pm UTC](https://discuss.emberjs.com/t/spreadsheet-data-model-with-ember-data/6648 "2014-11-09T16:57:33Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![enetsee](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/enetsee/32/15917_2.png) [@enetsee](https://discuss.emberjs.com/u/enetsee)\
**Post date:** [November 9, 2014, 4:57pm UTC](https://discuss.emberjs.com/t/spreadsheet-data-model-with-ember-data/6648/1 "2014-11-09T16:57:33Z")

</div>

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