Data Columns

Data columns are the most common type of columns used in the DataGrid widget. They are generated for all column array members that do not configure band columns. Data columns display values from a data field to which they are bound, but you can populate them with custom values (see Customize Cells).

DevExtreme HTML5 JavaScript DataGrid DataColumns

A data column automatically detects the type of its values. However, if the values should be converted (for example, if dates are stored as strings), set the target type using the dataType option. The widget takes the data type into account when filtering, sorting, and performing other data operations.

jQuery
JavaScript
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        dataSource: [{
            HireDate: "2017/04/13",
            // ...
        },
        //...
        ],
        columns: [{
            dataField: "HireDate",
            dataType: "date"
        }]
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxi-column dataField="HireDate" dataType="date"></dxi-column>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid ... >
        <DxColumn data-field="HireDate" data-type="date" />
    </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
    },
    // ...
}
</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 {
    render() {
        return (
            <DataGrid ... >
                <Column dataField="HireDate" dataType="date" />
            </DataGrid>
        );
    }
}
export default App;
See Also