AG Grid Tip: Quick Filter on only Visible Columns

AG Grid provides a handy "quick filter" that enables you to filter all your grid data by providing a string filter value. In most use cases this will work out the box giving you a very powerful feature for very little dev work.

However, you may find that you need to make small adjustments to the quick filter so that it behaves exactly how you want it too. For example, you may want certain columns excluded or you may need to apply a small amount of formatting to a field or two.

Quick Filter Visible Columns

As the title suggests we are going to show how you can updated your grid configuration to have the quick filter only search columns that are visible. (By visible we mean columns that are present in the grid even if they are scrolled off the screen)

By default the quick filter searches against all columns that you define using their field definition, valueGetter or getQuickFilterText callback respectively.

To control the filtering based on the column hidden status we will need to implement the getQuickFilterText for all of our columns.

Handily the getQuickFilterText callback passes us the colDef as one of its parameters so we can write the following method to achieve our goal.

getQuickFilterText: (params: GetQuickFilterTextParams) =>  {
  // Return empty string to ignore filter string  
  return params.colDef.hide ? '' : params.value;            
}

Here we check if the column is hidden and if it is we return the empty string so that this column does not have any effect on the filtering.

Taking Advantage of the Default Col Def

We want this to apply to all our columns so that no matter which are hidden we get the correct filtering behaviour. Fear not we do not have to apply this method to every definition!

This is a perfect use case for the defaultColDef. Any column properties that you set on the default column will be shared across every column.

So our code would look something like this where we have 4 columns.

// Method to call with the updated filter value
onFilterTextBoxChanged(filterValue: string) {
  gridOptions.api.setQuickFilter(filterValue);
}

const gridOptions = {
  defaultColDef: {
    getQuickFilterText: function(params) {
      return params.colDef.hide ? '' : params.value; 
    }
  },
  columnDefs: [
    { field: 'a' },
    { headerName: 'B', field: 'b.name' },
    { headerName: 'C', valueGetter: "'CC' + data.c.name" },
    {
      field: 'd',
      // A complex object that requires its own implementation instead of the default
      getQuickFilterText: function(params) {
        return params.colDef.hide ? '' : params.value.name;
      }
    }
  ],

It is worth noting how the first three columns share the default implementation of getQuickFilterText with the hidden logic. However, we are still able to override this as required for the D column which needs further customisation.

AG Grid Filtering

The quick filter is just one of the many filtering approaches supported by AG Grid. To see all the possible ways to filter your data visit our filter overview documentation.