This tutorial explains how to sort Table’s rows according to the table’s column in Angular 9 using a directive approach. We will create a reusable component that will sort the table’s rows. To use this component zero configuration required in any component.ts file. Generally, we will be using an algorithm to sort data.
This sorting component can sort any type of data in a table like alphanumeric, string, number, and date. The configuration is too much less to implement.
Let’s start with creating an angular project
ng new sort
Now grab bootstrap CSS and JS CDN from https://getbootstrap.com/ and place it in index.html in the following sequence
Now create a component named table using the following command
It will create a table component inside the component folder in the app folder. We are trying to maintain a proper folder structure here.
Now let’s do npm start or ng serve in command prompt from the project directory, although both will start the angular project. Go to http://localhost:4200
Let’s create an array of IEmployee type inside table.component.ts
Datalist Array of IEmployee type
Now let’s create a table in table.component.html iterating over this dataList array
Now go to app.component.html, replace all existing HTML codes with the following one.
Go to http://localhost:4200 and the result will be like following
Now let’s create a folder util inside the app folder and create a sort.ts file inside the util folder
Now place the following code in sort.ts file
I will describe how the directive will be integrated with this algo after implementation.
Now let’s create a directive which we will configure in Table header for sorting according to a specific column.
It will create sort.directive.ts inside the directive folder.
Now open sort.directive.ts and replace existing code with the following code.
This directive will work onclick of the table header. We have set HostListener(“click”).
Now let’s see how to implement sorting in the table using the Directive approach.
Open table.component.html and replace the existing code with the following one.
Let’s see how this configuration work
- In [appSort] directive we are passing the list that we need to sort when clicking event fires
- In attribute data-order we are setting the initial sorting order of descending order(desc), you can make it in ascending order(asc) also
- In attribute data-name, we are setting the property name of that list which needs to be sorted onclick of that header. Like you can see onclick of Id we need to sort according to 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.
So that covers the configuration part for sorting in the table using the directive approach.
Let’s check how sorting is working in tables
- Onclick of Id header
- Onclick of Name Header
- Onclick of Age Header
- Onclick of Date of Birth header
So, we can see how perfect sorting is working in table rows.
Now let’s give a look to sort.directive.ts how it is working.
When you click on any table header following things are happening concurrently
- So when you pass list in [appSort], SortDirective stores that list in appSort.
- It will create an object of Sort class.
- The header, we are clicking on is stored in targetElem. So, store element reference in elem variable.
- Now get the initial order of that header using getAttribute(“data-order”) method and store it in order variable.
- Now get the property type of that header using getAttribute(“data-type”) method and store it in type variable.
- Now get the property name that needs to be sorted in that list using getAttribute(“data-name”) and store it in property variable.
- Now call the sort method of that list which accepts an optional argument which is a function that compares two elements of the array. Now call startSort method of Sort class which will take the property, order, and type as an argument.
- Now in the targetElem set the data-order exactly opposite of the current order.
And we are done here….
Check out the Github repository for Source Code
This project was generated with Angular CLI version 9.1.7. Run ng serve for a dev server. Navigate to…
In the next publish I will be explaining how to implement the same in React.JS, follow for some amazing articles on various things.
Full Stack Developer in Various Tech, Code Quotient