How can I sort a table by column in angularjs 1.6?

Question

I am using angularjs 1.6 to build a component based application. How can I sort the table contents by clicking on it's headers? For example, when a user clicks onto 'Contact Name' column header, the table should be sorted by 'Contact Name'. I have the following code:

booking-list-template.html

<a ng-link="['Create']" class="btn btn-primary float-right">New Booking</a>

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>Contact Name</th>
            <th>Contact Number</th>
            <th>No of Diners</th>
            <th>Table Number</th>
            <th>Booking Time</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="booking in $ctrl.bookings| orderBy:$ctrl.orderProp" 
            ng-class="{'text-danger': booking.numberOfPeople > 6, 'text-primary':booking.numberOfPeople === 1}"
            ng-click="$ctrl.editBooking(booking.bookingId)">
            <td>{{booking.contactName}}</td>
            <td>{{booking.contactNumber}}</td>
            <td>{{booking.numberOfPeople}}</td>
            <td>{{booking.tableNumber}}</td>
            <td>{{booking.bookingTime | date: 'dd/MM/yyyy HH:mm'}}</td>
            <td><button class="btn btn-sm btn-danger" ng-click="$ctrl.deleteBooking(booking, $event)">Delete</button></td>
        </tr>
    </tbody>
</table>

booking-list.component.js

'use strict';

angular.
    module('bookingList').
    component('bookingList', {
        templateUrl: 'booking-list/booking-list.template.html',
        controller: ['BookingService','$location',
            function (BookingService, $location) {
                let self = this;

                self.bookings = BookingService.query();
                self.orderProp = 'bookingTime';
                self.editBooking = function (id) {
                    $location.path(`/edit/${id}`);
                };
                self.deleteBooking = function (booking, $event) {
                    BookingService.delete({ id: booking.bookingId }, function () {
                        let index = self.bookings.indexOf(booking);
                        self.bookings.splice(index, 1);
                    });


                    if ($event.stopPropagation) $event.stopPropagation();
                    if ($event.preventDefault) $event.preventDefault();
                    $event.cancelBubble = true;
                    $event.returnValue = false;
                };
            }
        ]
    });

Answer 1

just add sortBy Filter in ng-repeat. Check the below code

New Booking

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th ng-click="sortVar=!sortVar">Contact Name</th>
            <th>Contact Number</th>
            <th>No of Diners</th>
            <th>Table Number</th>
            <th>Booking Time</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="booking in $ctrl.bookings| orderBy:$ctrl.orderProp | sortBy: sortVar" 
            ng-class="{'text-danger': booking.numberOfPeople > 6, 'text-primary':booking.numberOfPeople === 1}"
            ng-click="$ctrl.editBooking(booking.bookingId)">
            <td>{{booking.contactName}}</td>
            <td>{{booking.contactNumber}}</td>
            <td>{{booking.numberOfPeople}}</td>
            <td>{{booking.tableNumber}}</td>
            <td>{{booking.bookingTime | date: 'dd/MM/yyyy HH:mm'}}</td>
            <td><button class="btn btn-sm btn-danger" ng-click="$ctrl.deleteBooking(booking, $event)">Delete</button></td>
        </tr>
    </tbody>
</table>

Hope it Helps!!

Answer 2

I found the answer by reading the docs.

Heading ##

Sort by = {{$ctrl.orderProp}}; reverse = {{$ctrl.reverse}}

    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th><a href="#" ng-click="$ctrl.sortBy('contactName')">Contact Name</a></th>
                <th>Contact Number</th>
                <th>No of Diners</th>
                <th>Table Number</th>
                <th><a href="#" ng-click="$ctrl.sortBy('bookingTime')">Booking Time</a></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="booking in $ctrl.bookings| orderBy:$ctrl.orderProp:$ctrl.reverse" 
                ng-class="{'text-danger': booking.numberOfPeople > 6, 'text-primary':booking.numberOfPeople === 1}"
                ng-click="$ctrl.editBooking(booking.bookingId)">
                <td>{{booking.contactName}}</td>
                <td>{{booking.contactNumber}}</td>
                <td>{{booking.numberOfPeople}}</td>
                <td>{{booking.tableNumber}}</td>
                <td>{{booking.bookingTime | date: 'dd/MM/yyyy HH:mm'}}</td>
                <td><button class="btn btn-sm btn-danger" ng-click="$ctrl.deleteBooking(booking, $event)">Delete</button></td>
            </tr>
        </tbody>
    </table>

{
  let app = angular.module('app',['ngResource']);

  app.factory('BookingSvc',['$resource', function($resource){
    return $resource('bookings.json');
  }]);

  app.component('bookingList', {
    templateUrl: 'booking-list.html',
    controller: ['BookingSvc', function(BookingSvc){
      let self = this;

      self.bookings = BookingSvc.query();
      self.orderProp = 'bookingTime';
      self.reverse = true;
      self.sortBy = function(orderProp) {
        self.reverse = (self.orderProp === orderProp) ? !self.reverse : false;
        self.orderProp = orderProp;
        console.log(orderProp);
      };
    }]
  });
}