$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        // ...
        fields: [{
            // ...
            allowFiltering: true,
            headerFilter: {
                search: {
                    enabled: true,
                    // ...
                }
            }
        }]
    });

    $("#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: [{
                // ...
                allowFiltering: true,
                headerFilter: {
                    // ...
                    search: {
                        enabled: true,
                        // ...
                    }
                }
            }]
        });
    }
}

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)

<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: [{
        // ...
        allowFiltering: true,
        headerFilter: {
            // ...
            search: {
                enabled: true,
                // ...
            }
        }
    }]
});

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: [{
        // ...
        allowFiltering: true,
        headerFilter: {
            // ...
            search: {
                enabled: true,
                // ...
            }
        }
    }]
});
</script>

React

App.js

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: [{
        // ...
        allowFiltering: true,
        headerFilter: {
            // ...
            search: {
                enabled: true,
                // ...
            }
        }
    }]
});

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

allowSearch

Use search.enabled instead.

Specifies whether searching is enabled in the header filter.

Type:

Boolean

Default Value: undefined

allowSelectAll

Specifies whether a "Select All" option is available to users.

Type:

Boolean

Default Value: true

height

Specifies the height of the popup menu containing filtering values.

Type:

Number

Default Value: undefined

search

Configures the header filter's search functionality.

Type:

HeaderFilterSearchConfig

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)

<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>

React

App.js

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}
        />
    );
}

width

Specifies the width of the popup menu containing filtering values.

Type:

Number

Default Value: undefined

Feedback

Was this page helpful?

Thanks for your feedback!
Any other suggestions? Tell us here.

Additional Feedback

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

DevExtreme jQuery - PivotGridDataSource - fields.headerFilter

jQuery

Angular

Vue

React

See Also

allowSearch

allowSelectAll

height

search

jQuery

Angular

Vue

React

width