DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Tree List - Using Filter Row

The filter row allows users to enter a value for each column and filter grid data by those values. To display the filter row, set the filterRow.visible property to true. If you need to disable a filter row cell for a specific column, set the column's allowFiltering property to false.

Depending on a column's dataType, its filter row cell contains different editors:

dataType Editor
"string", "number", "object" Text box
"boolean" Drop-down list
"date" Date picker
"datetime" Date and time picker
To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

In this demo, the Hire Date column's filter row cell contains a date picker. Other filter row cells contain text boxes.

The TreeList supports a specific set of filterOperations for each data type. Users can click a magnifying glass icon in each filter row cell to specify the selectedFilterOperation.

A column's filter value is stored in the filterValue property. You can use this property to set the filter value in code.