Floating Filter

Goals

• Enable the floating filter feature via the floatingFilter input binding on the <ag-grid-angular> component.

Links

• Floating Filters

Summary

This chapter introduced the ability to filter rows, enabling users to quickly find data in the grid.

We covered:

• Using the quick filter text for search-link functionality.
• Using the provided number filter for numeric filtering functionality.
• Using the provided text filter for filtering string values.
• Using the provided date filter for filtering dates.
• Enabling the floating filter.

Quick Filter Summary

• Build a simple form for searching the grid.
• Use the quickFilterText input binding on the <ag-grid-angular> component to filter the grid based on the user-provided query string.
• Or, use the setQuickFilter() method in the Grid API to filter the grid.
• The getQuickFilterText property of a column definition provides a hook for us to specify a function that return the explicit value to use when filtering a column based on the row data.
• Caching quick filter search results for improved performance via the cacheQuickFilter input binding.

Number Filter Summary

• The provided agNumberColumnFilter provides the ability to search numeric values in the grid.
• The filter requires that the data be JavaScript Number() objects, either primitive or not.
• Specify the filter property for a column definition to the filter type.
• Use the filterParams property for a column definition to customize the behavior of the filter.

Text Filter Summary

• The provided agTextColumnFilter provides the ability to search string values in the grid.
• Specify the filter property to either true or agTextColumnFilter in the column definition to enable the text filter.
• Use the filterParams property for a column definition to customize the behavior of the filter.

Date Filter Summary

• The provided agDateColumnFilter provides the ability to search string values in the grid.
• The cell values must be JavaScript Date objects for the date column filter.
• Or, use the comparator property in the filterParams object to specify a function that determines if the cell value date is equal-to, less-than, or greater-than the local date at midnight for date filtering of non-Date object values.