Quick Filter

You know how when you search in Gmail, you get results across multiple fields? ag-Grid has a similar feature called Quick Filter. Let's add this to our app.

First, let's add an input above our AgGridReact component:

// src/App.js
<input
  type="text"
  placeholder="Quick Filter"
  onChange={this.handleQuickFilter}
/>

Then, we'll create a function in our component called handleQuickFilter to set the quick filter using the grid API:

// src/App.js
handleQuickFilter = event => {
  this.gridApi.setQuickFilter(event.target.value);
};

If you run npm start and navigate to localhost:3000, you'll be able to search for text in the Quick Filter input and immediately see the grid update. Pretty cool, right?

Note: ag-Grid doesn't need any configuration for basic data used with the Quick Filter, but if your data includes complex objects, you can override that value to specify it yourself. Check out this section on overriding quick filter values in the documentation.

In the next video, we'll learn how to programatically update filters, even on multiple columns at the same time.