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.
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 (
<div>
<input
type="text"
value={model || ''}
onChange={({ target: { value }}) => onModelChange(value === '' ? null : value)}
/>
</div>
);
}
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.
Floating Filter Callbacks
The following callbacks can be passed to the useGridFloatingFilter
hook (CustomFloatingFilterCallbacks
interface). All the callbacks are optional, and the hook only needs to be used if callbacks are provided.
Floating Filter Lifecycle
Floating filters do not contain filter logic themselves, they are just an additional UI component for the underlying filter component. For this reason, the floating filters lifecycle is bound to the visibility of the column; if you hide a column (either set not visible, or horizontally scroll the column out of view) then the floating filter UI component is destroyed. If the column comes back into view, it is created again. This is different to column filters, where the column filter will exist as long as the column exists, regardless of the column's visibility.
To see examples of the different ways to implement floating filters please refer to the examples below.
Example: Custom Filter And Custom Floating Filter
This example extends the previous example by also providing its own custom filter NumberFilter
in the Gold, Silver, Bronze and Total columns.
Example: Custom Filter And Read-Only Floating Filter
If you want to provide a custom filter but don't want to provide an equivalent custom floating filter, you can implement getModelAsString()
and you will get a read-only floating filter for free.
This example uses the previous custom filter but implements getModelAsString()
. Note how there are no custom floating filters and yet each column using NumberFilter
(Gold, Silver, Bronze and Total) has a read-only floating filter that gets updated as you change the values from the main filter.
Sliding Floating Filters
The below example shows how to create a custom floating filter re-using the out-of-the-box Number Filter .