syncfusion-react-grid

What this skill does

# 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](#when-to-use-this-skill)
- [Component Overview](#component-overview)
- [Mandatory Rules for Inbuilt API](#mandatory-rules-for-inbuilt-api)
- [Feature/Skill Navigation Guide](#feature-navigation-guide)
- [Quick Start Example](#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.

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

---

## Feature Navigation Guide

### Getting Started & Setup
📄 **Read:** [references/getting-started.md](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](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](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](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](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](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](references/filter-setup.md) — Enable filtering, choose filter type (FilterBar, Menu, Excel, CheckBox)

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

### Searching

📄 **Read:** [references/searching.md](references/searching.md)
- Grid search functionality
- Global search across columns
- Search with filter integration
- Case-sensitive search options

### Grouping Data
📄 **Read:** [references/grouping.md](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](references/selection.md)
- Row, cell, column selection modes
- Checkbox selection
- Multiple selection handling
- Selection events and methods
- Programmatic selection

### Editing
📄 **Read:** [references/editing.md](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](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](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](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:*