React Grid Filtering

Data Filtering with our React Grid User-Interface component

In this blog we will introduce the filtering capabilities of our react grid. In general this grid have two different UI components for filtering – filter column menus and filter row.

Filtering is one of the most important features an advanced data grid should have. Our grid for React supports all the important row filtering conditions such as: contains, contains with a match case, empty, starts with, ends with, equals, equals with a match case and is null. The filtered value can be string, number or date. In addition you can build complex conditions containing filtering clauses with and/or. The filtering is enabled by a filtering icon next to the column name. The background of the filtered column can be set in a different color.

One of the features of our React grid is the capability to have different filtering menus depending on the data column type. There are several built-in filtering menus among which is the TextBoxes filter. This type of filter is very useful when you want to preset the values with which to do the filtering.

react grid filtering

Another very interesting filtering feature is the custom filter menu. With the custom filter menu option you can create your own filtering menus by implementing the createfilterpanel function. For Date column, the Grid displays a filtering menu with DateTimePicker components.

The filter row option gives the capability to place a row having all the filters below the column header row.

With our grid for React you can implement also excel like filtering which represents a list box with check boxes on the left of the items.

All the conditions available in the columns popup menu can be customized.

One advanced feature of our React.js grid is the capability to have date and range filters with a calendar. Using this option you can filter dates by using all the available options in our advanced calendar component.

And last but not least you can implement an initial filter during the initialization of the data grid.

React Grid Demos: Grid samples.

React Grid Docs: ReactJS Docs.

About admin

This entry was posted in Grid, jQWidgets, jqxGrid, React, react grid, React Javascript Library, REACTJS and tagged , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply