Example of filter-menu-functional in React Grid

All Controls
/
Grid
/
Filter Menu

This sample demonstrates the filtering capabilities of the Grid using multiple filter types. It shows how users can interact with different filtering options to refine and view data efficiently.

More Details...

Loading....
Description

The filtering feature allows users to display only the matching records based on filter criteria. To enable filtering, set the allowFiltering property to true. The Grid supports the following filter types:

These can be configured using the filterSettings.type property. In this sample, the Menu filter is enabled by default, and you can switch to "CheckBox" or "Excel" filters using the dropdown. When using "CheckBox" or "Excel" filters, the Grid provides two enhancements:

  • On-demand loading (Performance) loads data only when needed, improving speed and efficiency with large datasets. This can be enabled by setting filterSettings.enableInfiniteScrolling property to true.
  • Immediate filtering (UI Experience) applies filters instantly as soon as you check or uncheck items, giving smoother interaction. This can be enabled by setting filterSettings.mode property to Immediate.

Injecting Module:

Features of the Grid component are organized into individual, feature-specific modules. To use filtering functionality, inject the required modules Filter into the services.

More information on the filter configuration can be found in the documentation section.

Looking for the full React Data Grid component overview, features, pricing, and documentation? Visit our React Data Grid component page.