React Data Grid

Filter Component

react logo

Filter components allow you to add your own filter types to AG Grid. Use them when the Provided Filters do not meet your requirements.

React Custom Filter Components thumbnail

The example below shows two custom filters. The first is on the Athlete column and demonstrates a filter with "fuzzy" matching and the second is on the Year column with preset options.

Implementing a Filter Component

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

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

To implement the filtering logic, a custom filter needs to implement the doesFilterPass callback, and provide it to the useGridFilter hook.

export default ({ model, onModelChange, getValue }) => {
   const doesFilterPass = useCallback(({ node }) => {
       // filtering logic
       return getValue(node).contains(model);
   }, [model]);

   // register filter callbacks with the grid
   useGridFilter({ doesFilterPass });

   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 Filter Component.

Custom Filter Parameters

Filter Props

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