Angular Data Grid

Floating Filter Component

angular 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.

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

The interface for a custom floating filter component is as follows:

interface IFloatingFilterAngularComp<ParentFilter = any> {
   // Mandatory methods

   // The agInit(params) method is called on the floating filter once.
   // See below for details on the parameters.
   agInit(params: IFloatingFilterParams<ParentFilter>): void;

   // Gets called every time the parent filter changes. Your floating
   // filter would typically refresh its UI to reflect the new filter
   // state. The provided parentModel is what the parent filter returns
   // from its getModel() method. The event is the FilterChangedEvent
   // that the grid fires.
   onParentModelChanged(parentModel: any, event: FilterChangedEvent): void;

   // Optional methods

   // A hook to perform any necessary operations when the column definition is updated.
   refresh(params: IFloatingFilterParams): void;

   // Gets called every time the popup is shown, after the GUI returned in
   // getGui is attached to the DOM. If the filter popup is closed and re-opened, this method is
   // called each time the filter is shown. 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

The agInit(params) method takes 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.