ngTable with custom sort [empty values first]

Let me start by saying the background story

I was building a simple grid layout for an enterprise project and the requirement was to show the details in a grid view and the grid view needed sorting. So I just spent a couple of hours to set up the required bower packages for ng-table and write a simple html template and the angular code to support it and I thought I was done.  

Not so fast.......

The test came back failed with reasoning "Sorting is not working as expected.". Apparently they wanted the empty values to be displayed on top in an "Ascending" order which is not the default feature of AngularJS orderby filter. So this is how I fixed it.




Problem

When implementing sorting, I used the default AngularJS orderby filter service. Which puts empty values at the bottom. According to the requirement specification this was not desirable.

Solution

Angular orderby filter has several options. One of these is the ability to give a getter function that enables you to override the value compared, to determine the sorting. This is the path I took.

So when applying the orderby filter I have given the comparator function as below









Then in the "comparatorFunc" I would return 0 for all the null values. This would result them being sorted on top in ascending order.




Comments

Popular posts from this blog

Nextcloud and PHP8

Setting up KDiff3 to work with TortoiseGIT

Nextcloud on Arch Linux (Encrypted System) [Part 01 - Preparation]