Custom Filter React Components for AG Grid's React Data Grid

The default filters provided by AG Grid can be customised both in terms of the GUI and the underlying logic to filter the items. In this video Niall Crosby explains how to create a custom filter and all the API methods associated. This is a very powerful customisation feature and is worth mastering.

00:00 creating custom filters
01:24 API Interface
02:24 Creating the GUI
02:50 Implementing Filtering
04:06 Filtering with Options
05:58 Using filterParams and props
07:38 Make Filter GUI Configurable
09:05 Filter Models
11:14 getModelAsString
13:08 onNewRowsLoaded
13:32 onAnyFilterChanged
14:05 destroy
15:06 afterGuiAttached
15:31 App calling filter
17:10 Summary

Learn more about custom filters https://ag-grid.com/react-data-grid/filter-custom/

AG Grid works with React, Angular, Vue, and JavaScript. Available as a free community edition and commercially as an Enterprise product (full support and more features).

For more information about AG Grid please visit: https://ag-grid.com/

This is part of a series of video tutorials showing how to get started with AG Grid and React.

All videos are available in a playlist:

https://www.youtube.com/playlist?list=PLsZlhayVgqNwHNHeqpCkSgdRV08xrKtzW

And directly available below:

- 001 - QuickStart Guide
- https://youtu.be/Pr__B6HM_s4
- 002 - Enterprise Overview
- https://youtu.be/pKUhYE1VTP4
- 003 - Customizing Cells
- https://youtu.be/9IbhW4z--mg
- 004 - React Rendering
- https://youtu.be/oAQ5vavDupU
- 005 - React Filters
- https://youtu.be/pebXUHUdlos
- 006 - React Custom Filters
- https://youtu.be/yO3_nTyDv6o
- 007 - React Custom Floating Filters
- https://youtu.be/CxwfX4KodaM
- 008 - React Components
- https://youtu.be/eglfpHRpcu0
- 009 - Updating Row Data
- https://youtu.be/_V5qFr62uhY

Source code for all videos is available on Github:

https://github.com/ag-grid/react-data-grid/tree/main/getting-started-video-tutorial