Datagrid sort number - want null last

Question

Is there any way of setting up sort on a datagrid column that is numeric but can be null so that if the user sorts the list it will always show null last ie asc would be 1,2,3,null desc would be 3,2,1,null

Useful as a lot of rows will have null value and if clicking the sort then user is focussed on seeing the info that is thee sorted as above.

Answer 1

Columns can have a custom sorting function that an app supplies.

I'll list an overview and then leave a stackblitz link to a working app so you can reference working code.

First, define a CustomComparator for the app to consume:

import {ClrDatagridComparatorInterface} from "@clr/angular";

class CustomComparator implements ClrDatagridComparatorInterface<any> {
    compare(a: any, b: any) {
      if (a.key && b.key) {
        return a.key - b.key;
      } else {
        return null;
      }
    }
}

Next, declare the comparator as a public entity in the component with the datagrid

public customComparator = new CustomComparator();

Finally, update the template to declare usage of the custom comparator on the column that needs it:

<clr-dg-column [clrDgField]="'key'"
  [clrDgSortBy]="customComparator">
    Key
</clr-dg-column>

Here is a link to a stackblitz with a custom comparator implanted that always return null items last. https://stackblitz.com/edit/so-58020609-custom-sorting