Custom AG Grid floating filters using React Components

Niall Crosby demonstrates how to create custom AG Grid floating filters using React Components. The floating filters use the underlying filter for the column and add a layer of rendering and editing to make filtering easier for the user.

00:00 starting from custom filters
01:00 floating filter basics
01:40 Floating Filter Component
02:25 Accessing Filter Models
03:50 Changing Filter Models
05:15 Floating Filter Responsibilities
05:58 props for Floating Filter
06:45 using filterParams
08:45 Life-cycle of a Floating Filter
10:06 Re-using Floating Filters
10:30 Summary

Learn more about custom floating filters in React:

https://www.ag-grid.com/react-data-grid/component-floating-filter/

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