Angular 6 Sort Table By Column
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Amruta
In this article we will show you the solution of angular 6 sort table by column, this method returns an array that is sorted according to the item.
The reverse parameter can be used to reverse the sorting order. An array can be sorted by its name, for example, by sorting an array by name.
The item should be declared in an Array. Within the function checking the function parameter value is equal to the column property or not if it is equal, then check the reverse property if it is set to true then return arrow-down from the function otherwise arrow-up.
Step By Step Guide On Angular 6 Sort Table By Column :-
<!doctype html>
<html ng-app='myApp'>
<head>
<title>Sort the table on header click using 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>
- In our first step, we write <HTML>, which tells the browser what HTML version we're using. Documents in HTML begin with tags.
- An angular js application is defined by the ng-app directive. An application's controller is specified by the "ng-controller" directive within the ng-app directive.
- Using the <head> tag, we will explain the project's heading. <title> are open and </title>.
- AngularJs is a JavaScript framework. It can be added to an HTML page with a <script> tag. The script tag explains the source code we used for the angularjs google API run and the file we used for the code.
- Then head closed using </head>
- Then There is only one route in an Angular link, which means any business logic is handled by the controller 'AngularController'.
- The <table> tag defines an HTML table. An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements.
- Create an <table> element which contains 4 columns and each header column contains an ng-click directive for detecting click events and an ng-class directive for adding up and down arrows. ng-click and ng-class directives contain a function that takes the key name as a parameter.
- Then, Angularjs ng-repeat directive is a handy tool to repeat a set of HTML code several times. In short, it's used for range.
- Then tr closed using </tr> and table closed using </table>
- After that </div></body></html> and code should be executed after closed all tags.
Conclusion :-
In attribute data-name, we are setting the property name of that list which needs to be sorted on click of that header.
As you can see onclick of Id we need to sort according to the id property in that array.
If the property that needs to be sorted is a type of date, then you need to set data-type=” date” otherwise you can leave it.
If the date, this attribute must be set to date, otherwise sorting will not work on the date field.
I hope this article on angular 6 sort table by column helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
