Example of Filter Menu in React Grid Component

All Controls
/
Grid
/
FilterMenu

This sample demonstrates filtering Grid columns using menu, checkbox, and Excel filter UI. In this sample, click the filter icon on the column header to filter a particular column. You can change the filter type on the properties panel. When Excel filter type is selected, you can sort the column using the sort option in the Excel filter dialog.

More Details...

Loading....
Description

The filtering feature enables the user to view a reduced number of records based on the filter criteria. It can be enabled by setting the allowFiltering property to true.

Grid supports the following filter types.

  • FilterBar
  • Menu
  • CheckBox
  • Excel

you can change the filter type by setting filterSettings->type

Now, the following additional filter operators are incorporated with the already existing operators.

String type columns:

  • Not Equal
  • Does Not Start With
  • Does Not End With
  • Does Not Contain
  • Empty
  • Not Empty
  • Like

Number and Date type columns:

  • Null
  • Not Null

For example, when the Like search operator is used:

  • %a% - Filters words containing the character 'a'
  • a% - Filters words ending with 'a'
  • %a - Filters words starting with 'a'