Syncfusion React Grid

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
• Component Overview
• Mandatory Rules for Inbuilt API
• Feature/Skill Navigation Guide
• Quick Start Example

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.

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 Properties API Reference: references/properties-configuration.md 📄 Full Methods API Reference: references/programmatic-api.md 📄 Full Events API Reference: references/events-catalog.md 📄 Backend Integration: references/adaptors.md

Feature 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

Start here: 📄 Read references/filter-setup.md — Enable filtering, choose filter type (FilterBar, Menu, Excel, CheckBox)

Choose your type:

• 📄 Read references/filter-types.md — All 3 filter types: FilterBar (inline text), Menu (operators), Excel (checkboxes)
• 📄 Read references/filter-operators.md — All 21+ operators, syntax, wildcards, AND/OR logic

Searching

📄 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