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 Copy Link
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 Copy Link
To configure custom floating filters, first enable the grid option enableFilterHandlers.
If you do not enable the grid option enableFilterHandlers, it is still possible to use custom floating filters, however this is not recommended. See Legacy Floating Filter Component.
The interface for a custom floating filter component is as follows:
interface IFloatingFilterDisplayAngularComp {
// Mandatory methods
// The agInit(params) method is called on the floating filter once.
// See below for details on the parameters.
agInit(params: FloatingFilterDisplayParams): void;
// Called when the column definition or model is updated.
refresh(params: FloatingFilterDisplayParams): void;
// Optional methods
// Gets called every time the popup is shown, after the GUI returned in
// getGui is attached to the DOM. This is useful for any logic that requires attachment
// before executing, such as putting focus on a particular DOM element.
afterGuiAttached(params?: IAfterGuiAttachedParams): void;
}
Custom Floating Filter Parameters Copy Link
The agInit(params) / refresh(params) methods take a params object with the items listed below. If custom params are provided via the colDef.floatingFilterComponentParams property, these will be additionally added to the params object, overriding items of the same name if a name clash exists.
Properties available on the FloatingFilterDisplayParams<TData = any, TContext = any, TModel = any, TCustomParams = object> interface.
The params object passed to the filter. This is to allow the floating filter access to the configuration of the parent filter. For example, the provided filters use debounceMs from the parent filter params. |
The current applied filter model for the column.
|
Callback that should be called every time the model in the component changes.
additionalEventAttributes If provided, will be passed to the filter changed event
|
Callback that can be optionally called every time the floating filter UI changes. The grid will respond with emitting a FloatingFilterUiChangedEvent. Apart from emitting the event, the grid takes no further action. The callback takes one optional parameter which, if included, will get merged to the FloatingFilterUiChangedEvent object.
|
Get the filter handler instance. If using a SimpleColumnFilter, the handler is is a wrapper object containing the provided doesFilterPass callback.
|
'init' | 'ui' | 'filter' | 'api' | 'colDef' | 'dataChanged' |
The column this filter is for. |
Shows the parent filter popup.
|
The grid api. |
Application context as set on gridOptions.context. |
Example: Custom Filter And Custom Floating Filter Copy Link
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 Copy Link
If you want to provide a custom filter but don't want to provide an equivalent custom floating filter, you can implement getModelAsString() on the filter handler 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.
Next Up Copy Link
Continue to the next section to learn about Advanced Filters.