Ember display data in table format

I have various coffee drinks from a coffee store. There are various drinks (Mocha, Drip, CustomDrink1, etc) that have different sizes. I need to make a table that displays those drinks with the drink on the y-axis and size as the x-axis.

So for example I have Mocha 12oz, 16oz, 20oz; Drip 12oz, 16oz, 20oz; My Custom Drink 12oz, 16oz, 20oz.

This project is using Ember 1.13

// models/store-drink.js
export default DS.Model.extend({
    _store: DS.belongsTo('store', {async: true}),
    type: DS.attr('string'),
    size: DS.attr('number'),
    price: DS.attr('number'),
    active: DS.attr('boolean'),
    custom: DS.attr('boolean'),
});

My general idea is to get the data in the route and then loop through it somehow in the template. The important attributes for the problem are type and size because I need to dispaly a row with a drink type (Mocha) and then all the sizes (12oz, 16oz, 20oz)

// routes/menu.js
export default Ember.Route.extend({
  model: function() {
    let myStoreId = this.controllerFor('application').get('myStore.id');

    return Ember.RSVP.hash({
      myStore: this.store.find('store', myStoreId),
      storeMilk: this.store.find('storeMilk', {'store':myStoreId}),
      milk: this.store.find('milk', {'store':myStoreId}),
      storeDrinks: this.store.find('store-drink', {'store':myStoreId})
    });
  },
  setupController: function(controller, model) {
    controller.setProperties({
      'storeMilk': model.storeMilk,
      'storeDrinks': model.storeDrinks,
      'milk': model.milk,
      'myStore': model.myStore,
    });
  }
}

In the template I run into problems because I can't figure out how to split this data by drink type.

<table class="table table-striped">
      <thead>
        <tr>
          <th>Drink</th>
          <th>12oz</th>
          <th>16oz</th>
          <th>20oz</th>
          <th>24oz</th>
          <th>32oz</th>
        </tr>
      </thead>
      <tbody>
        /* all of this is here is wrong. I believe I would need to do 2
           loops. the first one would be to create rows that represent drink
           types, and then the second loop would loop through the drink type
           and display the sizes in the columns.
        */
        {{#each storeDrink in storeDrinks}}
        <tr>
          <td>{{storeDrink.type}}</td>
          {{#each drink in storeDrinks}}
            <td class="{{unless drink.active 'disabled'}}" {{action 'setDetailDrink' drink}} id="drink-{{drink.id}}">
              {{#if drink.active}}
                {{decimal drink.price}}
              {{else}}
                <span class="fa fa-close"></span>
              {{/if}}
            </td>
          {{/each}}
        </tr>
        {{/each}}
      </tbody>
    </table>

I have been stuck on this for months, off and on (since Ember 1.13 was latest). Before I got by by splitting the drinks into different scope variables before it got to the template. It was a hacky workaround, and doesn't work anymore because now users can add custom drinks so I can't hardcode the drink types anymore.

I might be going about this completely wrong, any suggestions welcomed.