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.