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.

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.