Provided filters are the filters that come as part of the grid. In total there are four provided filters, three simple filters (Text, Number and Date Filters) and one advanced filter (Set Filter). The simple filters are available in the community version of ag-Grid. The advanced Set filter is only available in ag-Grid Enterprise.
The diagram below outlines the structure of the filters. Each box represents a filter type with the functions listed in it. For example all provided filters have Apply and Clear button logic. Only the Date filter has a Date Comparator or a Date Picker.
Provided Filter Functions
This page describes the functionality common to all provided filters. See Simple Filters for additional information relative to simple filters. See Set Filter for additional information on the Set filter.
Provided Filter UI
Each provided filter is displayed in a UI with optional Clear and Apply buttons at the bottom.
Provided Filter Params
All of the provided filters have the following parameters:
|debounceMs||By default the
Number will debounce by 500ms.
This is because these filters have text field inputs, so time is given to the user to type items in.
Date will execute immediately (no debounce).
To override these defaults, set
|newRowsAction||This property is for when using the Client Side Row Model only. If set to 'clear', then setting data into the grid by calling api.setRowData() (or updating the rowData property if bound by a framework) will clear (reset) the filter. If set to 'keep' then the grid will keep it's currently set filter. The default is 'clear', so set to 'keep' if you want to keep filter state before loading new data into the grid.|
Apply & Clear Buttons
Each of the provided filters can have an Apply and / or Clear button.
When the Apply button is active, the filter is only applied after the Apply button is pressed. This is useful if the filtering operation will take a long time because the dataset is large, or if doing server side filtering (thus preventing unnecessary calls to the server).
The Clear button clears the filters UI.
The example below also demonstrates using the apply button. It also demonstrates the relationship between the Apply button and filter events. Note the following:
- The Athlete, Age and Country columns have filters with Apply and Clear buttons.
- onFilterModified gets called when the filter changes regardless of the apply button.
- onFilterChanged gets called after a new filter is applied.