ngTable with custom sort [empty values first]
Let me start by saying the background story
Then in the "comparatorFunc" I would return 0 for all the null values. This would result them being sorted on top in ascending order.
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.
GitHub repo for the proof of concept: https://github.com/kumudug/ng-table-customBinding-sorting-inlineEditing
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
Post a Comment