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

DevExtreme jQuery - 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
    ],
    // ...
})
See Also