Student Filtering via Computed @each

components.student-details-filter.js

import Ember from 'ember';

export default Ember.Component.extend({
  studentDetails: null,
  
    // {Property} List of students
  students: Ember.computed('studentDetails.@each.student', function() {
    let studentDetails = this.get('studentDetails') || [];
    return studentDetails.getEach('student').uniq();
  }),
  
  actions: {
    filterStudent(student) {
      this.attrs.filterStudent(student);
    }
  }
});

components.student-details-list.js

import Ember from 'ember';

export default Ember.Component.extend({
  studentDetails: null
});

components.student-details.js

import Ember from 'ember';

export default Ember.Component.extend({
  // {Property} List of details
  studentDetails: null,
  
  // {Property} Filtered student
  filteredStudent: null,
  
  // {Property} Details which have passed the filter
  visibleDetails: Ember.computed('filteredStudent', 'studentDetails.[]', function() {
    let studentDetails = this.get('studentDetails') || [],
        filteredStudent = this.get('filteredStudent');
    return filteredStudent ? studentDetails.filterBy('student', filteredStudent) : studentDetails;
  }),
  
  actions: {
    filterByStudent: function(student) {
      this.set('filteredStudent', student);
    }
  }
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    let jack = { id: '1', name: 'Jack' };
    let joe =  { id: '2', name: 'Joe' };
    let jill = { id: '3', name: 'Jill' };
    return [
      { student: jack, text: 'Lorem' },
      { student: joe,  text: 'Ipsum' },
      { student: jill, text: 'Dolor' },
      { student: jack, text: 'Sit' },
      { student: jill, text: 'Amet' }
    ];
  }
});

styles.student-details-filter.css

.student-filter {
  color: #3A4F59;
  background-color: #CED5D9;
  padding: 5px 8px;
  border-radius: 3px;
  cursor: pointer;
}

styles.student-details-list.css

.student-details-table {
  margin-top: 10px;
  border-spacing: 0;
  border-collapse: collapse;
}

.student-details-table th {
  min-width: 120px;
  text-align: left;
}

.student-details-table thead tr {
  border-bottom: solid 1px #CED5D9;
}

templates.application.hbs

<h1>Student Filtering</h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.student-details-filter.hbs

Student Filters:
{{#each students as |student|}}
  <span class="student-filter" {{action "filterStudent" student}}>{{student.name}}</span>
{{/each}}

<span class="student-filter" {{action "filterStudent" student}}>Clear</span>
 

templates.components.student-details-list.hbs

Student Details:
<table class="student-details-table">
  <thead>
  <tr>
    <th>Student Id</th>
    <th>Student Name</th>
    <th>Details Text</th>
  </tr>    
  </thead>
  <tbody>
    {{#each studentDetails as |details|}}
      <tr>
        <td>{{details.student.id}}</td>
        <td>{{details.student.name}}</td>
        <td>{{details.text}}</td>
      </tr>
    {{/each}}
  </tbody>
</table>

templates.components.student-details.hbs

{{student-details-filter studentDetails=studentDetails filterStudent=(action "filterByStudent")}}

<br><br><br><br>

{{student-details-list studentDetails=visibleDetails}}

templates.index.hbs

{{student-details studentDetails=model}}

twiddle.json

{
  "version": "0.4.16",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}