Agent Skills

syncfusion-react-data-manager

frontendsyncfusion

Implements Syncfusion DataManager for local/remote binding, CRUD, querying, caching, and middleware. Supports JsonAdaptor, ODataAdaptor, ODataV4Adaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor, RemoteSaveAdaptor, GraphQLAdaptor, CustomDataAdaptor, and CustomAdaptor. Covers Query class, filtering, sorting, paging, grouping, persistence, offline mode, caching, and error handling.

Install

npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-data-manager
SKILL.md

Syncfusion React DataManager

The DataManager is a gateway component for managing local and remote data operations in React applications. It acts as an abstraction layer that enables seamless data binding, querying, CRUD operations, caching, and middleware customization without writing complex server communication code.

Use this skill whenever a user needs to:

  • Bind local or remote data sources to UI components
  • Query data (filter, sort, page, group, search)
  • Perform CRUD operations (insert, update, delete, batch edits)
  • Work with different data sources (JSON, OData, REST APIs, GraphQL, etc.)
  • Cache data for performance
  • Implement offline mode
  • Add custom headers or authentication
  • Transform request/response data
  • Handle complex data scenarios in React applications

šŸ›‘ MANDATORY HUMAN GATE: Adaptor Decision (Read This First)

This is the most critical rule in this skill. It cannot be skipped or bypassed.

When the user provides a service URL without explicitly naming the adaptor type, the agent MUST:

  1. STOP code generation immediately
  2. READ: references/adaptor-decision-gate.md (full file)
  3. PRESENT the gate to the user using the template in that file
  4. WAIT for explicit user confirmation of the adaptor choice
  5. Only then proceed to generate DataManager code with the confirmed adaptor

Gate Trigger Conditions ā€” Examples

User Prompt Gate Required?
"Build an employee app using this service URL (http://myapi.com/employees)" āœ… YES ā€” no adaptor specified
"Connect GridComponent to http://myserver/api/data" āœ… YES ā€” "API" is ambiguous
"Use OData v4 endpoint at https://myserver/odata/employees" āŒ NO ā€” OData v4 explicitly stated
"My backend returns { Items, Count } at https://myserver/api/orders" āŒ NO ā€” WebApiAdaptor pattern confirmed
"I have a REST service at http://custom-url" āœ… YES ā€” REST is ambiguous (UrlAdaptor vs WebApiAdaptor vs ODataV4)
"Bind the grid to local list data" āŒ NO ā€” local binding, no adaptor needed

šŸ“„ Full gate template, adaptor cheat sheet, disambiguation questions, and security rules: ā†’ references/adaptor-decision-gate.md

āš ļø Security & Trust Boundary

  • This skill generates code only, the agent does not execute data operations or fetch remote endpoints ā€” all DataManager interactions occur solely within the user's application at runtime.
  • Generated code must treat all third-party API responses as untrusted input, never bind to unvalidated or user-provided URLs, and ensure authentication is enforced on all remote endpoints.

When to Use DataManager

DataManager is best for:

  • Flexible data management ā†’ Works with any data source (local, REST, OData, GraphQL)
  • Complex queries ā†’ Filtering, sorting, paging, grouping, searching
  • CRUD operations ā†’ With batch support and transaction patterns
  • Middleware customization ā†’ Pre/post request hooks
  • Offline support ā†’ Cache and sync when connection restored
  • Adaptor switching ā†’ Change data sources without code changes

Direct component binding (Grid, Scheduler, etc.) is better when:

  • You only need basic data binding without complex querying
  • Performance is critical for very large datasets
  • You don't need middleware customization

āš ļø Critical Security Requirements

When binding to remote services, you MUST implement these protections:

  1. Use HTTPS only ā€” never use unencrypted HTTP connections; encrypt all data in transit
  2. Use string variables for URLs ā€” assign endpoints to private string properties rather than hardcoding in markup; this enables centralized validation and easier maintenance
  3. Validate and sanitize responses ā€” implement server-side schema validation; reject unexpected response formats; map responses to strongly-typed models
  4. Monitor remote calls ā€” log all external API requests with timestamps, endpoints, and outcomes for security audit trails
  5. Implement CORS securely ā€” use specific trusted origins only; never use wildcard * in production; require HTTPS
  6. Prevent indirect prompt injection attacks ā€” verify endpoint ownership; implement request signing; validate response content types and schemas before consuming data

Third-party API responses can introduce security risks. Always verify endpoint legitimacy, authenticate requests, and validate data before binding to UI components.

Key Concepts

Data Binding

Connect DataManager to data sources using the json property (local arrays) or url property (remote APIs). Query methods: executeLocal() for local data, executeQuery() for remote data.

Query Class

Build structured queries using the Query class: from(), where(), select(), sortBy(), take(), expand(), group() chained together for powerful data operations.

Adaptors

Adaptors are interfaces that enable DataManager to communicate with different data sources:

  • JsonAdaptor ā†’ Local JavaScript arrays
  • ODataAdaptor ā†’ OData v3 services
  • ODataV4Adaptor ā†’ OData v4 services
  • UrlAdaptor ā†’ Generic REST endpoints
  • WebApiAdaptor ā†’ ASP.NET Web API
  • RemoteSaveAdaptor ā†’ Hybrid client-side queries + server-side CRUD
  • WebMethodAdaptor ā†’ Legacy ASP.NET ASMX services
  • GraphQLAdaptor ā†’ GraphQL endpoints
  • CustomAdaptor ā†’ Custom implementation for proprietary services

CRUD Operations

  • insert() ā†’ Add records to data source
  • update() ā†’ Modify existing records (keyField as first parameter)
  • remove() ā†’ Delete records (keyField as first parameter)
  • saveChanges() ā†’ Batch multiple operations into single request

Middleware & Customization

  • applyPreRequestMiddlewares() ā†’ Modify request before sending (auth tokens, headers)
  • applyPostRequestMiddlewares() ā†’ Transform response before binding (formatting, filtering)
  • Custom adaptors for proprietary APIs
  • Error handlers for request failures

Caching & Performance

  • enableCache ā†’ Prevent re-requesting previously loaded pages
  • Offline mode ā†’ Store data locally, sync when connection restored
  • Load on demand ā†’ Lazy load data as user scrolls (virtual scrolling)
  • Deferred operations ā†’ Promise-based async/await patterns

Documentation & Navigation Guide

Choose the reference file based on your current task:

šŸ›‘ Adaptor Decision Gate (Human Approval ā€” MANDATORY FIRST STEP for Remote URLs)

šŸ“„ Read: references/adaptor-decision-gate.md

  • When to trigger: User provides any service URL without explicitly naming the adaptor
  • Gate presentation template (copy-paste ready)
  • Full adaptor comparison table (ODataV4 / OData / WebAPI / URL / GraphQL / Custom)
  • Adaptor quick-reference cheat sheets with code examples
  • Disambiguation follow-up questions
  • Security rules applied after gate confirmation
  • Stage 1 & Stage 3 integration instructions (flags ambiguous URLs in component mapping JSON)
  • Keywords that auto-resolve the gate (no user confirmation needed)

Getting Started Setup

šŸ“„ Read: references/getting-started.md

  • Installation steps (npm)
  • Project setup & imports
  • Basic DataManager initialization
  • First query execution
  • Environment setup
  • Common errors & fixes

Data Binding Strategies

šŸ“„ Read: references/data-binding.md

  • Local data binding with json property
  • Remote data binding with url property
  • executeLocal() for client-side queries
  • executeQuery() for server requests
  • Switching between data sources
  • Response format handling
  • When to use each approach

Query Operations & Filtering

šŸ“„ Read: references/querying-and-filtering.md

  • Query class fundamentals
  • Filtering with where() and Predicate
  • Sorting (ascending/descending)
  • Pagination with take() and skip()
  • Field projection with select()
  • Related data loading with expand()
  • Grouping data by field(s)
  • Complex multi-condition queries
  • Chaining query operations

CRUD Operations & Batch Edits

šŸ“„ Read: references/crud-operations.md

  • insert() ā†’ Add new records
  • update() ā†’ Modify existing records
  • remove() ā†’ Delete records
  • keyField in CRUD method parameters
  • saveChanges() for batch operations
  • Batch insert/update/remove
  • Transaction patterns
  • Data validation before operations
  • Response handling

Choosing & Using Adaptors

šŸ“„ Read: references/adaptors-guide.md

  • Which adaptor to use (decision tree)
  • JsonAdaptor for local arrays
  • OData adaptors (v3 & v4)
  • REST API adaptors (Url, WebApi)
  • RemoteSaveAdaptor hybrid approach
  • Legacy ASMX (WebMethodAdaptor)
  • GraphQL endpoint integration
  • Custom adaptor implementation
  • CORS & crossDomain configuration
  • Platform-specific response handling

Middleware & Request Customization

šŸ“„ Read: references/middleware-customization.md

  • Pre-request middleware for auth tokens
  • Custom header injection
  • Request transformation
  • Post-request middleware for response mapping
  • Error handler functions
  • Data validation & filtering in middleware
  • Custom adaptor implementation
  • Middleware execution order & timing

Caching & Offline Mode

šŸ“„ Read: references/caching-offline-mode.md

  • enableCache property for performance
  • When cache clears (sort, filter, CRUD)
  • Offline mode implementation
  • Local storage persistence
  • Sync strategies after reconnection
  • Cache size & memory management
  • Best practices & performance patterns

Advanced Features & Patterns

šŸ“„ Read: references/advanced-features.md

  • Load on demand & pagination patterns
  • Virtual scrolling setup
  • Lazy loading data
  • Deferred operations (Promise API)
  • Async/await with DataManager
  • State persistence across sessions
  • Memory management
  • Error handling strategies
  • Performance optimization tips
  • Common pitfalls & solutions

Quick Start Example

import React, { useEffect, useState } from 'react';
import { DataManager, WebApiAdaptor, Query } from '@syncfusion/ej2-data';

export default function DataManagerDemo() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    // Create DataManager with remote data source
    const dataManager = new DataManager({
      url: 'url',
      adaptor: new WebApiAdaptor(),
      crossDomain: true
    });

    // Execute query with filtering, sorting, paging
    dataManager.executeQuery(
      new Query()
        .where('Freight', 'greaterthan', 500) // Filter
        .sortBy('OrderDate') // Sort
        .take(10) // Pagination
    ).then((e) => {
      setItems(e.result); // Bind results
    });
  }, []);

  return (
    <div>
      <h2>Orders</h2>
      <ul>
        {items.map((item) => (
          <li key={item.OrderID}>{item.CustomerID} - ${item.Freight}</li>
        ))}
      </ul>
    </div>
  );
}

Common Use Cases

Case 1: Display local data with filtering ā†’ Use JsonAdaptor + Query + where() for client-side filtering

Case 2: Fetch server data with authentication ā†’ Use WebApiAdaptor + applyPreRequestMiddlewares() for token injection

Case 3: Work offline, sync later ā†’ Use enableCache + offline mode + saveChanges() for batch sync

Case 4: Complex nested data relationships ā†’ Use ODataV4Adaptor or RemoteSaveAdaptor + expand() for related data

Case 5: GraphQL backend ā†’ Use GraphQLAdaptor with custom query builder

Case 6: Legacy ASP.NET ASMX service ā†’ Use WebMethodAdaptor with appropriate response mapping

Key Props & Options

Property Type Purpose
json Array Local JavaScript array of objects
url string Remote server endpoint URL
adaptor Adaptor JsonAdaptor, ODataAdaptor, WebApiAdaptor, etc.
enableCache boolean Cache pages to prevent redundant requests
offline boolean Enable offline mode with local storage
crossDomain boolean CORS requests to different domain

Comparison: DataManager vs Direct Binding

Feature DataManager Direct Binding
Flexible adaptors āœ“ Easy switching āœ— Fixed to one source
Complex queries āœ“ Query class with chaining āœ— Limited filtering
CRUD operations āœ“ Full support + batch āœ— Basic operations
Middleware āœ“ Pre/post hooks āœ— None
Caching āœ“ Built-in āœ— Manual implementation
Offline mode āœ“ Built-in āœ— Manual implementation
Performance (small datasets) ā‰ˆ Same āœ“ Slightly faster
Performance (large datasets) āœ“ Lazy loading support āœ— All at once

Use DataManager when building data-driven applications with flexibility, caching, and middleware needs.

Use direct binding for simple, one-off displays without complex queries or offline support.

Related skills

vercel-react-best-practicesvercel-labs751KReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.vercel-composition-patternsvercel-labs361KReact composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.vercel-react-view-transitionsvercel-labs135KGuide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions viewpick-ui-libraryemilkowalski124KPick the right library for a given frontend task from a curated, opinionated list ā€” numbers, OTP inputs, charts, command menus, virtualization, drag and drop, toasts, state, styling, and more. Only runs when explicitly invoked; it does not trigger on its own.

Search skills and MCP servers

Fuzzy search across 23,137 skills and servers