# Help with designing a table with dynamic columns using ember data

**URL:** <https://discuss.emberjs.com/t/help-with-designing-a-table-with-dynamic-columns-using-ember-data/7345>\
**Category:** Ember Data\
**Created:** [February 17, 2015, 11:16pm UTC](https://discuss.emberjs.com/t/help-with-designing-a-table-with-dynamic-columns-using-ember-data/7345 "2015-02-17T23:16:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![bakerac4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/bakerac4/32/10593_2.png) [@bakerac4](https://discuss.emberjs.com/u/bakerac4)\
**Post date:** [February 17, 2015, 11:16pm UTC](https://discuss.emberjs.com/t/help-with-designing-a-table-with-dynamic-columns-using-ember-data/7345/1 "2015-02-17T23:16:59Z")

</div>

I want to build a table using ember 1.9 and ember data. This means that since I’m using handlebars 2.0, I can’t use Addepar/Ember-Table.

My initial design went something like this.

```
App.Source = DS.Model.extend({
    name: DS.attr('string'),
    primary: DS.attr('boolean'),
    published: DS.attr('boolean'),
    sort: DS.attr('number'),
    summaryRows: DS.hasMany('summaryRow', {
        async: true,
    })
});

App.SummaryRow = DS.Model.extend({
    locationId: DS.attr('string'),
    locationName: DS.attr('string'),
    cells: DS.hasMany('cell', {
      async: true
    }),
    source: DS.belongsTo('source')
});

App.Cell = DS.Model.extend({
  hexColor: DS.attr('string'),
  name: DS.attr('string'),
  optionId: DS.attr('number'),
  options: DS.hasMany('option', {
    async: true
  }),
  summaryRow: DS.belongsTo('summaryRow')
});

App.Option = DS.Model.extend({
  name: DS.attr('string'),
  hexColor: DS.attr('string'),
  cell: DS.belongsTo('cell')
});

```

The issue with doing it this way, is its going to make a request for 50 summary rows, then each of those summary rows is going to make a request to get its values (so that’s 50 requests because I am using the links hash and not sending IDS, which also means I can’t sideload data). Then when they click on the value (individual cell) I want to open up a model that they can change which option is currently selected in that cell (or value).

**What is the best way to make a table and model the table data with ember data?**

---

<div class="post-metadata">

**Author:** ![varblob](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/varblob/32/10304_2.png) [@varblob](https://discuss.emberjs.com/u/varblob)\
**Post date:** [February 18, 2015, 3:09am UTC](https://discuss.emberjs.com/t/help-with-designing-a-table-with-dynamic-columns-using-ember-data/7345/2 "2015-02-18T03:09:57Z")

</div>

Normally a table represents one model with each column a field. If you have an [EAV table](http://en.wikipedia.org/wiki/Entity%E2%80%93attribute%E2%80%93value_model) then you may wish to pivot the data on the server or on the client side before shoving it into your table view.

If your models truly represent the structure you need ie every cell really has unique options and this is basically what your db looks like. You will probably have to do something custom. Even if you had used ember-table it would not handle data like this very elegantly.

---

<div class="post-metadata">

**Author:** ![bakerac4](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/bakerac4/32/10593_2.png) [@bakerac4](https://discuss.emberjs.com/u/bakerac4)\
**Post date:** [February 18, 2015, 1:28pm UTC](https://discuss.emberjs.com/t/help-with-designing-a-table-with-dynamic-columns-using-ember-data/7345/3 "2015-02-18T13:28:34Z")

</div>

That is really what my data looks like. One thing to note is that you wont have to load the hasMany options relationship until a cell is clicked on to be edited. So where Im running in to trouble is we have to load the summaryRows then load all the cells for each summary row.

I think perhaps my best solution is to load the summaryRows via the links attribute (so one call will be made) then return a list of ID’s for each cell in the summaryRow. That way ember can coalesce the find call to only make one call to load all of the data. Then when the item is clicked on go to a links object that was in the cell and go get the options.

---

<div class="post-metadata">

**Author:** ![varblob](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/varblob/32/10304_2.png) [@varblob](https://discuss.emberjs.com/u/varblob)\
**Post date:** [February 18, 2015, 3:05pm UTC](https://discuss.emberjs.com/t/help-with-designing-a-table-with-dynamic-columns-using-ember-data/7345/4 "2015-02-18T15:05:05Z")

</div>

If you’re worried about lots of requests. You could also make some sort of custom call that pulls all the data together in whatever format you want and then parse and [push onto the ember store](http://emberjs.com/guides/models/pushing-records-into-the-store/) on the client side.

OR

you could call

```
cells?sourcId=:sourcId
summary-rows?sourcId=:sourcId

```

before you call for source so that it resolves all those relationships with only 3 requests.