All docs
V20.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
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.
A newer version of this page is available. Switch to the current version.

jQuery DataGrid - Column Chooser

The column chooser allows a user to change the set of columns at runtime. It is configured using the columnChooser object and may operate in two modes: the default drag and drop mode and the select mode designed for touch devices.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        columnChooser: {
            enabled: true,
            mode: "dragAndDrop" // or "select"
        }
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-column-chooser
        [enabled]="true"
        mode="dragAndDrop"> <!-- or "select" -->
    </dxo-column-chooser>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid ... >
        <DxColumnChooser
            :enabled="true"
            mode="dragAndDrop" <!-- or "select" -->
        />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxColumnChooser
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxColumnChooser
    },
    // ...
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

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

class App extends React.Component {
    render() {
        return (
            <DataGrid ... >
                <ColumnChooser
                    enabled={true}
                    mode="dragAndDrop" {/* or "select" */}
                />
            </DataGrid>
        );
    }
}
export default App;

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

Set a column's allowHiding property to false if it should never be hidden. For columns whose headers should never appear in the column chooser, set the showInColumnChooser property to false.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        columnChooser: { enabled: true },
        columns: [{
            // ...
            allowHiding: false // cannot be hidden
        }, {
            // ...
            showInColumnChooser: false // does not appear in the column chooser even when hidden
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-column-chooser [enabled]="true"></dxo-column-chooser>
    <dxi-column ...
        [allowHiding]="false"> <!-- cannot be hidden -->
    </dxi-column>
    <dxi-column ...
        [showInColumnChooser]="false"> <!-- does not appear in the column chooser even when hidden -->
    </dxi-column>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid ... >
        <DxColumnChooser
            :enabled="true"
        />
        <DxColumn ...
            :allow-hiding="false" <!-- cannot be hidden -->
        />
        <DxColumn ...
            :show-in-column-chooser="false" <!-- does not appear in the column chooser even when hidden -->
        />
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    DxColumnChooser,
    DxColumn
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxColumnChooser,
        DxColumn
    },
    // ...
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

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

class App extends React.Component {
    render() {
        return (
            <DataGrid ... >
                <ColumnChooser
                    enabled={true}
                />
                <Column ...
                    allowHiding={false} {/* cannot be hidden */}
                />
                <Column ...
                    showInColumnChooser={false}> {/* does not appear in the column chooser even when hidden */}
                />
            </DataGrid>
        );
    }
}
export default App;

Call the showColumnChooser() or hideColumnChooser() method to control the column chooser programmatically.

jQuery
JavaScript
var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
dataGrid.showColumnChooser();
dataGrid.hideColumnChooser();
Angular
TypeScript
import { ..., ViewChild } from "@angular/core";
import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
    // Prior to Angular 8
    // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    showColumnChooser () {
        this.dataGrid.instance.showColumnChooser();
    };
    hideColumnChooser () {
        this.dataGrid.instance.hideColumnChooser();
    };
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid ...
        :ref="dataGridRefKey">
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid from 'devextreme-vue/data-grid';

const dataGridRefKey = "my-data-grid";

export default {
    components: {
        DxDataGrid
    },
    data() {
        return() {
            dataGridRefKey
        }
    },
    methods: {
        showColumnChooser() {
            this.dataGrid.showColumnChooser();
        },
        hideColumnChooser() {
            this.dataGrid.hideColumnChooser();
        }
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRefKey].instance;
        }
    }
}
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DataGrid from 'devextreme-react/data-grid';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.dataGridRef = React.createRef();

        this.showColumnChooser = this.showColumnChooser.bind(this);
        this.hideColumnChooser = this.hideColumnChooser.bind(this);
    }

    showColumnChooser() {
        this.dataGrid.showColumnChooser();
    }

    hideColumnChooser() {
        this.dataGrid.hideColumnChooser();
    }

    get dataGrid() {
        return this.dataGridRef.current.instance;
    }

    render() {
        return (
            <DataGrid ref={this.dataGridRef}>
                {/* ... */ }
            </DataGrid>
        );
    }
}
export default App;
See Also