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 ClrDatagridComparatorInterface
interface provided by Clarity.
In our example, everyone knows pokemon should not be sorted lexicographically, but according to Pokédex number.
The datagrid is currently {{sortOrder !== 0 ? "" : "not"}} sorted{{sortOrder === 1 ? " ascendingly" : sortOrder === -1 ? " descendingly" : ""}}.
The following example is showcasing the deprecated way of sorting pokemon. This will be removed in the next major release.
The datagrid is currently {{sorted ? "" : "not"}} sorted.
Columns can be pre-sorted ascending or descending by declaring the clrSortOrder
input on clr-dg-column
. You must also provide the
[clrDgField]
so it knows what field in the provided object to sort on. Clarity
provides an enum for such a scenario: ClrDatagridSortOrder
Here is an example that presorts the Name column for descending sort order.