DevExtreme React - ArrayStore API

The ArrayStore is a store that provides an interface for loading and editing an in-memory array and handling related events.

import ArrayStore from "devextreme/data/array_store"

jQuery
JavaScript
var states = [
    { id: 1, state: "Alabama", capital: "Montgomery" },
    { id: 2, state: "Alaska", capital: "Juneau" },
    { id: 3, state: "Arizona", capital: "Phoenix" },
    // ...
];

var store = new DevExpress.data.ArrayStore({
    key: "id",
    data: states,
    // Other ArrayStore properties go here
});

// ===== or inside the DataSource =====
var dataSource = new DevExpress.data.DataSource({
    store: {
        type: "array",
        key: "id",
        data: states,
        // Other ArrayStore properties go here
    },
    // Other DataSource properties go here
});
Angular
TypeScript
import ArrayStore from "devextreme/data/array_store";
import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    store: ArrayStore;
    dataSource: DataSource;
    states = [
        { id: 1, state: "Alabama", capital: "Montgomery" },
        { id: 2, state: "Alaska", capital: "Juneau" },
        { id: 3, state: "Arizona", capital: "Phoenix" },
        // ...
    ];
    constructor () {
        this.store = new ArrayStore({
            key: "id",
            data: this.states,
            // Other ArrayStore properties go here
        });

        // ===== or inside the DataSource =====
        this.dataSource = new DataSource({
            store: new ArrayStore({
                key: "id",
                data: this.states,
                // Other ArrayStore properties go here
            }),
            // Other DataSource properties go here
        });
    }
}
AngularJS
JavaScript
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        var states = [
            { id: 1, state: "Alabama", capital: "Montgomery" },
            { id: 2, state: "Alaska", capital: "Juneau" },
            { id: 3, state: "Arizona", capital: "Phoenix" },
            // ...
        ];
        $scope.store = new DevExpress.data.ArrayStore({
            key: "id",
            data: states,
            // Other ArrayStore properties go here
        });

        // ===== or inside the DataSource =====
        $scope.dataSource = new DevExpress.data.DataSource({
            store: {
                type: "array",
                key: "id",
                data: states,
                // Other ArrayStore properties go here
            },
            // Other DataSource properties go here
        });
    });
Knockout
JavaScript
var states = [
    { id: 1, state: "Alabama", capital: "Montgomery" },
    { id: 2, state: "Alaska", capital: "Juneau" },
    { id: 3, state: "Arizona", capital: "Phoenix" },
    // ...
];

var viewModel = {
    store: new DevExpress.data.ArrayStore({
        key: "id",
        data: states,
        // Other ArrayStore properties go here
    })

    // ===== or inside the DataSource =====
    dataSource: new DevExpress.data.DataSource({
        store: {
            type: "array",
            key: "id",
            data: states,
            // Other ArrayStore properties go here
        },
        // Other DataSource properties go here
    })
};

ko.applyBindings(viewModel);
Vue
App.vue
<script>
import ArrayStore from 'devextreme/data/array_store';
import DataSource from 'devextreme/data/data_source';

const states = [
    { id: 1, state: 'Alabama', capital: 'Montgomery' },
    { id: 2, state: 'Alaska', capital: 'Juneau' },
    { id: 3, state: 'Arizona', capital: 'Phoenix' },
    // ...
];

const store = new ArrayStore({
    key: 'id',
    data: states,
    // Other ArrayStore properties go here
});

// ===== or inside the DataSource =====
const dataSource = new DataSource({
    store: new ArrayStore({
        key: 'id',
        data: states,
        // Other ArrayStore properties go here
    }),
    // Other DataSource properties go here
});

export default {
    // ...
    data() {
        return {
            store,
            // ===== or =====
            dataSource
        }
    }
}
</script>
React
App.js
// ...
import ArrayStore from 'devextreme/data/array_store';
import DataSource from 'devextreme/data/data_source';

const states = [
    { id: 1, state: 'Alabama', capital: 'Montgomery' },
    { id: 2, state: 'Alaska', capital: 'Juneau' },
    { id: 3, state: 'Arizona', capital: 'Phoenix' },
    // ...
];

const store = new ArrayStore({
    key: 'id',
    data: states,
    // Other ArrayStore properties go here
});

// ===== or inside the DataSource =====
const dataSource = new DataSource({
    store: new ArrayStore({
        key: 'id',
        data: states,
        // Other ArrayStore properties go here
    }),
    // Other DataSource properties go here
});

class App extends React.Component {
    // ...
}
export default App;
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .DataSource(ds => ds.Array()
        .Key("id")
        .Data(new[] {
            new { id = 1, state = "Alabama", capital = "Montgomery" },
            new { id = 2, state = "Alaska", capital = "Juneau" },
            new { id = 3, state = "Arizona", capital = "Phoenix" },
            // ...
        })
    )
)
@* ===== or a simplified version ===== *@
@(Html.DevExtreme().WidgetName()
    .DataSource(new[] {
        new { id = 1, state = "Alabama", capital = "Montgomery" },
        new { id = 2, state = "Alaska", capital = "Juneau" },
        new { id = 3, state = "Arizona", capital = "Phoenix" },
        // ...
    }, "id")
)
@(Html.DevExtreme().WidgetName() _
    .DataSource(Function(ds)
        Return ds.Array() _
                 .Key("id") _
                 .Data({
                     New With { .id = 1, .state = "Alabama", .capital = "Montgomery" },
                     New With { .id = 2, .state = "Alaska", .capital = "Juneau" },
                     New With { .id = 3, .state = "Arizona", .capital = "Phoenix" }
                 })
    End Function)
)
@* ===== or a simplified version ===== *@
@(Html.DevExtreme().WidgetName() _
    .DataSource({
        New With { .id = 1, .state = "Alabama", .capital = "Montgomery" },
        New With { .id = 2, .state = "Alaska", .capital = "Juneau" },
        New With { .id = 3, .state = "Arizona", .capital = "Phoenix" }
    }, "id")
)
NOTE
The ArrayStore is immutable. You cannot change its configuration at runtime. However, you can use its methods to manipulate it.
See Also

Props

This section describes properties that configure the ArrayStore.

Name Description
data

Specifies the store's associated array.
errorHandler

Specifies the function that is executed when the store throws an error.
key

Specifies the key property (or properties) that provide(s) key values to access data items. Each key value must be unique.
onInserted

A function that is executed after a data item is added to the store.
onInserting

A function that is executed before a data item is added to the store.
onLoaded

A function that is executed after data is loaded to the store.
onLoading

A function that is executed before data is loaded to the store.
onModified

A function that is executed after a data item is added, updated, or removed from the store.
onModifying

A function that is executed before a data item is added, updated, or removed from the store.
onPush

The function executed before changes are pushed to the store.
onRemoved

A function that is executed after a data item is removed from the store.
onRemoving

A function that is executed before a data item is removed from the store.
onUpdated

A function that is executed after a data item is updated in the store.
onUpdating

A function that is executed before a data item is updated in the store.

Methods

This section describes methods that control the ArrayStore.

Name Description
byKey(key)

Gets a data item with a specific key.
clear()

Clears all the ArrayStore's associated data.
createQuery()

Creates a Query for the underlying array.
insert(values)

Adds a data item to the store.
key()

Gets the key property (or properties) as specified in the key property.
keyOf(obj)

Gets a data item's key value.
load()

Starts loading data.
load(options)

Starts loading data.
off(eventName)

Detaches all event handlers from a single event.
off(eventName, eventHandler)

Detaches a particular event handler from a single event.
on(eventName, eventHandler)

Subscribes to an event.
on(events)

Subscribes to events.
push(changes)

Pushes data changes to the store and notifies the DataSource.
remove(key)

Removes a data item with a specific key from the store.
totalCount(options)

Gets the total count of items the load() function returns.
update(key, values)

Updates a data item with a specific key.

Events

This section describes events that the ArrayStore raises.

Name Description
inserted

Raised after a data item is added to the store.
inserting

Raised before a data item is added to the store.
loaded

Raised after data is loaded to the store.
loading

Raised before data is loaded to the store.
modified

Raised after a data item is added, updated, or removed from the store.
modifying

Raised before a data item is added, updated, or removed from the store.
push

Raised before changes are pushed to the store.
removed

Raised after a data item is removed from the store.
removing

Raised before a data item is removed from the store.
updated

Raised after a data item is updated in the store.
updating

Raised before a data item is updated in the store.