DevExtreme React - 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
    ],
    // ...
})

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget DataGrid ColumnChooser DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget DataGrid ColumnChooser

Set a column's allowHiding option to false if it should never be hidden. For columns whose headers should never appear in the column chooser, set the showInColumnChooser option 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
    ],
    // ...
})

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) dataGrid: DxDataGridComponent;
    showColumnChooser () {
        this.dataGrid.instance.showColumnChooser();
    };
    hideColumnChooser () {
        this.dataGrid.instance.hideColumnChooser();
    };
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
See Also