Search code examples
vue.jsag-gridag-grid-vue

Need to use space separated values in AG-Grid filter to return each match

I'm tasked with moving some UI-Grids to AG-Grid. I need to allow the user to use a space delimited string for a column filter so "1 4 23 88" would return all rows where column has 1 or 4 or 23 or 88 as a value. AG-Grid has the drop down OR option but is added clicks and only allows two values.

With UI-Grid the filter parameter in columnDefs can have a condition:

filter:{condition: filterFunction}

FilterFunction simply has the custom logic and returned true or false.

Is there something similar with AG-Grid? Reading through the docs it seems to get overly involved to create a custom filter. The UI-Grid solution is like 6 lines of code.

CentOS 7, VueJS

Solution

  • I ended up using:

     filter:'agTextColumnFilter', filterParams: {textCustomComparator: this.filterFunction}

    With filterFunction holding the logic.

    https://www.ag-grid.com/javascript-grid/filter-text/#text-custom-comparator

    Though I'm using a number column there is not a comparator filterParam for numbers, only 'comparator' for dates and 'textCustomComparator' for text.

    This seems to work fine for what I need.