Ember sorted table not working correctly

I am trying to create a table of group names within their parent group type. The problem is that I want the table to stay in the same order when someone clicks on a group. When the table is generated, it is in the correct order. For some reason when I click on a group, the order of the table changes even though I have sorting implemented. If anyone has any ideas as to why this happens that would be very helpful.

template.hbs

{{#each uniqueGrouptypes as |type|}}
  {{#each sortedGroups as |group|}}
    {{#if (eq group.grouptype type)}}
      <tr>
        <td class='groupname'>
          {{#link-to 'groups.group' group.id}}
            {{group.groupname}}
          {{/link-to}}
        </td>
      </tr>
    {{/if}}
  {{/each}}
{{/each}}

component.js

export default Ember.Component.extend({
  sortedProperties: ['grouptype:asc', 'groupname:asc'],
  sortedGroups: Ember.computed.sort('individual.individual_groups', 'sortedProperties'),
  grouptypes: Ember.computed.mapBy('sortedGroups', 'grouptype'),
  uniqueGrouptypes: Ember.computed.uniq('grouptypes')
});