How to sort table rows according to a column in Angular 9

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.

Capability

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.

Create Project

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

Coding Part

Let’s create an array of IEmployee type inside table.component.ts

IEmployee interface

Datalist Array of IEmployee type

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

Table after iterating over dataList array

Now let’s create a folder util inside the app folder and create a sort.ts file inside the util folder

Folder structure

Now place the following code in sort.ts file

This sorting algorithm we will be using while sorting an array object

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.

Directive that will be handling click of event of table header

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.

Configuration for implementing sorting

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

According to Id column

• Onclick of Name Header

According to Name column

• Onclick of Age Header

According to Age Column

• Onclick of Date of Birth header

According to Date Of Birth Column

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

dev-sankhadip/Angular-Table-Sort-Coponent

In the next publish I will be explaining how to implement the same in React.JS, follow for some amazing articles on various things.

Sankhadip Samanta

Full Stack Developer in Various Tech, Code Quotient

Follow me on Linkedin 😃 and Github 😅