Angular 6 Sort Table By Column
Last Updated : Jul 1, 2023
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 :-
- 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>.
- 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.
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.