DevExtreme v23.1 is now available.

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

Your search did not match any results.

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.

Thank you for your interest in our ASP.NET Core product libraries and UI component suite. We are moving ASP.NET Core-related demos and content to Please make sure to update your bookmarks with our new URL.

View Demo