Custom sort

Sometimes, the natural sort order for a property is not the relevant one. Sometimes, a column is not even a property on your model but is dynamically generated instead. In these cases, you might want to specify a custom comparator to sort the column according to your needs. This can be done by providing a comparator through the [clrDgSortBy] input, whether or not your column is declared as a clrDgField, and will always take precedence over it if it is.

A comparator is just an object that implements a compare method that could be given as parameter to Javascript's native Array.sort() function. In other words, if a and b are two elements being compared, then:

The safest way to check that your types comply with our API is to have your comparator be an instance of a class that implement the Comparator interface provided by Clarity.

Why use an object instead of the function directly?
Using an object implementing an interface allows strong type-checking, which is safer for your application. If your sorting function does not comply with our API, you will get a clear error during typescript compilation, instead of an obscure one during runtime.
Admittedly, we could achieve strong typing by exporting a function signature instead of a whole interface, but not only do interfaces leave room for future features without forcing breaking changes, they also encourage you to write your business logic outside of the controller, naturally creating pure Typescript or Javascript "logic" classes, which are far more reusable.

In our example, everyone knows pokemons should not be sorted lexicographically, but according to Pokédex number.

User ID Name Creation date Pokemon Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} #{{user.pokemon.number}} {{users.length}} users