Syncfusion React Grid

Table of Contents

• 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

• 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

• 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

Rule 1: Module Injection Required for Feature Methods

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

Documentation 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

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

• 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.

allowPaging

Page

enableVirtualization

height

VirtualScroll

enableInfiniteScrolling

height

InfiniteScroll

enableVirtualization

lazyLoadGrouping

VirtualScroll

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

enablePersistence={true}

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.

<Inject services={[...]} />

<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

Programmatic Control

• The full programmatic method catalog
• Event prop reference
• Dynamic column control

• setProperties()

  examples, export hooks, and cross-feature

Event Communication

• 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

• 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

1. Set

   allowPaging={true}

   to enable pagination
2. Configure

   pageSettings.pageSize

   for records per page
3. Inject the

   Page

   module
4. For very large datasets (10,000+), use Virtual Scrolling instead

Edit Data In-Place

1. Set

   editSettings={{ mode: 'Inline', allowEditing: true, allowAdding: true, allowDeleting: true }}

2. Set

   isPrimaryKey={true}

   on the primary key column
3. Inject the

   Edit

   module
4. Users double-click rows or use toolbar buttons to edit

Export to Excel/PDF

1. Import

   ExcelExport

   or

   PdfExport

   modules
2. Inject modules into grid
3. Add toolbar with export buttons
4. Grid handles export automatically

Group & Summarize Data

1. Set

   allowGrouping={true}

2. Inject

   Group

   and

   Aggregate

   modules
3. Configure

   aggregates

   property with column, type, and templates
4. Users drag column headers to group area

High Performance (10,000+ Rows)

1. Use Virtual Scrolling:

   enableVirtualization={true}

   with

   height

   set
2. Use Lazy Grouping:

   groupSettings={ lazyLoadGrouping: true }

3. Use Remote Data with DataManager for server-side operations
4. Avoid heavy templates; use lightweight rendering

Key Props and Configuration

dataSource

dataSource={data}

allowPaging

allowPaging={true}

allowSorting

allowSorting={true}

allowFiltering

allowFiltering={true}

allowGrouping

allowGrouping={true}

editSettings

editSettings={{ mode: 'Dialog', allowEditing: true }}

toolbar

toolbar={['Add', 'Edit', 'Delete', 'Update', 'Cancel']}