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 - Header Filter

The DevExtreme JavaScript Gantt component allows users to filter a particular column by values listed in a pop-up menu. To open this menu, click the filter icon in the column header.

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

Display Header Filter Icons

Set the headerFilter.visible property to true to display filter icons for all columns. To hide the filter icon for a specific column, disable that column’s allowHeaderFilter property.

Enable Search in Header Filters

Users can search for values in a header filter. To display the search bar, set the search.enabled property to true in the global headerFilter object or in a column’s headerFilter object. Use the search.mode property to specify the comparison type.

Change Available Filter Values

A header filter consists of unique values in its column. To change the filter values, group them with the groupInterval property or bind the data source to this header filter.