All docs
V21.1
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
A newer version of this page is available. Switch to the current version.

jQuery DataGrid - Data Columns

Data columns are the most common type of columns used in the DataGrid UI component. 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 property. The UI component 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.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="HireDate" dataType="date" />
            </DataGrid>
        );
    }
}
export default App;
See Also