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

If the host agent has a structured question-asking tool available, use it to ask these questions one at a time with clear options — for example, Claude Code's AskUserQuestion tool or GitHub Copilot's askQuestions tool. If no such tool is available, ask the questions directly in the chat response before generating code.

⚠️ 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.

1. Which framework? Angular, React, Vue, jQuery, or ASP.NET Core Controls?
2. Which component is this data source for? Determines whether loadMode: 'raw' applies and which ...Expr field mappings are relevant.
3. Local, OData, or custom REST? Local array → ArrayStore. OData service → ODataStore. Anything else → CustomStore.

Skip the framework question if the request or project already identifies the framework. If the reply leaves it unresolved, re-ask once with the list: Angular, React, Vue, jQuery, or ASP.NET Core Controls. If it remains unresolved, default to React + Vite + TypeScript and state that assumption.

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