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.
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.
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.
You can use a preset filter with either of the built-in filters to initialize 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.