devextreme-datagrid

Configure DevExtreme DataGrid components across Angular, React, Vue, and jQuery.

39|7|Updated Jun 2, 2026
One-click install
npx skills add https://github.com/DevExpress/agent-skills --skill devextreme-datagrid
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: devextreme-datagrid
Source: https://github.com/DevExpress/agent-skills/tree/main/plugins/dx-devextreme/skills/devextreme-datagrid
Command: npx skills add https://github.com/DevExpress/agent-skills --skill devextreme-datagrid

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill eliminates API errors, hallucinations, and framework-specific configuration mistakes when implementing the DevExtreme DataGrid component, providing accurate, up-to-date guidance for Angular, React, Vue, and jQuery projects.

Core Features & Use Cases

  • Cross-framework configuration: Full support for DataGrid setup, column definition, and feature enablement across Angular, React, Vue, and jQuery.
  • End-to-end feature coverage: Guidance for editing, filtering, sorting, grouping, paging, scrolling, export, toolbar customization, master-detail layouts, remote operations, and AI-powered columns and assistant panels.
  • Real-world use case: For example, if you need to add a filterable, editable DataGrid with Excel export to a React application, this Skill provides the exact configuration and code patterns to implement it correctly without manual documentation lookups.

Quick Start

Ask the AI to add a filterable, editable DevExtreme DataGrid with Excel export to your Angular, React, Vue, or jQuery application, and it will generate the correct framework-specific configuration and code.

Frequently Asked Questions about devextreme-datagrid

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure a DevExtreme DataGrid with filtering and editing in React?

To configure a DevExtreme DataGrid in React, you define column bindings and enable editing and filtering features using framework-specific components. This ensures accurate API usage and adherence to React conventions without manual documentation lookups.

Does the DevExtreme DataGrid support Angular, Vue, and jQuery?

Yes, the DevExtreme DataGrid fully supports Angular, Vue, and jQuery alongside React. It provides cross-framework configuration for columns, data binding, editing modes, and other features while ensuring correct API usage and guardrails for each specific environment.

Why does my DevExtreme DataGrid fail when enabling remote operations or editing?

DevExtreme DataGrid remote operations and editing fail when mandatory keyExpr requirements are missing or incorrectly configured. You must define a primary key for your data source to enable these features and avoid common implementation errors.

How do I add Excel export and master-detail layouts to a DevExtreme DataGrid?

To add Excel export and master-detail layouts to a DevExtreme DataGrid, you configure the specific built-in properties for these features. This provides exact code patterns for expanding hierarchical data and exporting grid contents correctly.

Can I implement AI-powered columns and assistant panels in a DevExtreme DataGrid?

Yes, you can implement AI-powered columns and assistant panels in a DevExtreme DataGrid. This requires strict adherence to mandatory keyExpr requirements and correct API configuration to enable the AI features and avoid implementation errors.

What is the best way to avoid API hallucinations when building a DevExtreme DataGrid?

The best way to avoid API hallucinations when building a DevExtreme DataGrid is to use framework-specific guidance that enforces correct API usage, mandatory keyExpr requirements, and guardrails against common remote operations and editing configuration mistakes.