ArrayStore.md

id	ArrayStore
module	common/data
export	ArrayStore
inheritsType	Store

---

shortDescription

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

lib

dx.web.js, dx.viz.js, dx.all.js

---

---

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
        });
    }
}

Vue

<!-- tab: 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

<!-- tab: 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#-->
@(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")
)

---

#include datalayer-store-note-immutable with { name: "ArrayStore" }

#####See Also#####

• DataSource API Reference
• Data Layer