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 - 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