DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy

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