Skip to main content 首页 创作者 syncfusion react-ui-components-skills syncfusion-react-grid
syncfusion-react-grid Implements Syncfusion React Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
跳到安装 Skills Marketplace 发现并探索由社区构建的 Agent Skills
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-grid命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
下载 Zip 下载中... syncfusion-react-accordion Guide users to implement Syncfusion React Accordion component for collapsible content panels. Use this skill whenever the user needs to create expandable/collapsible sections, accordion layouts, tabbed content panels, multi-step forms, FAQs, or navigation with expandable items. Covers component setup, expand modes, animations, dynamic content loading, styling, events, lifecycle, React hooks integration, and complete API reference.
Create responsive navigation headers with AppBar component. Build top, bottom, or sticky app bars with buttons, menus, icons, and sidebars. Use when building navigation elements, toolbars, action bars, or responsive headers with dynamic content layout. Includes color modes (Light, Dark, Primary, Inherit), size modes (Regular, Prominent, Dense), spacing, separators, and full accessibility support.
name syncfusion-react-grid description Implements Syncfusion React Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Grids"}
Syncfusion React Grid
The Syncfusion React Grid is a comprehensive, feature-rich component for displaying and manipulating tabular data. It provides extensive functionality for data binding, paging, sorting, filtering, grouping, editing, exporting, scrolling modes, row/column customization, and advanced state management to handle datasets of any size and complexity efficiently.
⚠️ Security & Trust Boundary
The Grid skill does not perform any remote data access.
All external API interaction is handled by a separate DataManager skill outside this skill’s trust boundary.
Table of Contents
When to Use This Skill
Use the Syncfusion React Grid when you need to:
Display tabular data with rows and columns in a React applicationHandle large datasets efficiently with paging, virtual scrolling, or infinite scrolling
Enable sorting, filtering, and searching for single or multiple columns
Edit data inline with multiple edit modes (Inline, Batch, Dialog)
Export data to Excel or PDF formats with customization
Group and aggregate data with summaries and calculations
Customize rows and cells with templates and styling
Manage complex column configurations (frozen columns, spanning, reordering, resizing)
Optimize performance when rendering thousands of records
Persist grid state for user preferences and configuration
Provide responsive data views for different screen sizes
Component Overview The Grid component provides:
Data Binding : Support for local arrays, remote data sources, and DataManager integrationPaging : Client-side pagination with customizable page size and navigationSorting : Single and multi-column sorting with custom comparersFiltering : Multiple filter modes (Filter Bar, Filter Menu, Excel-like filter)Searching : Global search across columnsGrouping : Group data by columns with aggregates and lazy loadingSelection : Row, cell, and column selection with checkbox supportEditing : Inline, Batch, and Dialog modes with validation and templatesAggregates : Sum, Average, Count, Min, Max with footer, group, and caption displayExporting : Excel and PDF export with templates and server-side supportScrolling : Standard, Virtual, and Infinite scrolling modesRow Customization : Templates, detail views, drag-drop, pinning, spanningColumn Customization : Templates, resizing, reordering, freezing, spanningPerformance : Optimized rendering for large datasetsResponsive Design : Adaptive layouts for different screen sizesModule System : Feature-based modules to reduce bundle size
Mandatory Rules for Inbuilt API CRITICAL : Follow these rules when using Grid's inbuilt API (137+ methods, 65+ events, 95+ properties):
Rule 1: Module Injection Required for Feature Methods Methods only work if their module is injected. No error thrown if module missing.
Method Required Module Example goToPage()Page<Inject services={[Page]} />sortColumn()Sort<Inject services={[Sort]} />filterByColumn()Filter<Inject services={[Filter]} />addRecord(), deleteRecord()Edit<Inject services={[Edit]} />
Rule 2: Properties vs Methods - Know the Difference
Properties : Set via JSX props (<GridComponent allowPaging={true} />)Methods : Call via ref (gridRef.current.goToPage(2))Can't set properties via methods or call methods via props
Feature Navigation Guide
Getting Started & Setup
Installation and package setup
Basic component initialization
CSS imports and theme configuration
Simple data binding example
Module injection
Data Management
Local data binding with arrays
Remote data with DataManager
Loading indicators (Spinner, Shimmer)
Data source configuration
Column Configuration
Column definition and properties
Column types (string, number, date, boolean, checkbox)
Column width and auto-fit
Column templates and custom rendering
Column features (spanning, reordering, resizing, freezing)
Aggregation & Summaries
Footer aggregates (Sum, Avg, Count, Min, Max, etc.)
Group footer aggregates
Group caption aggregates
Custom aggregate functions
Reactive aggregate updates
Navigation & Pagination
Enable and configure paging
Page size and navigation
Page change events
Customizing pager UI
Query string integration
Sorting Data
Single and multi-column sorting
Sort direction control
Initial sort configuration
Custom comparers
Prevent sorting for specific columns
Filtering
Searching
Grid search functionality
Global search across columns
Search with filter integration
Case-sensitive search options
Grouping Data
Enable grouping by columns
Group by multiple columns
Caption templates
Group footer aggregates
Lazy-load grouping for performance
Selection
Row, cell, column selection modes
Checkbox selection
Multiple selection handling
Selection events and methods
Programmatic selection
Editing
Enable editing (allowEditing, allowAdding, allowDeleting)
Edit modes: Inline, Batch, Dialog
Edit triggers (double-click, toolbar, keyboard)
Custom edit templates
Validation rules and error handling
Primary key configuration
⚠️ isPrimaryKey={true} is required on the key column — editing silently fails without it.
Row Features
Row templates
Detail templates (expand/collapse)
Row drag and drop
Row pinning
Row spanning
Row selection and events
Exporting
Basic Excel export functionality
Export options and configuration
Exporting with column templates
Server-side export
Formatting and styling in exports
PDF export setup
Headers and footers
Export options and customization
Exporting with templates
Server-side PDF export
Page orientation and sizing
Scrolling Modes
Standard scrolling
Virtual scrolling (performance optimization)
Infinite scrolling
Scrollbar customization
Height and width configuration
⚠️ height is required — scroll is silently disabled without it. Do NOT combine with allowPaging in virtual scrolling and infinite scrolling.
Rows Mode Key Config < 1,000 allowPagingPage module1K – 100K enableVirtualization + heightVirtualScroll, no pagingContinuous enableInfiniteScrolling + heightInfiniteScroll100K+ grouped enableVirtualization + lazyLoadGroupingVirtualScroll, Group
Freezing & Pinning
Freeze columns
Freeze rows
Freeze headers
Row pinning
Frozen column behavior
Toolbar
Built-in toolbar items
Custom toolbar buttons
Toolbar icons and events
Edit toolbar integration
Toolbar item templates
Context Menu
Built-in context menu items
Custom context menus
Context menu configuration
Context menu events
Cell Operations
Cell editing and selection
Cell templates
Cell value formatting
Cell ranges and operations
Cell focus and navigation
Copy and paste functionality
Clipboard events
Custom clipboard actions
Copy column headers
Paste from external sources
Printing
Print grid
Print templates
Print customization
Print specific rows/columns
Print orientation and sizing
Styling & Appearance
CSS customization
Themes (Material, Bootstrap, Fabric)
Dark mode support
Inline styling and classes
Custom color schemes
Component size modes
⚠️ rowDataBound and queryCellInfo fire on every render — no API calls inside them.
❌ Never add both a column template and a rowDataBound handler targeting the same field — this produces duplicate, conflicting styling logic.
Hierarchy & Nested Data
Parent-child data structures
Child grid
Expand and collapse behavior
Nested grid templates
Detail row templates
Hierarchical data configuration
Adaptive Mode
enableAdaptiveUI : Render filter, sort, column chooser, and edit dialogs in full-screen mode for better mobile usability. Apply e-bigger class to parent element.Vertical row rendering : Set rowRenderingMode="Vertical" to display row elements vertically instead of horizontally (default is Horizontal).Vertical rendering features : Supports paging, sorting, filtering, selection, dialog editing, aggregates, infinite scroll, and toolbar options.rowRenderingMode note : Column Menu (grouping, sorting, autofit, filter, column chooser) only works in Horizontal mode.AdaptiveUIMode property : Use "Mobile" to render adaptive layout only on mobile screens, or "Both" (default) for both mobile and desktop.Mobile screen optimization : Render adaptive dialogs and vertical layouts automatically when enableAdaptiveUI is enabled.
Configuration Management
Global grid settings
Local column configuration
Configuration precedence
Configuration merging
Persist grid state
Save and restore grid state manually
Restore grid to initial state
Prevent specific properties from persisting
Persist column templates and header text
⚠️ Rule : enablePersistence={true} must be enable when use state management in grid.
Module System & Architecture
Grid module architecture and feature-based modules
30+ available modules and their dependencies
Module injection patterns
Feature-module mapping
Bundle optimization and lazy loading
Conditional module loading
Every feature in the Syncfusion React Grid requires explicit module injection via <Inject services={[...]} />. Without injection, the feature is silently ignored — no error is thrown.
⚠️ Rule : <Inject services={[...]} /> must be the last child inside <GridComponent>.
Data Connectivity & Adaptors
7 adaptor types for backend integration
UrlAdaptor, ODataV4Adaptor, WebApiAdaptor, GraphQLAdaptor
Custom adaptors and RemoteSaveAdaptor
Backend configuration examples (C#, Node.js)
Request/response format specifications
Error handling and adaptor comparison
Performance Optimization
Virtual scrolling for 10,000+ records
Infinite scrolling and progressive loading
Memory management and cleanup strategies
Bundle size optimization
Event debouncing and throttling
Performance benchmarking and monitoring
Accessibility & Compliance
WCAG 2.2 and Section 508 compliance
WAI-ARIA implementation and screen readers
Keyboard navigation (Tab, arrows, Enter, Escape)
Color contrast and focus management
Accessibility testing tools (axe, NVDA, JAWS)
Semantic HTML practices
Data Validation
Built-in validators (required, min, max, pattern)
Custom validation functions
Async validation with server checks
Validation events and error display
Server-side validation with ASP.NET
Validation rules by column type
Command Column & Row Actions
Built-in commands (Edit, Delete, Save, Cancel)
Custom command buttons
Role-based and status-based commands
Command click events
Conditional command visibility
CSS styling and icons
Localization & Internationalization
Multi-language support (60+ languages)
Locale setup and culture configuration
Number, date, and currency formatting
RTL support (Arabic, Hebrew, Farsi)
Custom localization and translation
Language switcher implementation
Responsive Design & Mobile
Adaptive UI for mobile/tablet/desktop
Responsive media queries and breakpoints
Column visibility hiding rules
Touch interactions (swipe, long-press)
Mobile optimization strategies
Device-specific styling patterns
API Reference & Properties
All 95+ configurable properties organized by category
Quick reference table for quick lookup
When to use each property
Module requirements per property
Programmatic Control (Methods)
All 137+ Grid methods by category (data, row, column, sort, filter, group, page, edit, export)
Method signatures and parameters
Return values and usage patterns
Module requirements per method
Event Communication (Events)
All 65+ Grid events with timing and use cases
Wire actionBegin to cancel or mutate before an action (args.cancel = true, args.data.field = value)
Wire actionComplete to react after (API call, toast, refresh, toolbar restore)
Must wire actionFailure for error handling
Use args.requestType to identify the action
Advanced Patterns & Real-World Scenarios
Auto-refresh, WebSocket, and SignalR integration patterns
Push vs. pull data strategies
Connection management and reconnection logic
Measure grid operation times
Identify rendering bottlenecks
Optimization checklist
Memory usage tracking
Unit testing with Jest and React Testing Library
Integration testing scenarios
Snapshot testing
Best practices for grid testing
Quick Start Example import { ColumnDirective , ColumnsDirective , GridComponent , Inject , Page , Sort , Filter } from '@syncfusion/ej2-react-grids' ;
import React from 'react' ;
import '../styles/App.css' ;
const gridRef = useRef<GridComponent | null >(null );
const data = [
{
OrderID : 10248 ,
CustomerID : 'VINET' ,
EmployeeID : 5 ,
OrderDate : new Date (1996 , 6 , 4 )
},
{
OrderID : 10249 ,
CustomerID : 'TOMSP' ,
EmployeeID : 6 ,
OrderDate : new Date (1996 , 6 , 5 )
},
];
function App (return (
<GridComponent
ref ={gridRef}
dataSource ={data}
allowPaging ={true}
allowSorting ={true}
allowFiltering ={true}
pageSettings ={{ pageSize: 10 }}
>
<ColumnsDirective >
<ColumnDirective field ='OrderID' headerText ='Order ID' width ='100' textAlign ='Right' />
<ColumnDirective field ='CustomerID' headerText ='Customer' width ='120' />
<ColumnDirective field ='OrderDate' headerText ='Order Date' width ='130' type ='date' format ='yMd' />
</ColumnsDirective >
<Inject services ={[Page, Sort , Filter ]} />
</GridComponent > export default App ;
