ag-gridag-grid-react

How do I make the filter ignore case and spacing?


I've inherited some React code which uses AG Grid; I haven't delved into it much because it has pretty much just worked, but now I'm stumped on an issue.

I have a table with a postcode field, defined like this:

  {
    field: 'postcode',
    headerName: 'Post Code',
    floatingFilter: true,
    filter: true,
    floatingFilterComponent: BasicTextFilter,
    suppressHeaderFilterButton: true
  }

This shows the filter box under the postcode header, and if the user enters a postcode, it works. However, I want the user to be able to enter the postcode in any format and it still work. For instance, if a row has postcode BT1 1AA then I'd like the user to be able to enter 'bt11aa' or 'bT11 aA' and it still work.

I can't figure out how to do this with the filter though. I can change it in the API call by removing spaces and case from the string, but then the table doesn't show the results when they come through (e.g. if there's a row with 'BT1 1AA' and the user types 'bT 11aA', I can pass through 'bt11aa' and the API returns the row, but the table doesn't actually show it, presumably because it's detected that the row doesn't fit what's been typed in).

How do I implement this?

(Let me know if you need to see more of the code; I'm so unfamiliar with AG Grid that I'm not sure which parts are relevant)


Solution

  • Here's the solution which worked (thanks to C3roe)

        field: 'postcode',
        headerName: 'Post Code',
        floatingFilter: true,
        filter: true,
        filterParams: {
          textFormatter: (from:string) => {
            return from.toLowerCase().replace(' ','')
          }
        },
        floatingFilterComponent: BasicTextFilter,
        suppressHeaderFilterButton: true
      },