search

Configures the header filter's search functionality.

Type:

jQuery

JavaScript

$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        // ...
        fields: [{
            // ...
            headerFilter: {
                // ...
                search: {
                    editorOptions: { 
                        placeholder: 'Search value',
                        mode: 'text' 
                    },
                    enabled: true,
                    timeout: 600,
                    mode: 'equals'
                }
            }
        }]
    });

    $("#pivotGridContainer").dxPivotGrid({
        dataSource: pivotGridDataSource
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-pivot-grid
    [dataSource]="pivotGridDataSource">
</dx-pivot-grid>

import { Component } from '@angular/core'; 

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

export class AppComponent {
    pivotGridDataSource: PivotGridDataSource;
    constructor() {
        this.pivotGridDataSource = new PivotGridDataSource({
            // ...
            fields: [{
                // ...
                headerFilter: {
                    // ...
                    search: {
                        editorOptions: { 
                            placeholder: 'Search value',
                            mode: 'text' 
                        },
                        enabled: true,
                        timeout: 600,
                        mode: 'equals'
                    }
                }
            }]
        });
    }
}

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
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)

App.js

<template>
    <DxPivotGrid
        :data-source="pivotGridDataSource"
    />
</template>

<script>
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-vue/pivot-grid';

const pivotGridDataSource = new PivotGridDataSource({
    // ...
    fields: [{
        // ...
        headerFilter: {
            // ...
            search: {
                editorOptions: { 
                    placeholder: 'Search value',
                    mode: 'text' 
                },
                enabled: true,
                timeout: 600,
                mode: 'equals'
            }
        }
    }]
});

export default {
    components: {
        DxPivotGrid
    },
    data() {
        return {
            pivotGridDataSource
        }
    }
}
</script>

<template>
    <DxPivotGrid
        :data-source="pivotGridDataSource"
    />
</template>

<script setup>
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-vue/pivot-grid';

const pivotGridDataSource = new PivotGridDataSource({
    // ...
    fields: [{
        // ...
        headerFilter: {
            // ...
            search: {
                editorOptions: { 
                    placeholder: 'Search value',
                    mode: 'text' 
                },
                enabled: true,
                timeout: 600,
                mode: 'equals'
            }
        }
    }]
});
</script>

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-react/pivot-grid';

const pivotGridDataSource = new PivotGridDataSource({
    // ...
    fields: [{
        // ...
        headerFilter: {
            // ...
            search: {
                editorOptions: { 
                    placeholder: 'Search value',
                    mode: 'text' 
                },
                enabled: true,
                timeout: 600,
                mode: 'equals'
            }
        }
    }]
});

export default function App() { 
    return (
        <PivotGrid
            dataSource={pivotGridDataSource}
        />
    );
}

editorOptions

Type: any

Default Value: {}

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

NOTE

In Angular and Vue, the nested component that configures the editorOptions property does not support event bindings and two-way property bindings.

jQuery

JavaScript

$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        // ...
        fields: [{
            // ...
            headerFilter: {
                // ...
                search: {
                    editorOptions: { 
                        placeholder: 'Search value',
                        mode: 'text',
                        onValueChanged: (e) => {
                            // handle the value change here
                        }  
                    },
                    // ...
                }
            }
        }]
    });

    $("#pivotGridContainer").dxPivotGrid({
        dataSource: pivotGridDataSource
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-pivot-grid
    [dataSource]="pivotGridDataSource">
</dx-pivot-grid>

import { Component } from '@angular/core'; 

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

export class AppComponent {
    pivotGridDataSource: PivotGridDataSource;
    constructor() {
        this.pivotGridDataSource = new PivotGridDataSource({
            // ...
            fields: [{
                // ...
                headerFilter: {
                    // ...
                    search: {
                        editorOptions: { 
                            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 PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
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)

App.js

<template>
    <DxPivotGrid
        :data-source="pivotGridDataSource"
    />
</template>

<script>
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-vue/pivot-grid';

const pivotGridDataSource = new PivotGridDataSource({
    // ...
    fields: [{
        // ...
        headerFilter: {
            // ...
            search: {
                editorOptions: { 
                    placeholder: 'Search value',
                    mode: 'text', 
                    onValueChanged: (e) => {
                        // handle the value change here
                    }  
                },
                // ...
            }
        }
    }]
});

export default {
    components: {
        DxPivotGrid
    },
    data() {
        return {
            pivotGridDataSource
        }
    }
}
</script>

<template>
    <DxPivotGrid
        :data-source="pivotGridDataSource"
    />
</template>

<script setup>
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-vue/pivot-grid';

const pivotGridDataSource = new PivotGridDataSource({
    // ...
    fields: [{
        // ...
        headerFilter: {
            // ...
            search: {
                editorOptions: { 
                    placeholder: 'Search value',
                    mode: 'text', 
                    onValueChanged: (e) => {
                        // handle the value change here
                    }     
                },
                // ...
            }
        }
    }]
});
</script>

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-react/pivot-grid';

const pivotGridDataSource = new PivotGridDataSource({
    // ...
    fields: [{
        // ...
        headerFilter: {
            // ...
            search: {
                editorOptions: { 
                    placeholder: 'Search value',
                    mode: 'text', 
                    onValueChanged: (e) => {
                        // handle the value change here
                    }  
                },
                // ...
            }
        }
    }]
});

export default function App() { 
    return (
        <PivotGrid
            dataSource={pivotGridDataSource}
        />
    );
}

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'

View Demo

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