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

App.vue


<template>
    <DxDataGrid ... >
        <DxColumnChooser
            :enabled="true"
            mode="dragAndDrop" <!-- or "select" -->
        />
    </DxDataGrid>
</template>
 
<script>
import 'devextreme/dist/css/dx.light.css';
 
import DxDataGrid, {
    DxColumnChooser
} from 'devextreme-vue/data-grid';
 
export default {
    components: {
        DxDataGrid,
        DxColumnChooser
    },
    // ...
}
</script>

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.

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.light.css';
 
import DxDataGrid, {
    DxColumnChooser,
    DxColumn
} from 'devextreme-vue/data-grid';
 
export default {
    components: {
        DxDataGrid,
        DxColumnChooser,
        DxColumn
    },
    // ...
}
</script>

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

App.vue


<template>
    <DxDataGrid ...
        :ref="dataGridRefKey">
    </DxDataGrid>
</template>
 
<script>
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>

Vue DataGrid - Column Chooser

See Also