Sort the table on header click using AngularJS

In this tutorial, we learn How you can sort table content on Table header click using AngularJS.

What we create?

We will create a Table structure which sort in Ascending or Descending order when table header get clicked by the user and add arrow symbol right to it based on sort ordering.

For sorting table, we use the orderBy filter with the ng-repeat directive.

Sort the table on header click using AngularJS


Contents

  1. orderBy filter
  2. HTML
  3. Controller
  4. CSS
  5. Result
  6. Conclusion

 


 

orderBy filter

Return a sorted Array based on the item. You can change the sorting order by specifying the reverse parameter.

Syntax –

{{ orderBy_expression | orderBy : expression : reverse  }}

orderBy Parameters –

Expression

It contains the name of an item by which data get sorted for e.g. sorting Array by name. The item should be declared in an Array.

You may think it as a key name.

reverse

It is an optional parameter, it takes Boolean value which is default set to false for ascending, For descending set it true.

There is another way to do this, by using + and

ng-repeat="friend in friends | orderBy: '+sno' "

Sort in ascending order.

ng-repeat="friend in friends | orderBy: '-sno' "

Sort in descending order.

I use the first syntax, in the tutorial demonstration.


 

HTML

Defining ng-app directive in <html> and ng-controller directive to <body>. Create an <table> element which contains 4 column and each header column contain ng-click directive for detecting click event and ng-class directive for adding up and down arrow.

ng-click and ng-class directives contain a function which takes the key name as a parameter.

Using ng-repeat directive to get data from friends Object and creating new rows. ng-repeat also, contain a filter by which we sort the table.

Completed Code

<!doctype html>
<html ng-app='myApp'>
 <head>
 <title>ng-include directives in AngularJS</title>
 <link href="style.css" rel='stylesheet' type='text/css'>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" type='text/javascript'></script>
 <script src='controller.js' type='text/javascript'></script>
 </head>
 <body ng-controller="myController"> 
 
 <table border='1'>
 <tr >
 <th ng-click='sortColumn("sno")' ng-class='sortClass("sno")'>S.no</th>
 <th ng-click='sortColumn("name")' ng-class='sortClass("name")'>Name</th>
 <th ng-click='sortColumn("age")' ng-class='sortClass("age")'>Age</th>
 <th ng-click='sortColumn("gender")' ng-class='sortClass("gender")'>Gender</th>
 </tr>
 <tr ng-repeat='friend in friends|orderBy:column:reverse'>
 <td width='20%' align='center'>{{friend.sno}}</td>
 <td width='35%' align='center'>{{friend.name}}</td>
 <td width='20%' align='center'>{{friend.age}}</td>
 <td width='25%' align='center'>{{friend.gender}}</td>
 </tr>
 </table>
 
 </body>
</html>

 

Controller

Create a new script file name it controller.js.

Creating a new controller myController which has friends property which contains data which we used to show in table element using ng-repeat directive.

And also defined 4 more directives – column,reverse,sortColumn, and sortClass.

Properties-

column – It contain the key from friends Object by which table is sorting, it is default set to sno.

reverse – For detecting ascending or descending ordering. The default value set to false for ascending.

sortColumn – It contains a function, which called when table header clicked, it takes the key name as a parameter. Using this function change the default value of above-created properties.

sortClass  – It also contains a function which takes the key name as a parameter. This function returns class name based on the expression.

Within function checking the function parameter value is equal to column property or not if it is equal, then check the reverse property if it is set to true then return arrow-down from function otherwise arrow-up.

If the parameter is not equal to column property then return an empty value.

Completed Code

// Module
var app = angular.module('myApp',[]);

// Controller
app.controller('myController',function($scope){
 
 // Object
 $scope.friends = [
 {sno:1,name:'Yogesh Singh',age:23,gender:'Male'},
 {sno:2,name:'Sonarika Bhadoria',age:23,gender:'Female'},
 {sno:3,name:'Vishal Sahu',age:24,gender:'Male'},
 {sno:4,name:'Sanjay Singh',age:22,gender:'Male'}
 ];
 
 // column to sort
 $scope.column = 'sno';
 
 // sort ordering (Ascending or Descending). Set true for desending
 $scope.reverse = false; 
 
 // called on header click
 $scope.sortColumn = function(col){
 $scope.column = col;
 if($scope.reverse){
 $scope.reverse = false;
 $scope.reverseclass = 'arrow-up';
 }else{
 $scope.reverse = true;
 $scope.reverseclass = 'arrow-down';
 }
 };
 
 // remove and change class
 $scope.sortClass = function(col){
 if($scope.column == col ){
 if($scope.reverse){
 return 'arrow-down'; 
 }else{
 return 'arrow-up';
 }
 }else{
 return '';
 }
 } 
});

 

CSS

For displaying up and down arrows when Table header clicks defined arrow-up and arrow-down classes.

Completed Code

/*table */
table{
 border-collapse: collapse;
}
table th,table td{
 padding: 3px;
}

table th:hover{
 cursor: pointer;
}

.arrow-down:after,.arrow-up:after{
 content: ' ';
 position: relative;
 left: 2px;
 border: 8px solid transparent;
}

.arrow-down:after{
 top: 10px;
 border-top-color: black;
}

.arrow-up:after{
 bottom: 15px;
 border-bottom-color: black;
}

.arrow-down,.arrow-up{
 padding-right: 10px;
}

 

Result

Final output of the demonstration –

 


 

Conclusion

Use orderBy filter to sort the content of the table when table header gets clicked. Using ng-repeat directive for displaying content on table element and defined ng-click directive on each header column for detecting click event on table header.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *