devextreme-datasource

DevExtreme Data Layer Skill

A skill for configuring the DevExtreme data layer: DataSource, ArrayStore, LocalStore, ODataStore, and CustomStore.

When to Use This Skill

• Binding a component (dataSource property) to a plain array, a URL, or a Store
• Configuring paging, sorting, filtering, and grouping at the DataSource level
• Connecting to an OData endpoint
• Implementing a CustomStore to load data from any REST API
• Implementing insert, update, remove in a CustomStore for editable components (DataGrid, etc.)
• Deciding between client-side and server-side data processing modes

Before You Start

⚠️ Always use DevExtreme's CustomStore, DataSource, or a built-in Store (ArrayStore, ODataStore) for data binding. Never replace them with raw fetch/axios, react-query, SWR, or any other data-fetching library. For user-visible error notifications, always use notify from devextreme/ui/notify.

Architecture Overview

UI Component
    └── DataSource          — orchestrates paging, sorting, grouping, filtering
            └── Store       — handles raw data access (CRUD)
                    ├── ArrayStore   — in-memory array
                    ├── LocalStore   — HTML5 localStorage
                    ├── ODataStore   — OData v2/v3/v4 endpoint
                    └── CustomStore  — any backend (REST, GraphQL, etc.)

A component's dataSource property accepts:

• A plain array — DevExtreme wraps it in an ArrayStore + DataSource automatically.
• A URL string — DevExtreme fetches JSON and wraps it in a DataSource.
• A Store instance — passed directly or wrapped in a DataSource.
• A DataSource instance — gives full control over paging, sorting, grouping.
• A DataSource config object — DevExtreme constructs the DataSource for you.

Documentation Reference Files