Floating Filters

Floating filters are a really neat feature in ag-Grid. They're an additional row under the column headers where the user will be able to see and optionally edit the filters associated to each column.

All we need to do to enable floating filters is pass in a new floatingFilter prop to our AgGridReact component:

// src/App.js
<AgGridReact
    onGridReady={this.onGridReady}
    columnDefs={this.state.columnDefs}
    rowData={this.state.rowData}
    floatingFilter={true}
    defaultColDef={this.state.defaultColDef}
></AgGridReact>

When you run npm start and navigate to localhost:3000, you'll see a new row of filters underneath the column headers. These floating filters let you update filters quickly.

We've learned the basics of filters, so let's take a look at some additional filter options in the next video.