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 Gantt - Filter Row

The DevExtreme JavaScript Gantt component allows users to filter columns by filter row values. To display the filter row, set the filterRow.visible property to true.

To apply filter criteria to a column, enter or select a value for the filter row cell or specify the filterValue property (for the appropriate column) in code.

Underlying dataType defines editor types used within filter row cells:

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

The Gantt supports a predefined set of filter operations for each data type. Click a cell’s magnifier icon to select the desired filter operation (selectedFilterOperation).

To disable the filter row cell for a specific column, set the column’s allowFiltering property to false.