Ember.js display table from three models

I have three simple models in Ember.js 2.3:

// app/models/symbol.js
export default DS.Model.extend({
    name: DS.attr()
});

// app/models/group.js
export default DS.Model.extend({
    name: DS.attr()
});

// app/models/group-symbol.js
export default DS.Model.extend({    
    group: DS.belongsTo('group'),
    symbol: DS.belongsTo('symbol'),
    value: DS.attr()
});

Now I want to display a table in which symbols are in rows, groups are columns and inside each cell there is respective group-symbol.value.

My route defines the model as follows:

model() {
    return {
        groups: this.store.peekAll('group'),
        symbols: this.store.peekAll('symbol')
    };
}

And I can display empty table with this template

<table>
<tr>
    {{#each model.groups as |g|}}<th>{{g.name}}</th>{{/each}}
</tr>
{{#each model.symbols as |s|}}
<tr>
    {{#each model.groups as |g|}}<td></td>
</tr>
{{/each}}
</table>

Please advise, how can I obtain specific group-symbol model instance to display its value between <td> and </td>