Vue DataGrid - Overview

Columns represent sets of data values that have the same type. To configure columns, assign an array of objects to the columns property. Each object in it configures a single column. If a column does not need to be customized, this array may include the name of the field that provides data for this column.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({ 
        // ...
        columns: [
            { dataField: "Title", caption: "Position" },
            { dataField: "FullName", width: 300 }, 
            "CompanyName",
            "City"
        ]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxi-column dataField="Title" caption="Position"></dxi-column>
    <dxi-column dataField="FullName" [width]="300"></dxi-column>
    <dxi-column dataField="CompanyName"></dxi-column>
    <dxi-column dataField="City"></dxi-column>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid ... >
        <DxColumn data-field="Title" caption="Position" />
        <DxColumn data-field="FullName" :width="300" />
        <DxColumn data-field="CompanyName" />
        <DxColumn data-field="City" />
    </DxDataGrid>
</template>

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

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

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

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

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

class App extends React.Component {
    render() {
        return (
            <DataGrid ... >
                <Column dataField="Title" caption="Position" />
                <Column dataField="FullName" width={300} />
                <Column dataField="CompanyName" />
                <Column dataField="City" />
            </DataGrid>
        );
    }
}
export default App;

The DataGrid generates a column per data field if you do not specify the columns array. You can make minor adjustments to these columns with the customizeColumns function. Use the function's parameter to access the column configurations.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({ 
        // ...
        customizeColumns: function (columns) {
            columns[0].width = 100;
            columns[1].width = 210;
        }
    })
});
Angular
TypeScript
HTML
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    constructor() {
        // Uncomment the line below if customizeColumns should be executed in the component's context
        // this.customizeColumns = this.customizeColumns.bind(this);
    }

    customizeColumns (columns) {
        columns[0].width = 100;
        columns[1].width = 210;
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
<dx-data-grid ...
    [customizeColumns]="customizeColumns">
</dx-data-grid>
Vue
App.vue
<template>
    <DxDataGrid ...
        :customize-columns="customizeColumns">
    </DxDataGrid>
</template>

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

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

export default {
    components: {
        DxDataGrid
    },
    methods: {
        customizeColumns(columns) {
            columns[0].width = 100;
            columns[1].width = 210;
        }
    }
}
</script>
React
App.js
import React from 'react';

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

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

class App extends React.Component {
    constructor() {
        super(props);
        // Uncomment the line below if customizeColumns should be executed in the component's context
        // this.customizeColumns = this.customizeColumns.bind(this);
    }

    customizeColumns(columns) {
        columns[0].width = 100;
        columns[1].width = 210;
    }

    render() {
        return (
            <DataGrid ...
                customizeColumns={this.customizeColumns}>
            </DataGrid>
        );
    }
}
export default App;

This topic has outlined the ways to configure columns in the DataGrid UI component. For a detailed overview of column features, refer to other topics in this section.

See Also