Skip to main content Home Creators syncfusion javascript-ui-controls-skills syncfusion-javascript-grid
syncfusion-javascript-grid Implements Syncfusion JavaScript 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, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/javascript-ui-controls-skills --skill syncfusion-javascript-gridThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository syncfusion-javascript-data-manager Implements Syncfusion TypeScript/JavaScript(ES6+) 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.
syncfusion-javascript-diagram Create and edit visual diagrams with Syncfusion JavaScript Diagram (flowcharts, BPMN, swimlanes, UML, org charts, network topologies). Trigger for diagram rendering, node/connector modeling, layouts, data binding, palettes, interactive tools, exporting, and workflow visualization tasks.
syncfusion-javascript-pivot-table Use this skill whenever the user wants to implement Syncfusion PivotView in TypeScript applications. Triggers include: pivot table, pivot grid, data analysis, OLAP, aggregation in TypeScript context. Covers data binding (JSON, CSV, remote), drill-down/drill-through, grouping, filtering, conditional formatting, exports (Excel/PDF/CSV), and pivot charts. Use for interactive reports and dashboards. Do NOT use for React, Vue, or Angular.
Related occupations SOC
Based on SOC occupation classification
name syncfusion-javascript-grid description Implements Syncfusion JavaScript 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, hierarchy grids, state persistence, and advanced data management features for data-intensive applications. metadata {"author":"Syncfusion","version":"34.1.29","category":"Grids"}
Syncfusion JavaScript Grid Component Skill
⚠️ 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 this skill when you need to:
Build interactive data grids with multiple columns and rowsPerform CRUD operations (create, read, update, delete)Filter, sort, and search large datasetsGroup and aggregate data with summaries
Export data
Implement row selection or multi-select scenarios
Create responsive data tables with virtual scrolling
Customize grid styling and appearance
Handle editing modes (inline, dialog, batch)
Persist grid state across sessions
Work with TypeScript and modern module systems
Grid Overview The Syncfusion EJ2 Grid is a powerful, high-performance data grid component for TypeScript that provides:
Flexible data binding (local, remote, OData)Rich column features (templates, spanning, foreign keys, frozen)Advanced editing (inline, dialog, batch, command columns)Powerful filtering (menu, bar, excel-like)Multi-level grouping with custom aggregates6+ selection modes (row, cell, column, checkbox)Export capabilities (Excel, PDF with templates)Performance optimization (virtual/infinite scrolling)Complete customization (themes, styling, events)
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()PageGrid.Inject(Page) or Inject(Page)sortColumn()SortGrid.Inject(Sort) or Inject(Sort)filterByColumn()FilterGrid.Inject(Filter) or Inject(Filter)addRecord(), deleteRecord()EditGrid.Inject(Edit) or Inject(Edit)
Documentation and Navigation Guide
Getting Started
Installation and npm package setup
TypeScript module imports and configuration
CSS imports and theme selection
Basic grid initialization with sample data
Injecting required modules
Column Features
Column types (string, number, date, boolean)
Column binding and properties
Data type formatting
Column width and basic configuration
Foreign-key columns
Frozen columns
Column templates and custom rendering
Column spanning
Column width management
Column chooser (show/hide columns)
Column headers and customization
Column menu
Column reordering
Column resizing
Command column basics
Built-in command types (edit, delete, save, cancel)
Custom command buttons
Command templates
Command event handling
Row-level actions
Data Binding
Local data binding with arrays
Remote data binding (URL, OData, WebAPI)
Query and URL adapters
Dynamic data source changes
Immutable mode for optimized rendering performance with large datasetsLoading indicators (Spinner, Shimmer)
Data refresh and source switching
Editing
All CRUD operations configuration
Edit settings and modes
Validation and error handling
Server-side data persistence
Edit event handling
Data Validation
Built-in validators (required, min, max, pattern)
Validation rules by column data type (number, string, date)
Custom validation functions
Dependent validation (validate based on other column values)
Dynamic rules (add/remove at runtime)
Error positioning and display
CRUD error handling (client + server validation)
Duplicate detection for unique fields
Async validation with server checks
Integration with edit modes, events, and filtering
Filtering Operations
Setup filtering module
Enable filtering feature
Filter types overview
Disable filtering for columns
Quick reference
Filter operators (21+ types)
Initial filters (OR and AND logic)
Wildcard and LIKE filters
Case sensitivity
Diacritics filter
FilterBar filter with template lifecycle
Menu filter with custom operators
Excel/CheckBox filter with multi-select
Custom filter UI components
Infinite scrolling for large data
Comparison of filter types
Sorting
Enable sorting on columns
Sort multiple columns
Custom sort comparison
Sort direction (ascending/descending)
Sorting with field mapping
Grouping and Aggregates
Enable grouping feature
Group by single/multiple columns
Group caption templates
Multi-level grouping
Lazy-load grouping for performance
Collapse/expand groups
Built-in aggregates (Sum, Avg, Min, Max, Count)
Custom aggregate functions
Footer aggregates
Group-level aggregates
Reactive aggregate updates
Selection Modes
Row selection modes
Cell selection mode
Column selection mode
Checkbox selection
Multi-select configurations
Selection events and methods
Row Operations
Detail row templates (master-detail)
Row drag and drop
Row pinning (freeze top/bottom rows)
Row spanning
Custom row templates
Row height management
Freezing & Pinning
Freeze columns
Freeze rows
Freeze headers
Row pinning
Frozen column behavior
Performance optimization with frozen columns
Combining frozen columns with virtual scrolling
Hierarchy & Nested Data
Parent-child data structures
Child grid configuration with queryString
Expand and collapse behavior
Nested grid templates
Detail row templates
Hierarchical data configuration
Multi-level hierarchy (3-4 levels)
Dynamic data binding for child grids
Programmatic expand/collapse control
Performance considerations for nested data
Scrolling and Performance
Virtual scrolling for large datasets
Infinite scrolling
Scroll performance optimization
Scroll events
Scroll behavior settings
Pagination
Page size configuration
Pagination types (numeric, combo, custom)
Page size options
Current page navigation
Total records handling
Searching
Enable search functionality
Multi-column search
Search operators
Clear search method
Search performance
Toolbar
Built-in toolbar items (add, edit, delete, save, cancel)
Custom toolbar templates
Toolbar item configuration
Custom buttons and functions
Toolbar events
Context Menu
Built-in context menu items
Custom context menus
Context menu configuration
Context menu events
Right-click menu handling
Submenu items and grouping
Selection-based menu display
Event Communication
Mandatory rules for event handling
Event binding patterns (configuration, addEventListener, property assignment)
85+ grid events by category (lifecycle, action, row, cell, edit, column, etc.)
requestType catalog for action events
Cancellation patterns for actionBegin and before-events
Event timing and firing sequences
Events for data changes, user interactions, and operations
Export Features
Export to Excel basics
Export options and customization
Template rendering in export
Server-side export
Exporting filtered/grouped data
Export to PDF basics
Export options and customization
Headers and footers
Template rendering in export
Server-side PDF export
Page orientation and sizing
Print grid functionality
Print settings and options
Print templates
Print formatting
Print preview
Configuration Management
Global grid settings
Local column configuration
Configuration precedence
Configuration merging
Dynamic configuration patterns
Best practices and templates
Save grid state to storage
Restore grid state
Persist state across sessions
State methods (save, restore, clear)
Local storage integration
⚠️ Rule : enablePersistence: true must be enable when use state management in grid.
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
Styling and Appearance
Available themes (Fluent, Bootstrap, Tailwind)
CSS customization
Custom CSS classes
Row/cell styling
Appearance methods
Dark mode support
Cell
Cell selection and manipulation
Get/set cell values
Cell formatting and styling
Cell templates
Cell events and interactions
Bulk cell operations
Clipboard
Copy/paste functionality
Clipboard operations
Copy selected cells
Paste data
Clipboard formatting
Accessibility
WCAG 2.2 & Section 508 compliance
Keyboard navigation (Tab, Enter, Escape, Arrows)
WAI-ARIA 1.2 implementation
Screen reader support (NVDA, JAWS)
Color contrast ratios (4.5:1, 3:1)
Focus management and restoration
ARIA live regions for dynamic updates
Accessibility testing with axe and screen readers
Responsive Design
Responsive grid layouts
Mobile and tablet design
Touch interactions and gestures
Responsive columns (show/hide)
Stack mode for mobile
Media queries for different screen sizes
Orientation change handling
Performance Optimization
Virtual scrolling for large datasets
Lazy loading groups and details
Data aggregation and caching
Memory management
Performance benchmarking
Best practices for 10k+ rows
Remote data optimization
Module System
Module injection pattern
Available modules and feature mapping
Module dependencies
Bundle optimization strategies
Common feature combinations
Dynamic module loading
Data Adaptors
URL/HTTP adaptor for RESTful APIs
ODataV4 adaptor for standard OData services
WebAPI adaptor for ASP.NET WebAPI
WebMethod adaptor for legacy ASMX Web Services
RemoteSave adaptor for separate read/write endpoints
Custom adaptor for proprietary APIs
GraphQL adaptor for GraphQL endpoints
Adaptor selection guide and comparison
Implementation patterns and error handling
Chart Integration
Embed charts in detail templates
Multi-chart dashboards
Grid and chart data synchronization
Interactive drill-down charts
Real-time updating charts
KPI visualization
API Reference
Grid properties reference
Methods and function signatures
Events reference
Settings objects (PageSettings, FilterSettings, etc.)
Common configuration patterns
Quick code examples
Programmatic Control (Methods)
Grid instance reference and method access
Mandatory usage rules for methods
Data and module methods (refresh, dataBind, destroy)
Row access and manipulation methods (add, update, delete)
Row selection methods (selectRow, selectRows, getSelectedRecords)
Column access and manipulation methods (show, hide, reorder)
Sorting, grouping, filtering methods
Editing and batch operation methods
Export and print methods (Excel, PDF, CSV)
Toolbar and hierarchy methods
DOM element access methods
Utility methods (event listeners, templates, spinners)
Quick usage examples for common scenarios
Quick Start Example import { Grid } from '@syncfusion/ej2-grids' ;
const data = [
{ OrderID : 10248 , CustomerName : 'VINET' , TotalAmount : 32.38 },
{ OrderID : 10249 , CustomerName : 'TOMSP' , TotalAmount : 11.61 }
];
const grid = new Grid ({
dataSource : data,
columns : [
{ field : 'OrderID' , headerText : 'Order ID' , width : 120 , type : 'number' },
{ field : 'CustomerName' , headerText : 'Customer Name' , width : 150 },
{ field : 'TotalAmount' , headerText : 'Total Amount' , width : 120 , type : 'number' , format : 'C2' }
],
allowPaging : true ,
pageSettings : { pageSize : 10 },
allowSorting : true ,
allowFiltering : true ,
selectionSettings : { type : 'Multiple' , mode : 'Row' }
});
grid.appendTo ('#grid' );
Common Patterns
Pattern 1: Read-Only Grid with Search
Pattern 2: Editable Grid with Validation
Pattern 3: Grouped Data with Summaries
Pattern 4: Large Dataset with Virtual Scrolling
Pattern 5: Master-Detail Hierarchy Use when displaying nested/related data. Setup detail templates.
Read: references/row.md
Pattern 6: Data Export
Key Props and Configuration Property Type Use Case dataSourceArray/URL Bind grid data from local array or remote URL columnsColumnModel[] Define column structure, types, templates allowEditingBoolean Enable inline/dialog row editing allowFilteringBoolean Enable filter bar for columns allowSortingBoolean Enable sort on column headers allowGroupingBoolean Enable group by columns allowPagingBoolean Enable pagination allowSelectionBoolean Enable row/cell selection editSettingsEditSettings Configure edit mode (inline/dialog/batch) filterSettingsFilterSettings Configure filter type (menu/bar/excel) groupSettingsGroupSettings Configure grouping behavior pageSettingsPageSettings Configure page size and type selectionSettingsSelectionSettings Configure selection mode (row/cell/checkbox) toolbarstring[] Add toolbar for CRUD operations
