A newer version of this page is available. Switch to the current version.

Array Only

To bind the DataGrid to an array, pass this array to the dataSource option.

jQuery
JavaScript
var books = [
    { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi' },
    { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi' },
    { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction' }
];

$(function(){
    $("#gridContainer").dxDataGrid({
        dataSource: books
    });
});
Angular
TypeScript
HTML
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    books = [
        { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi' },
        { author: 'K. Vonnegut', title: "Cat's Cradle", year: 1963, genre: 'Satire, sci-fi' },
        { author: 'M. Mitchell', title: "Gone with the Wind", year: 1936, genre: 'Historical fiction' }
    ];
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
<dx-data-grid
    [dataSource]="books">
</dx-data-grid>

View Demo

If objects in the array need to be processed (sorted or filtered), you can create a Query. For example, in the following code, a Query sorts objects in the books array in the descending order by the author field and selects objects with a title containing 'it'.

jQuery
JavaScript
var books = [
    { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi' },
    // ...
];

$(function(){
    $("#gridContainer").dxDataGrid({
        dataSource: DevExpress.data.query(books)
                        .filter("title", "contains", "it")
                        .sortBy("author", true)
                        .toArray()
    });
});
Angular
TypeScript
HTML
import { DxDataGridModule } from "devextreme-angular";
import query from "devextreme/data/query";
// ...
export class AppComponent {
    books = [
        { author: 'D. Adams', title: "The Hitchhiker's Guide to the Galaxy", year: 1979, genre: 'Comedy, sci-fi' },
        // ...
    ];
    getSortedAndFilteredBooks () {
        return query(this.books)
                .filter("title", "contains", "it")
                .sortBy("author", true)
                .toArray();
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
<dx-data-grid
    [dataSource]="getSortedAndFilteredBooks()">
</dx-data-grid>
See Also