Custom filters

Similarly to the advanced sorting features, sometimes the default filter on a string property is not what you need. When this is the case you can write your own filter, with fully custom template and controller, and both wrap it in and pass it to a <clr-dg-filter> component in your column declaration. This can be done whether or not your column is declared as a clrDgField, and will always take precedence over it if it is.

The filter you provide to the <clr-dg-filter> component needs to implement the ClrDatagridFilterInterface interface provided by Clarity:

There are several ways to pass your filter to the <clr-dg-filter> component:

In our example, we can create "color picker" filter, rather than have to search by color name.

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

Preset Column Filters

You can use a preset filter on columns to initialze the data grid to a specific filtered state. [(clrFilterValue)] can be pre-set.

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