For an easy setup of datagrid column features, you can simply specify the property to bind it to in your model. When you
do, the column will benefit for all built-in features for this case: sorting based on the natural comparison, filtering
based on string value, and anything else we might add in the future. Please note that the default sort order for strings
will be case-insensitive. If this isn't the desired behavior, you will have to write a custom comparator. You can bind
to as deep a property as you want in your model, using a standard dot-separated syntax:
[clrDgField]="'my.deep.property'"
You can also see in the following example how every feature we offer is always opt-in: we did not declare any binding on the "Favorite Color" column, which means it is not sortable of filterable.
By default, bound columns are assumed to contain string-like contents and the user is presented with the normal string filter.
If you know that the contents of the column will be numeric, you can instead use the built-in numeric range filter by adding
clrDgColType="'number'"
. You can see an example of this in the ID column.
[clrDgField]
input is a hard-coded string, so it needs to be quoted twice:
[clrDgField]="'name'"
.
clrDgField="name"
, without having the extra quotes, but we do not recommend this. In particular, this leaves a potentially unwanted
attribute on the element, whereas the previous syntax only adds a property to the corresponding Javascript object.