DevExtreme v23.1 is now available.

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

Free Trial Buy

ArrayStore

If you want to extend the functionality of a JavaScript array, place it into an ArrayStore. It provides an interface for loading and editing data, and allows you to handle data-related events.

jQuery
JavaScript
$(function() {
    $("#gridContainer").dxDataGrid({
        dataSource: new DevExpress.data.ArrayStore({
            data: books,
            onLoaded: function () {
                // Event handling commands go here
            }
        })
    });
});
Angular
TypeScript
HTML
import { DxDataGridModule } from 'devextreme-angular';
import ArrayStore from 'devextreme/data/array_store';
// ...
export class AppComponent {
    books = [ /* ... */ ];
    bookStore = new ArrayStore({
        data: this.books,
        onLoaded: function () {
            // Event handling commands go here
        }
    });
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
<dx-data-grid
    [dataSource]="bookStore">
</dx-data-grid>

Data kept in the ArrayStore can be processed in the DataSource. For example, the DataSource can sort data.

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: new DevExpress.data.DataSource({
            store: books,
            sort: { getter: "title", desc: true }
        })
    });
});
Angular
TypeScript
HTML
import { DxDataGridModule } from 'devextreme-angular';
import DataSource from 'devextreme/data/data_source';
// ...
export class AppComponent {
    books = [ /* ... */ ];
    bookDataSource = new DataSource({
        store: this.books,
        sort: { getter: "fullName", desc: true }
    });
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
<dx-data-grid
    [dataSource]="bookDataSource">
</dx-data-grid>
NOTE
Even if you have passed a JavaScript array to the dataSource option, the DataGrid automatically places it into the ArrayStore wrapped in the DataSource that you can get using the getDataSource() method.
See Also