Добавление функции сортировки в Node & ejs

У меня есть шаблон, в котором я просматриваю некоторые данные, поступающие из локального файла JSON.

<tbody>
    <% data.t_upcoming.forEach((record) => { %>
    <tr>
      <td><%=record.date%>
          <span style = "display: block;font-size:10pt;"><%=record.time%></span>
          <p class = "timer" style = "font-size: 8pt; color: red;"></p>
      </td>

      <td>
        <input type = "image" class = "web_camera" src = "/img/camera.png">
      </td>

      <td><a style = "color:black;" href='/course-description'><%=record.course%></a>

        <span style = "display:block;font-size:10pt;"><%=record.course_type%></span>
      </td>
      <td>
        <% record.student.forEach((person) => { %>
          <img rel = "tooltip" data-placement = "top" title = "<%=person.name%>" src = "<%=person.image%>">
        <% }) %>
      </td>

      <td>Recieved
        <span style = "display:block; font-size: 16pt; color:#7c0000;"><%=record.status%></span>
      </td>

      <td>
        <button data-toggle = "modal" data-target = "#MessageModal" rel = "tooltip" data-placement = "top" title = "Send Message" class = "record_icons"><img src = "/img/message.png"></img></button>
        <button rel = "tooltip" data-placement = "top" title = "Add Course" class = "record_icons"><img src = "/img/plus-course-record.png"></img></button>
        <a href='/student_grading' rel = "tooltip" data-placement = "top" title = "Grading & Feedback"  class = "record_icons"><img src = "/img/nike.png"></img></a>
        <button data-toggle = "modal" data-target = "#ChangeModal" rel = "tooltip" data-placement = "top" title = "Change Course" class = "record_icons"><img src = "/img/change.png"></img></button>
        <button data-toggle = "modal" data-target = "#CancelModal" rel = "tooltip" data-placement = "top" title = "Cancel Course" class = "record_icons"><img src = "/img/x.png"></img></button>
      </td>
    </tr>
    <% }) %>
  </tbody>

Вот мой файл Json для справки

{
  "t_upcoming": [{
    "id": 1,
    "date": "April 24, 2018 14:53:25",
    "time": "2 to 4pm",
    "status":"$45",
    "course": "Oil Painting",
    "course_type": "(Individual)",
    "student":[
      {
        "name": "Ann Perkins",
        "image": "/img/student-icon.png"
      }
    ],
    "completion": "Completed"
  },{
    "id": 2,
    "date": "April 23, 2018 16:37:25",
    "time": "2 to 4pm",
    "status":"$45",
    "course": "Art",
    "course_type": "(Group)",
    "student":[
      {
        "name": "Ann Perkins",
        "image": "/img/student-icon.png"
      },
      {
        "name": "Ann Perkins",
        "image": "/img/student-icon.png"
      },
      {
        "name": "Ann Perkins",
        "image": "/img/student-icon.png"
      }
    ],
    "completion": "Completed"
  },{
    "id": 3,
    "date": "April 22, 2018 15:37:25",
    "time": "2 to 4pm",
    "status":"$45",
    "course": "Algebra",
    "course_type": "(Group)",
    "student":[
      {
        "name": "Ann Perkins",
        "image": "/img/student-icon.png"
      },
      {
        "name": "Ann Perkins",
        "image": "/img/student-icon.png"
      },
      {
        "name": "Ann Perkins",
        "image": "/img/student-icon.png"
      }
    ],
    "completion": "Completed"
  }]
}

Теперь я хочу добавить к этой таблице дополнительные функции. Я хочу иметь возможность сортировать по дате или по курсу.

<select>
    <option selected>Sort</option>
    <option>Date</option>
    <option>Course</option>
</select>

Вот где я немного застрял. Как мне добавить выпадающие списки для дат и курсов без необходимости отображать новую страницу? В настоящее время я просто просматриваю каждый фрагмент данных и распечатываю их в порядке, в котором выглядит таблица, но я хочу иметь возможность сортировать не только по дате, но и по курсу.