Built-in filters

Before reading this, you should make sure you read the previous section on custom filters. Done? Then you might be a bit overwhelmed by the complexity of custom filters, understandably. What if you want just a bit more than default string value filters, but phenomenal cosmic filter power turns out to be slightly overkill? This is where our built-in custom filters come handy. They let you customize specific parts of the filter like the filter matching function, without having to rewrite the whole thing yourself from two-way binding inputs to integration in the datagrid.

String filter

The first and default filter is the "string" filter one, meaning the user is offered a text input, and the rows will be filtered based on a string-matching function you provide. You should now be familiar with our use of interfaces for this, so here is the interface your string matcher should implement:

Once you have it, you simply need to pass it to a <clr-dg-string-filter> component:

In our example, we can allow the user to filter not only by pokemon name, but also by entering the exact number of the pokemon they are interested in.

Numeric filter

Another built-in filter is the numeric filter, which allows you to filter a column by a minimum and/or maximum numeric value. The "Wins" column demonstrates the numeric filter. You provide the function logic and the user can optionally enter high and low limits for elements in the column. In this case, use a <clr-dg-numeric-filter> component and pass the filter to the [clrDgNumericFilter] property.

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

Filters with preset values

You can use a preset filter with either of the built-in filters to initialze the data grid to a specific state. [(clrFilterValue)] can be pre-set to a string for a string filter or a range of numbers for a numeric filter. With numeric filters you can pass null for either of the limits to not set it. The example below sets a lower limit of 10 and no upper limit.

User ID Name Creation date Pokemon Favorite color Wins {{user.id}} {{user.name}} {{user.creation | date}} {{user.pokemon.name}} #{{user.pokemon.number}} {{user.wins}} {{users.length}} users
We are planning on writing more of these semi-customisable filters in future releases, including a filter where the user selects values among the ones that are actually present in the data.
If the one you are looking for isn't implemented yet, you can absolutely write it yourself using the fully customisable filters. And if you think it's good, feel free to contribute back to Clarity and add it for everyone!