Floating Filter Component - Imperative

An example floating filter component looks like this:

export default forwardRef((props, ref) => {
   const [value, setValue] = useState('');
   const [type, setType] = useState('contains');

     // expose AG Grid Filter Lifecycle callbacks
   useImperativeHandle(ref, () => {
       return {
           onParentModelChanged(parentModel) {
               setType(parentModel == null ? 'contains' : parentModel.type);
               setValue(parentModel == null ? null : parentModel.filter);
           },
       };
   });

   const onChange = ({ target: { value: newValue }}) => {
       setValue(newValue);
       props.parentFilterInstance((instance) => {
           instance.onFloatingFilterChanged(type, newValue === '' ? null : newValue);
       });
   };

   return (
       <input
           value={value}
           type="text"
           onChange={onChange}
       />
   );
});

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.

Custom Floating Filter Interface

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

interface IFloatingFilter {
   // 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;

   // 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

When a React component is instantiated the grid will make the grid APIs, a number of utility methods as well as the cell and row values available to you via props - the interface for what is provided is documented 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.