Angular Sortable Table

Sorts best selling books

by Amy Ruddy

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<!-- Font Awesome  -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div ng-app="bookApp" ng-controller="bookCtrl">
  <nav class="navbar navbar-expand-sm navbar-dark" style="background-color: #e62a39">
  <span class="navbar-brand" href="#">
  <span class="fas fa-globe mr-2"></span>Angular Sortable Table
  </span>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>
  <div class='container py-5'>
    <h1>Best selling books of all time</h1>
      <table class="table table-striped border">
        <tr>
      <th>
        <a ng-click="sortBy('title')">Title</a>
        <span class="sortorder" ng-show="propertyName === 'title'" ng-class="{reverse: reverse}"></span>
      </th>
      <th>
        <a ng-click="sortBy('author')">Author</a>
        <span class="sortorder" ng-show="propertyName === 'author'" ng-class="{reverse: reverse}"></span>
      </th>
      <th>
        <a ng-click="sortBy('year')">Year Published</a>
        <span class="sortorder" ng-show="propertyName === 'year'" ng-class="{reverse: reverse}"></span>
      </th>
     ...

CSS

a {
  cursor: pointer;
}