Sorting Rows By Table Header In AngularJS

/// <reference path="angular.min.js" />
// Create a module
var mypartone = angular
                    .module("mymodule", [])
                    .controller("myController", function ($scope) {
                        var employees = [
                            { name: "Akshay", dateOfBirth: new Date("July 21,1960"), Address: "Mumbai", Salary: "1234.34" },
                            { name: "Milind", dateOfBirth: new Date("July 20,1960"), Address: "Nashik", Salary: "12.34" },
                            { name: "Raghvan", dateOfBirth: new Date("July 19,1960"), Address: "Pune", Salary: "1235.34" },
                            { name: "Hari", dateOfBirth: new Date("July 18,1960"), Address: "Mumbai", Salary: "5589.34" }
                        ];
                        $scope.employees = employees;
                        $scope.SortColumn = "name";
                        $scope.reverseSort = false;

                        $scope.SortData = function (column) {
                            $scope.reverseSort = ($scope.SortColumn == column) ? !$scope.reverseSort : false;
                            $scope.SortDate = column;
                        }

                        $scope.getSortClass = function (column) {
                            if ($scope.SortColumn == column) {
                                return $scope.reverseSort ? 'arrow-down' : 'arrow-up'
                            }
                            return '';
                        }
                    });

Now, we will get back to our View.

Currently, our output is

We need an up arrow and a down arrow to sort our data. We need to sort our data by name. So, in our th section, we need to pass ng-click directive and SortClass and bind them by name, as.

<th ng-click="sortData('name')">

Now, we need the up arrow and the down arrow. To display these, we will include a div section and pass ng-class which we will call getSortClass.

Name<div ng-class="getSortClass('name')"></div>

Similarly, do it for the other columns too.

<th ng-click="sortData('name')">   
    Name<div ng-class="getSortClass('name')"></div>   
</th>   
<th ng-click="sortData('dateOfBirth')">Date of Birth <div ng-class="getSortClass('dateOfBirth')"></div>   
</th>   
<th ng-click="sortData('Address')">Address <div ng-class="getSortClass('Address')"></div>   
</th>   
<th ng-click="sortData('Salary')">Salary <div ng-class="getSortClass('Salary')"></div>   
</th>   
<th ng-click="sortData('Salary')">Salary <div ng-class="getSortClass('Salary')"></div>   
</th>

Also, we need to pass in reverse sort in ng-repeat, to sort the data.

<tr ng-repeat="employee in employees | orderBy:SortColumn:reverseSort">

So, our View code is.

<table>
  <thead>
    <tr>
      <th ng-click="SortData('name')">
        Name<div ng-class="getSortClass('name')"></div>
      </th>
      <th ng-click="SortData('dateOfBirth')">Date of Birth
        <div ng-class="getSortClass('dateOfBirth')"></div>
      </th>
      <th ng-click="SortData('Address')">Address
        <div ng-class="getSortClass('Address')"></div>
      </th>
      <th ng-click="SortData('Salary')">Salary
        <div ng-class="getSortClass('Salary')"></div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="employee in employees | orderBy:SortColumn:reverseSort">
      <td>{{employee.name | uppercase}}</td>
      <td>{{employee.dateOfBirth | date : "dd/MM/yyyy"}}</td>
      <td>{{employee.Address | lowercase}}</td>
      <td>{{employee.Salary | number : 2}}</td>
      <%-- <td>{{employee.Salary | currency}}</td> --%>
    </tr>
  </tbody>
</table>

Now, just reload the page.

When we click on the Name section, the data is sorted.

Conclusion

So, this was about sorting the data by Table Header, in AngularJS. Hope this article was helpful !!

Also, refer to my previous articles on AngularJS.

• http://www.c-sharpcorner.com/article/overview-of-angularjs/
• http://www.c-sharpcorner.com/article/modules-and-controller-in-angularjs/
• http://www.c-sharpcorner.com/article/controllers-in-angularjs/
• http://www.c-sharpcorner.com/article/angularjs-ng-src-directive/
• http://www.c-sharpcorner.com/article/angularjs-ng-repeat-directive/
• http://www.c-sharpcorner.com/article/handling-events-in-angularjs/
• http://www.c-sharpcorner.com/article/how-to-use-two-way-data-binding-in-angularjs/
• http://www.c-sharpcorner.com/article/filters-in-angularjs2/