Angular Sortable Table

Sorts best selling books by title, author, year or copies sold. Styled with bootstrap

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>
  </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>
        <th>
          <a ng-click="sortBy('copies')"># Copies Sold</a>
          <span class="sortorder" ng-show="propertyName === 'copies'" ng-class="{reverse: reverse}"></span>
        </th>
      </tr>
   ...

CSS

a {
  cursor: pointer;
}

.sortorder:after {
  content: '\25b2';
  /* Up Triangle */
}

.sortorder.reverse:after {
  content: '\25bc';
  /* Down Triangle */
}

TypeScript

angular.module('bookApp', [])
  .controller('bookCtrl', ['$scope', function($scope) {
    var books = [{
        title: 'The Lord of the Rings',
        author: 'J.R.R. Tolkien',
        year: 1954,
        copies: 150000000
      },
      {
        title: 'Le Petit Prince',
        author: 'Antoine de Saint-Exupéry',
        year: 1943,
        copies: 140000000
      },
      {
        title: 'Harry Potter and the Philosopher\'s Stone',
        author: 'J. K. Rowling',
        year: 1997,
        copies: 120000000
      },
      {
        title: 'The Hobbit',
        author: 'J.R.R. Tolkien',
        year: 1937,
        copies: 100000000
      },
      {
        title: 'And Then There Were None',
        author: '	Agatha Christie',
        year: 1939,
        copies: 100000000
      },
      {
        title: 'Dream of the Red Chamber',
        author: 'Cao Xueqin',
        year: 1791,
        copies: 100000000
      }
    ];

    $scope.propertyName = 'title';
    $scope.reverse = true;
    $scope.books = books;

    $scope.sortBy = function(propertyName) {
      $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
      $scope.propertyName = propertyName;
    };

  }]);