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.

When to Use This Skill
Component Overview
Mandatory Rules for Inbuilt API
Documentation Navigation Guide
Quick Start Example
Common Patterns
Key Props and Configuration

When to Use This Skill

Use the Syncfusion React Grid when you need to:

Display tabular data with rows and columns in a React application
Handle 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 integration
Paging: Client-side pagination with customizable page size and navigation
Sorting: Single and multi-column sorting with custom comparers
Filtering: Multiple filter modes (Filter Bar, Filter Menu, Excel-like filter)
Searching: Global search across columns
Grouping: Group data by columns with aggregates and lazy loading
Selection: Row, cell, and column selection with checkbox support
Editing: Inline, Batch, and Dialog modes with validation and templates
Aggregates: Sum, Average, Count, Min, Max with footer, group, and caption display
Exporting: Excel and PDF export with templates and server-side support
Scrolling: Standard, Virtual, and Infinite scrolling modes
Row Customization: Templates, detail views, drag-drop, pinning, spanning
Column Customization: Templates, resizing, reordering, freezing, spanning
Performance: Optimized rendering for large datasets
Responsive Design: Adaptive layouts for different screen sizes
Module 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

📄 Full API Reference: references/grid-properties-methods-events.md
📄 Backend Integration: references/adaptors.md

Documentation Navigation Guide

Getting Started & Setup

📄 Read: references/getting-started.md

Installation and package setup
Basic component initialization
CSS imports and theme configuration
Simple data binding example
Module injection

Data Management

📄 Read: references/data-binding.md

Local data binding with arrays
Remote data with DataManager
Loading indicators (Spinner, Shimmer)
Data source configuration

Column Configuration

📄 Read: references/columns.md

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

📄 Read: references/aggregates.md

Footer aggregates (Sum, Avg, Count, Min, Max, etc.)
Group footer aggregates
Group caption aggregates
Custom aggregate functions
Reactive aggregate updates

Navigation & Pagination

📄 Read: references/paging.md

Enable and configure paging
Page size and navigation
Page change events
Customizing pager UI
Query string integration

Sorting Data

📄 Read: references/sorting.md

Single and multi-column sorting
Sort direction control
Initial sort configuration
Custom comparers
Prevent sorting for specific columns

Filtering & Searching

📄 Read: references/filtering.md

Filter bar, filter menu, Excel-like filter modes
Filter conditions and operators
Composite filtering
Filter templates
Remote filtering

📄 Read: references/searching.md

Grid search functionality
Global search across columns
Search with filter integration
Case-sensitive search options

Grouping Data

📄 Read: references/grouping.md

Enable grouping by columns
Group by multiple columns
Caption templates
Group footer aggregates
Lazy-load grouping for performance

Selection

📄 Read: references/selection.md

Row, cell, column selection modes
Checkbox selection
Multiple selection handling
Selection events and methods
Programmatic selection

Editing

📄 Read: references/editing.md

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

📄 Read: references/row.md

Row templates
Detail templates (expand/collapse)
Row drag and drop
Row pinning
Row spanning
Row selection and events

Exporting

📄 Read: references/excel-export.md

Basic Excel export functionality
Export options and configuration
Exporting with column templates
Server-side export
Formatting and styling in exports

📄 Read: references/pdf-export.md

PDF export setup
Headers and footers
Export options and customization
Exporting with templates
Server-side PDF export
Page orientation and sizing

Scrolling Modes

📄 Read: references/scrolling.md

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	`allowPaging`	`Page` module
1K – 100K	`enableVirtualization` + `height`	`VirtualScroll`, no paging
Continuous	`enableInfiniteScrolling` + `height`	`InfiniteScroll`
100K+ grouped	`enableVirtualization` + `lazyLoadGrouping`	`VirtualScroll`, `Group`

Freezing & Pinning

📄 Read: references/frozen.md

Freeze columns
Freeze rows
Freeze headers
Row pinning
Frozen column behavior

Toolbar

📄 Read: references/toolbar.md

Built-in toolbar items
Custom toolbar buttons
Toolbar icons and events
Edit toolbar integration
Toolbar item templates

Context Menu

📄 Read: references/context-menu.md

Built-in context menu items
Custom context menus
Context menu configuration
Context menu events

Cell Operations

📄 Read: references/cell.md

Cell editing and selection
Cell templates
Cell value formatting
Cell ranges and operations
Cell focus and navigation

📄 Read: references/clipboard.md

Copy and paste functionality
Clipboard events
Custom clipboard actions
Copy column headers
Paste from external sources

Printing

📄 Read: references/print.md

Print grid
Print templates
Print customization
Print specific rows/columns
Print orientation and sizing

Styling & Appearance

📄 Read: references/style-and-appearance.md

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

📄 Read: references/hierarchy-grid.md

Parent-child data structures
Child grid
Expand and collapse behavior
Nested grid templates
Detail row templates
Hierarchical data configuration

Adaptive Mode

📄 Read: references/adaptive.md

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

📄 Read: references/global-local.md

Global grid settings
Local column configuration
Configuration precedence
Configuration merging

📄 Read: references/state-management.md

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

📄 Read: references/modules.md

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

📄 Read: references/adaptors.md

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

📄 Read: references/performance.md

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

📄 Read: references/accessibility.md

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

📄 Read: references/validation.md

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

📄 Read: references/command-column.md

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

📄 Read: references/localization.md

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

📄 Read: references/responsive-design.md

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

Programmatic Control

📄 Read: references/programmatic-api.md

The full programmatic method catalog
Event prop reference
Dynamic column control
setProperties() examples, export hooks, and cross-feature

Event Communication

📄 Read: references/events-catalog.md

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, see the requestType table in the events catalog

Advanced Tutorials & Real-World Patterns

📄 Read: references/advanced-tutorials.md

Real-time data updates (WebSocket, SignalR)
Master-detail with filtering
Complex calculations and running totals
Advanced filtering with complex predicates
Custom themes and theme switching
Performance monitoring techniques
Unit and integration testing strategies

Quick Start Example

import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page, Sort, Filter } from '@syncfusion/ej2-react-grids';
import React from 'react';
import '../styles/App.css';

// Sample data
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
      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;

Common Patterns

Display & Navigate Large Datasets

Set allowPaging={true} to enable pagination
Configure pageSettings.pageSize for records per page
Inject the Page module
For very large datasets (10,000+), use Virtual Scrolling instead

Edit Data In-Place

Set editSettings={{ mode: 'Inline', allowEditing: true, allowAdding: true, allowDeleting: true }}
Set isPrimaryKey={true} on the primary key column
Inject the Edit module
Users double-click rows or use toolbar buttons to edit

Export to Excel/PDF

Import ExcelExport or PdfExport modules
Inject modules into grid
Add toolbar with export buttons
Grid handles export automatically

Group & Summarize Data

Set allowGrouping={true}
Inject Group and Aggregate modules
Configure aggregates property with column, type, and templates
Users drag column headers to group area

High Performance (10,000+ Rows)

Use Virtual Scrolling: enableVirtualization={true} with height set
Use Lazy Grouping: groupSettings={ lazyLoadGrouping: true }
Use Remote Data with DataManager for server-side operations
Avoid heavy templates; use lightweight rendering

Key Props and Configuration

Property	Type	Purpose	Example
`dataSource`	Array \| DataManager	Data to display	`dataSource={data}`
`allowPaging`	boolean	Enable pagination	`allowPaging={true}`
`allowSorting`	boolean	Enable sorting by clicking headers	`allowSorting={true}`
`allowFiltering`	boolean	Enable filter bar	`allowFiltering={true}`
`allowGrouping`	boolean	Enable grouping	`allowGrouping={true}`
`editSettings`	EditSettingsModel	Editing configuration	`editSettings={{ mode: 'Dialog', allowEditing: true }}`
`toolbar`	string[]	Toolbar items	`toolbar={['Add', 'Edit', 'Delete', 'Update', 'Cancel']}`

syncfusion-react-grid