Specifies column-level options for filtering using a column header filter.

Type: Object
Default Value: undefined


Specifies the data source to be used for the header filter.

Type: Array| function(options) |DataSource configuration
Function parameters:
options: Object

Data source options.

Object structure:
component: Object

The widget instance.

dataSource: Object

The header filter data source.

Default Value: undefined

Assigning a function to this field enables you to calculate the header filter data source dynamically. Refer to the CustomStore | load option for details.

The elements of the array assigned to this field should be in the following format.

    text: /* A string to be displayed in the UI */
    value: /* A single value or filterExpression array */

For example, you can implement the following header filtering conditions for a field containing dates.

headerFilter: {
    dataSource: {
        load: function(loadOptions) {
            var now = new Date(),
                startOfWeek = new Date(now.setDate(now.getDate() - now.getDay() - 1 + (now.getDay()==0?-6:1))),
            now = new Date();
            var startOfDay = new Date(now.setHours(0,0,0,0));
            now = new Date();

            return [{
                text: 'Today',
                value: [['OrderDate', '>=', startOfDay], 'and', ['OrderDate', '<=', now]]
            }, {
                text: 'This week',
                value: [['OrderDate', '>=', startOfWeek], 'and', ['OrderDate', '<', startOfDay]]
            }, {
                text: 'Earlier',
                value: ['OrderDate', '<', startOfWeek]


Specifies how header filter values should be combined into groups.

Type: String|Number
Default Value: undefined
Accepted Values: 'year' | 'month' | 'day' | 'quarter' | 'hour' | 'minute' | 'second'
When the column data type is "date", groups are organized in a hierarchy, and the groupInterval option indicates up to which level the hierarchy is formed. By default, this level is "day". This means that each group has the following structure: "year"->"months"->"days".

To configure a data selector for numeric data, assign a number to this option. The number assigned is the maximum length of each group. The bigger the number, the less the quantity of the generated groups.

The data selector for dates is configured by assigning a string to this option.