Custom Filter React Components for AG Grid's React Data Grid
This video covers v31.0.1 of AG Grid and earlier. Watch our latest video for v31.0.2 and up: • Custom Filter React Components for AG 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/f...
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:
• React and AG Grid Tutorial
And directly available below:
001 - QuickStart Guide
• Quickstart Tutorial for the React Data Gri...
002 - Enterprise Overview
• Quickstart Tutorial for AG Grid Enterprise
003 - Customizing Cells
• Customising Cells with React Components as...
004 - React Rendering
• 100% React Rendering, Avoiding Wasted Renders
005 - React Filters
• Built-in column filters overview for the R...
006 - React Custom Filters
• Custom Filter React Components for AG Grid...
007 - React Custom Floating Filters
• Custom AG Grid floating filters using Reac...
008 - React Components
• Custom React Components Overview
009 - Updating Row Data
• Updating row data in React Directly and Ef...
Source code for all videos is available on Github:
https://github.com/ag-grid/react-data...