React Data GridFloating Filter Component

react logo

Floating Filter Components allow you to add your own floating filter types to AG Grid. You can create a Custom Floating Filter Component to work alongside one of the grid's Provided Filters, or alongside a Custom Filter.

React Floating Filters thumbnail

Example: Custom Floating Filter

In the following example you can see how the Gold, Silver, Bronze and Total columns have a custom floating filter NumberFloatingFilter. This filter substitutes the standard floating filter for an input box that the user can change to adjust how many medals of each column to filter by based on a greater than filter.

Implementing a Floating Filter Component

To configure custom floating filters, first enable the grid option reactiveCustomComponents.

Custom floating filter components are controlled components, which receive a filter model as part of the props, and pass model updates back to the grid via the onModelChange callback. A filter model of null means that no filter is applied (the filter displays as inactive). Note that the filter is applied immediately when onModelChange is called.

export default ({ model, onModelChange }) => {
   return (
               value={model || ''}
               onChange={({ target: { value }}) => onModelChange(value === '' ? null : value)}

Enabling reactiveCustomComponents affects all custom components. If you have custom components built in an imperative way instead of setting the reactiveCustomComponents option, they may need to be rebuilt to take advantage of the new features that reactiveCustomComponents offers. Using custom components built in an imperative way is now deprecated, and in AG Grid v32 the reactiveCustomComponents option will be true by default. See Migrating to Use reactiveCustomComponents. For the legacy imperative documentation, see Imperative Floating Filter Component.

Custom Floating Filter Parameters

Floating Filter Props

The following props are passed to the custom floating filter components (CustomFloatingFilterProps interface). If custom props are provided via the colDef.floatingFilterParams property, these will be additionally added to the props object, overriding items of the same name if a name clash exists.