Angular Data GridText Filter

angular logo

Text Filters allow you to filter string data.

Enabling Text Filters

The Text Filter is the default filter used in AG Grid Community, but it can also be explicitly configured as shown below:

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */>
</ag-grid-angular>

this.columnDefs = [
    {
        field: 'athlete',
        // Text Filter is used by default in Community version
        filter: true,
        filterParams: {
            // pass in additional parameters to the Text Filter
        },
    },
    {
        field: 'country',
        // explicitly configure column to use the Text Filter
        filter: 'agTextColumnFilter',
        filterParams: {
            // pass in additional parameters to the Text Filter
        },
    },
];

Example: Text Filter

The example below shows the Text Filter in action:

  • For the Athlete column:
    • There are only two Filter Options: filterOptions = ['contains', 'notContains']
    • There is a Text Formatter, so if you search for 'o' it will find 'ö'. You can try this by searching the string 'Bjo'.
    • The filter has a debounce of 200ms (debounceMs = 200).
    • Only one Filter Condition is allowed (maxNumConditions = 1)
  • For the Country column:
    • There is only one Filter Option: filterOptions = ['contains']
    • There is a Custom Matcher so that aliases can be entered in the filter, e.g. if you filter using the text 'usa' it will match United States or 'holland' will match 'Netherlands'
    • The filter input will be trimmed when the filter is applied (trimInput = true)
    • There is a debounce of 1000ms (debounceMs = 1000)
  • For the Sport column:
    • There is a different default Filter Option (defaultOption = 'startsWith')
    • The filter is case-sensitive (caseSensitive = true)

Text Filter Parameters

Text Filters are configured though the filterParams attribute of the column definition (ITextFilterParams interface):