React DataGrid - columnChooser

Configures the column chooser.

Selector: ColumnChooser
Type: common/grids:ColumnChooser

The column chooser allows a user to hide columns at runtime. To enable it, assign true to the columnChooser.enabled property.

DevExtreme HTML5 JavaScript jQuery Angular Knockout DataGrid Column Chooser

DataGrid Demo TreeList Demo

See Also

allowSearch Deprecated

Use DataGrid search.enabled or TreeList search.enabled instead.

Specifies whether searching is enabled in the column chooser.

Type:

Boolean

Default Value: false

container

Specifies a container in which the column chooser should be rendered.

Type:

String

|

HTMLElement | jQuery

| undefined
Default Value: undefined

Use this property if you need to change the element in which the column chooser is rendered. For example, if your component is inside the Popup, set this property to 'popup container'.

jQuery
index.js
$(function(){
    $("#dataGrid").dxDataGrid({
        // ...
        columnChooser: {
            // ...
            container: "#popupContainer"
        },
    })
});
Angular
app.component.html
<dx-data-grid ... >
    <dxo-column-chooser container="#popupContainer" >
    </dxo-column-chooser>
</dx-data-grid>
Vue
App.vue (Options API)
App.vue (Composition API)
<template>
    <DxDataGrid ... >
        <DxColumnChooser container="#popupContainer" />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid, {
    DxColumnChooser
    // ... 
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid, 
        DxColumnChooser
    }
}
</script>
<template>
    <DxDataGrid ... >
        <DxColumnChooser container="#popupContainer" />
    </DxDataGrid>
</template>

<script setup>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid, {
    DxColumnChooser
    // ... 
} from 'devextreme-vue/data-grid';

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

import DataGrid, {
    ColumnChooser 
    // ...
} from 'devextreme-react/data-grid';

export default function App() { 
    return ( 
        <DataGrid ... > 
            <ColumnChooser container="#popupContainer" />
        </DataGrid>        
    ); 
}

emptyPanelText

Specifies text displayed by the column chooser when it is empty.

Type:

String

Default Value: 'Drag a column here to hide it'

enabled

Specifies whether a user can open the column chooser.

Type:

Boolean

Default Value: false

When this property is set to true, a user can open the column chooser with a click on the "Column Chooser" icon. Otherwise, this icon is hidden, but you still can open the column chooser from code by calling the showColumnChooser() method.

DataGrid Demo TreeList Demo

height

Specifies the height of the column chooser.

Type:

Number

|

String

Default Value: 260

mode

Specifies how a user manages columns using the column chooser.

Type:

ColumnChooserMode

Default Value: 'dragAndDrop'

In drag and drop mode, a user moves column headers to and from the column chooser by drag and drop. In select mode, the user selects column headers in the column chooser using check boxes. The select mode is designed primarily for touch-enabled devices. On mouse-equipped platforms, either mode is suitable.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid ColumnChooser DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid ColumnChooser

View Demo

NOTE
When the mode is "select", the column chooser does not hide column headers from the group panel (does not ungroup data).

View Demo

position

Configures the column chooser's position.

Selector: Position
Type:

PositionConfig

| undefined
Default Value: undefined

You can specify the my, at, and of properties to position a column chooser. Set the position property to undefined to display the column chooser at the bottom right corner (default position).

jQuery
JavaScript
$(function(){
    $("#dataGrid").dxDataGrid({
        // ...
        columnChooser: {
            // ...
            position: { 
                my: "right top", 
                at: "right bottom", 
                of: ".dx-datagrid-column-chooser-button" 
            }
        },
    })
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ... >
    <dxo-column-chooser ... >
        <dxo-position
            my="right top"
            at="right bottom"
            of=".dx-datagrid-column-chooser-button">
        </dxo-position>
    </dxo-column-chooser>
</dx-data-grid>
import { Component } from '@angular/core'; 

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

export class AppComponent {}
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxDataGridModule } from 'devextreme-angular'; 

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

export class AppModule { }
Vue
App.vue (Options API)
App.vue (Composition API)
<template>
    <DxDataGrid ... >
        <DxColumnChooser ... >
            <DxPosition
                my="right top"
                at="right bottom"
                of=".dx-datagrid-column-chooser-button"
            />
        </DxColumnChooser>
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid, {
    DxColumnChooser, 
    DxPosition
    // ... 
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid, 
        DxColumnChooser, 
        DxPosition
    }
}
</script>
<template>
    <DxDataGrid ... >
        <DxColumnChooser ... >
            <DxPosition
                my="right top"
                at="right bottom"
                of=".dx-datagrid-column-chooser-button"
            />
        </DxColumnChooser>
    </DxDataGrid>
</template>

<script setup>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid, {
    DxColumnChooser, 
    DxPosition
    // ... 
} from 'devextreme-vue/data-grid';

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

import DataGrid, {
    ColumnChooser, 
    Position, 
    // ...
} from 'devextreme-react/data-grid';

export default function App() { 
    return ( 
        <DataGrid ... > 
            <ColumnChooser ... >
                <Position
                    my="right top"
                    at="right bottom"
                    of=".dx-datagrid-column-chooser-button"
                />
            </ColumnChooser>
        </DataGrid>        
    ); 
}

View Demo

search

Configures the column chooser's search functionality.

Selector: Search
Type:

ColumnChooserSearchConfig

jQuery
JavaScript
$(function(){
    $("#dataGrid").dxDataGrid({
        // ...
        columnChooser: {
            // ...
            search: {
                editorOptions: { 
                    placeholder: 'Search column',
                    mode: 'text' 
                },
                enabled: true,
                timeout: 800      
            },
        },
    })
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ... >
    <dxo-column-chooser ... >
        <dxo-search
            [editorOptions]="searchEditorOptions"
            [enabled]="true"
            [timeout]="800"
        ></dxo-search>
    </dxo-column-chooser>
</dx-data-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 column', 
            mode: 'text' 
        };
        // ...
    } 
    // ...
}
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxDataGridModule } from 'devextreme-angular'; 

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

export class AppModule { }
Vue
App.vue (Options API)
App.vue (Composition API)
<template>
    <DxDataGrid ... >
        <DxColumnChooser ... >
            <DxColumnChooserSearch
                :editor-options="searchEditorOptions"
                :enabled="true"
                :timeout="800"
            />
        </DxColumnChooser>
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid, {
    DxColumnChooser, 
    DxColumnChooserSearch,
    // ... 
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid, 
        DxColumnChooser, 
        DxColumnChooserSearch,
    },
    data() {
        return {
            searchEditorOptions: { 
                placeholder: 'Search column', 
                mode: 'text' 
            }
        };
    }
}
</script>
<template>
    <DxDataGrid ... >
        <DxColumnChooser ... >
            <DxColumnChooserSearch
                :editor-options="searchEditorOptions"
                :enabled="true"
                :timeout="800"
            />
        </DxColumnChooser>
    </DxDataGrid>
</template>

<script setup>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid, {
    DxColumnChooser, 
    DxColumnChooserSearch,
    // ... 
} from 'devextreme-vue/data-grid';

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

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

import DataGrid, {
    ColumnChooser, 
    ColumnChooserSearch, 
    // ...
} from 'devextreme-react/data-grid';

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

export default function App() { 
    return ( 
        <DataGrid ... > 
            <ColumnChooser ... >
                <ColumnChooserSearch
                    editorOptions={searchEditorOptions}
                    enabled={true}
                    timeout={800}
                />
            </ColumnChooser>
        </DataGrid>        
    ); 
}

searchTimeout Deprecated

Use DataGrid search.timeout or TreeList search.timeout instead.

Specifies a delay in milliseconds between when a user finishes typing in the column chooser's search panel, and when the search is executed.

Type:

Number

Default Value: 500

selection

Configures column selection functionality within the column chooser.

Selector: Selection
Type:

ColumnChooserSelectionConfig

Set the mode property to "select", to use check boxes to select columns in the column chooser.

View Demo

sortOrder

Specifies the sort order of column headers.

Type:

SortOrder

| undefined
Default Value: undefined

If not set, the order is the same as in the columns[] array.

title

Specifies the title of the column chooser.

Type:

String

Default Value: 'Column Chooser'

width

Specifies the width of the column chooser.

Type:

Number

|

String

Default Value: 250