Custom AG Grid floating filters using React Components
This video covers v31.0.1 of AG Grid and earlier. Watch our latest video for v31.0.2 and up: • Custom AG Grid floating filters using...
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-gr...
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 Dat...
002 - Enterprise Overview
• Quickstart Tutorial for AG Grid Ente...
003 - Customizing Cells
• Customising Cells with React Componen...
004 - React Rendering
• 100% React Rendering, Avoiding Wasted...
005 - React Filters
• Built-in column filters overview for ...
006 - React Custom Filters
• Custom Filter React Components for AG...
007 - React Custom Floating Filters
• Custom AG Grid floating filters using...
008 - React Components
• Custom React Components Overview
009 - Updating Row Data
• Updating row data in React Directly a...
Source code for all videos is available on Github:
https://github.com/ag-grid/react-data...