All docs
V24.1
24.2
24.1
23.2
23.1
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
Box
Map

JavaScript/jQuery PivotGrid - headerFilter.search

Configures the header filter's search functionality.

jQuery
JavaScript
$(function(){
    $("#pivotGrid").dxPivotGrid({
        // ...
        headerFilter: {
            // ...
            search: {
                editorOptions: { 
                    placeholder: 'Search value',
                    mode: 'text' 
                },
                enabled: true,
                timeout: 700,
                mode: 'equals'      
            },
        },
    })
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-pivot-grid ... >
    <dxo-header-filter ... >
        <dxo-search
            [editorOptions]="searchEditorOptions"
            [enabled]="true"
            [timeout]="700"
            mode="equals"
        ></dxo-search>
    </dxo-header-filter>
</dx-pivot-grid>
import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent {
    searchEditorOptions;
    constructor() {
        this.searchEditorOptions = { 
            placeholder: 'Search value', 
            mode: 'text' 
        };
        // ...
    } 
    // ...
}
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxPivotGridModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxPivotGridModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }  
Vue
App.vue (Options API)
App.vue (Composition API)
<template>
    <DxPivotGrid ... >
        <DxHeaderFilter ... >
            <DxSearch
                :editor-options="searchEditorOptions"
                :enabled="true"
                :timeout="700"
                mode="equals"
            />
        </DxHeaderFilter>
    </DxPivotGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxPivotGrid, {
    DxHeaderFilter, 
    DxSearch,
    // ... 
} from 'devextreme-vue/pivot-grid';

export default {
    components: {
        DxPivotGrid, 
        DxHeaderFilter, 
        DxSearch,
        // ...
    },
    data() {
        return {
            searchEditorOptions: { 
                placeholder: 'Search value', 
                mode: 'text' 
            }
        };
    }
}
</script>
<template>
    <DxPivotGrid ... >
        <DxHeaderFilter ... >
            <DxSearch
                :editor-options="searchEditorOptions"
                :enabled="true"
                :timeout="700"
                mode="equals"
            />
        </DxHeaderFilter>
    </DxPivotGrid>
</template>

<script setup>
import 'devextreme/dist/css/dx.light.css';
import DxPivotGrid, {
    DxHeaderFilter, 
    DxSearch,
    // ... 
} from 'devextreme-vue/pivot-grid';

const searchEditorOptions = { 
    placeholder: 'Search value', 
    mode: 'text' 
};

// ...
</script>
React
App.js
import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import PivotGrid, {
    HeaderFilter, 
    Search, 
    // ...
} from 'devextreme-react/data-grid';

const searchEditorOptions = { 
    placeholder: 'Search value', 
    mode: 'text' 
};

export default function App() { 
    return ( 
        <PivotGrid ... > 
            <HeaderFilter ... >
                <Search
                    editorOptions={searchEditorOptions}
                    enabled={true}
                    timeout={700}
                    mode="equals"
                />
            </HeaderFilter>
        </PivotGrid>        
    ); 
} 

editorOptions

Type: any
Default Value: {}

See the TextBox Configuration topic for information about properties you can specify in this object.

Angular
NOTE
The nested component that configures the editorOptions property does not support event bindings and two-way property bindings.
Vue
NOTE
The nested component that configures the editorOptions property does not support event bindings and two-way property bindings.
jQuery
JavaScript
$(function(){
    $("#pivotGrid").dxPivotGrid({
        // ...
        headerFilter: {
            // ...
            search: {
                editorOptions: { 
                    placeholder: 'Search value',
                    mode: 'text',
                    onValueChanged: (e) => {
                        // handle the value change here
                    }  
                },
                // ...     
            },
        },
    })
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-pivot-grid ... >
    <dxo-header-filter ... >
        <dxo-search
            [editorOptions]="searchEditorOptions"
            // ...
        ></dxo-search>
    </dxo-header-filter>
</dx-pivot-grid>
import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent {
    searchEditorOptions;
    constructor() {
        this.searchEditorOptions = { 
            placeholder: 'Search value', 
            mode: 'text',
            onValueChanged: (e) => {
                // handle the value change here
            }   
        };
        // ...
    } 
    // ...
}
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxPivotGridModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxPivotGridModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }  
Vue
App.vue (Options API)
App.vue (Composition API)
<template>
    <DxPivotGrid ... >
        <DxHeaderFilter ... >
            <DxSearch
                :editor-options="searchEditorOptions"
                // ...
            />
        </DxHeaderFilter>
    </DxPivotGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxPivotGrid, {
    DxHeaderFilter, 
    DxSearch,
    // ... 
} from 'devextreme-vue/pivot-grid';

export default {
    components: {
        DxPivotGrid, 
        DxHeaderFilter, 
        DxSearch,
        // ...
    },
    data() {
        return {
            searchEditorOptions: { 
                placeholder: 'Search value', 
                mode: 'text',
                onValueChanged: this.handleValueChange   
            }
        };
    },
    methods: {
        handleValueChange(e) {
            // handle the value change here
        }
    }
}
</script>
<template>
    <DxPivotGrid ... >
        <DxHeaderFilter ... >
            <DxSearch
                :editor-options="searchEditorOptions"
                // ...
            />
        </DxHeaderFilter>
    </DxPivotGrid>
</template>

<script setup>
import 'devextreme/dist/css/dx.light.css';
import DxPivotGrid, {
    DxHeaderFilter, 
    DxSearch,
    // ... 
} from 'devextreme-vue/pivot-grid';

const searchEditorOptions = { 
    placeholder: 'Search value', 
    mode: 'text',
    onValueChanged: (e) => {
        // handle the value change here
    }   
};

// ...
</script>
React
App.js
import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import PivotGrid, {
    HeaderFilter, 
    Search, 
    // ...
} from 'devextreme-react/data-grid';

const searchEditorOptions = { 
    placeholder: 'Search value', 
    mode: 'text',
    onValueChanged: (e) => {
        // handle the value change here
    }   
};

export default function App() { 
    return ( 
        <PivotGrid ... > 
            <HeaderFilter ... >
                <Search
                    editorOptions={searchEditorOptions}
                    // ...
                />
            </HeaderFilter>
        </PivotGrid>        
    ); 
} 

enabled

Specifies whether search UI is enabled in the header filter.

Type:

Boolean

Default Value: false

mode

Specifies a comparison operation used to search header filter values.

Type:

SearchMode

Default Value: 'contains'

timeout

Specifies a timeout, in milliseconds, during which a user may continue to modify the search value without starting the search operation.

Type:

Number

Default Value: 500