All docs
V20.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Hide a Column Using the API

A column is considered hidden when its visible property is false. In Angular, Vue, and React, you can bind this property to a component or state property and change that property. In jQuery, you can change this property using the columnOption(id, optionName, optionValue) method. For example, the following code hides an "Email" column:

jQuery
JavaScript
$("#dataGridContainer").dxDataGrid("columnOption", "Email", "visible", false);
Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ... >
    <dxi-column
        dataField="Email"
        [(visible)]="isEmailVisible"
    ></dxi-column>
</dx-data-grid>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    isEmailVisible: boolean = true;
    hideEmails() {
        this.isEmailVisible = false;
    }
}
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
<template>
    <DxDataGrid ... >
        <DxColumn
            data-field="Email"
            v-model:visible="isEmailVisible"
        />
    </DxDataGrid>
</template>

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

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

export default {
    components: {
        DxDataGrid,
        DxColumn
    },
    data() {
        return() {
            isEmailVisible: true
        }
    },
    methods: {
        hideEmails() {
            this.isEmailVisible = false;
        }
    }
}
</script>
React
App.js
import React from 'react';

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

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

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isEmailVisible: true
        };

        this.handleOptionChange = this.handleOptionChange.bind(this);
        this.hideEmails = this.hideEmails.bind(this);
    }

    handleOptionChange(e) {
        if(e.fullName === 'columns[0].visible') {
            this.setState({
                isEmailVisible: e.value
            });
        }
    }

    hideEmails() {
        this.setState({
            isEmailVisible: false
        });
    }

    render() {
        return (
            <DataGrid ...
                onOptionChanged={this.handleOptionChange}>
                <Column 
                    dataField="Email"
                    visible={this.state.isEmailVisible}
                />
            </DataGrid>
        );
    }
}
export default App;
See Also