Built-in column filters overview for the React Data Grid from AG Grid

In this video Niall Crosby, CEO of AG Grid, provides an overview of the built-in column filters for AG Grid. This video uses the React Data Grid. Columns can be filtered to allow the user to configure the data shown in the grid. Three filters are supplied with AG Grid community edition: text, number and date. An additional set and multi filter are available to the enterprise edition. The filters can also be configured through the API.

00:00 about filters
00:20 default filters
00:55 text, number and date filters
02:38 filter parameters
03:55 filter buttons
05:45 filtering by dates
06:30 filter state models
09:18 floating filters
10:10 Enterprise filters
12:43 Filter Menu Container
13:35 Summary

Learn more about Column Filtering for AG Grid's React Data Grid:

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

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:

Source code for all videos is available on Github:

[godwinamadi]

This was really helpful, thanks Niall Crosby

[LukiausdemKaff]

amazing good tutorials. The speed is really good. Really the best to start. I tried first with the documentation. But here is explained a lot in short time. And it gives me more ideas
Hope there is more to come

[MaxShypko]

is there a way to modify the logic of how filters are getting applied together? For example, we have filters on column A and column B. By default the filters are applied A&B, but I need A || B

[mohitidol]

How can you have apply and reset filter button for agMultiColumnFilter?

[adilkevin]

How can I change the filter's default icon, which is three lines stacked on top of one another? I would prefer the Filter icon.

[svapnilraut]

Is there a way I can get the applied filters list in ag-grid? I want to show applied filters at the top of the grid with a cross, so when user clicks on cross of that small card with filter name on it, the filter will be removed from the grid.

[damiandanev]

I created a custom react filter that has a dropdown. When I use the filter from the column header the dropdown menu is bigger than the container of the filter and I am not able to actually select any items from the dropdown, it just cancels the filter as if I clicked somewhere on the table. Is this a CSS thing or an event not being handled properly? How can I solve this?

[shilpachopde]

Hi, I tried to do so but it doenst work. Actually I am calling the table from backend and then trying to add filter in the columndef. Althought the filter value is accepted in the definition but the table is not displayed after this step. I get the following error :
Uncaught TypeError: element.setAttribute is not a function
at addCssClass (dom.js:34:1)
VM2591:2 Uncaught ReferenceError: process is not defined
at Object.4043 (<anonymous>:2:13168)

[dhawalparmar]

Tutorial is great, please make video on export CSV file