Text Filter

Text filters allow you to filter text data. The pages Provided Filters and Provided Simple Filters explains the parts of the text filter that are similar to the other provided filters. This page builds on that and explains some details that are specific to the text filter.

Text Custom Comparator

By default the text filter does strict case insensitive text filtering: ie If you provide as data for a text column the following values ['1,234.5USD', '345GBP']:

  • contains '1,2' Will show 1 value: ['1,234.5USD']
  • contains '12' Will show 0 values
  • contains '$' Will show 0 values
  • contains 'gbp' Will show 1 value ['345GBP']

You can change the default behaviour by providing your own textCustomComparator. Using your own textCustomComparator you can provide your own logic to decide when to include a row in the filtered results.

The textCustomComparator is a function with the following signature:

(filter:string, gridValue:any, filterText:string):boolean;
  • filter:string The applicable filter type being tested. One of: {equals, notEqual, contains, notContains, startsWith, endsWith}
  • gridValue:any The value about to be filtered, if this column has a value getter, this value will be coming off the value getter, otherwise it is the raw value injected into the grid
  • filterText:string The value to filter by.
  • returns:boolean True if the value passes the filter, otherwise false.

The following is an example of a textCustomComparator that mimics the current implementation of ag-Grid. This can be used as a template to create your own.

function myComparator (filter, value, filterText) { var filterTextLoweCase = filterText.toLowerCase(); var valueLowerCase = value.toString().toLowerCase(); switch (filter) { case 'contains': return valueLowerCase.indexOf(filterTextLoweCase) >= 0; case 'notContains': return valueLowerCase.indexOf(filterTextLoweCase) === -1; case 'equals': return valueLowerCase === filterTextLoweCase; case 'notEqual': return valueLowerCase != filterTextLoweCase; case 'startsWith': return valueLowerCase.indexOf(filterTextLoweCase) === 0; case 'endsWith': var index = valueLowerCase.lastIndexOf(filterTextLoweCase); return index >= 0 && index === (valueLowerCase.length - filterTextLoweCase.length); default: // should never happen console.warn('invalid filter type ' + filter); return false; } } }

Text Formatter

The grid compares the text filter with the values in a case insensite way, thus 'o' will match 'Olivia' and 'Salmon', however it will not match against 'Björk'. If you want to match in any other way (eg you want to makes against accents), or you want to have case sensitive matches, then you should provide your own textFormatter.

The textFormatter is a function with the following signature

(gridValue:string):string;
  • gridValue:string The value coming from the grid. This can be the valueGetter if there is any for the column, or the value as originally provided in the rowData
  • returns:string The string to be used for the purpose of filtering.

If no textFormatter is provided the grid will convert the text to lower case. Is important to note that when comparing to the text entered in the filter box, the text in the filter box is converted always to lower case.

The following is an example to remove accents and convert to lower case.

function(s){ var r=s.toLowerCase(); r = r.replace(new RegExp("\\s", 'g'),""); r = r.replace(new RegExp("[àáâãäå]", 'g'),"a"); r = r.replace(new RegExp("æ", 'g'),"ae"); r = r.replace(new RegExp("ç", 'g'),"c"); r = r.replace(new RegExp("[èéêë]", 'g'),"e"); r = r.replace(new RegExp("[ìíîï]", 'g'),"i"); r = r.replace(new RegExp("ñ", 'g'),"n"); r = r.replace(new RegExp("[òóôõö]", 'g'),"o"); r = r.replace(new RegExp("œ", 'g'),"oe"); r = r.replace(new RegExp("[ùúûü]", 'g'),"u"); r = r.replace(new RegExp("[ýÿ]", 'g'),"y"); r = r.replace(new RegExp("\\W", 'g'),""); return r; };

Example Text Filter

  • The athlete column has only two filter options: filterOptions=['contains','notContains']
  • The athlete column has a text formatter so if you search for 'o' it will find ø You can try this by searching the string 'Bjo'
  • The athlete column has a debounce of 0ms debounceMs:0. This is used by both the parent and floating filter components.
  • The athlete column filter is case sensitive, note that it has the following flag: caseSensitive:true
  • The athlete column filter has the AND/OR additional filter suppressed, note that it has the following flag: suppressAndOrCondition:true
  • The country column has only one filter option: filterOptions=['contains']
  • The country column has a textCustomComparator so that there are aliases that can be entered in the filter ie: if you filter using the text 'usa' it will match United States or 'holland' will match 'Netherlands'
  • The country column filter has a debounce of 2000ms debounceMs:2000
  • The year column has one filter option filterOptions=['inRange'].
  • The sports column has a different default option defaultOption='startsWith'