syncfusion-react-treegrid

What this skill does

# Syncfusion React TreeGrid

A comprehensive skill for implementing and customizing Syncfusion's React TreeGrid component. TreeGrid visualizes self-referential hierarchical data in a tabular layout with expand/collapse functionality, enterprise features like virtual scrolling, and comprehensive export options.

## Table of Contents
- [When to Use This Skill](#when-to-use-this-skill)
- [TreeGrid Overview](#treegrid-overview)
- [Data Structure Rules](#data-structure-rules)
- [Documentation Navigation Guide](#documentation-navigation-guide)
- [Quick Start Example](#quick-start-example)


## When to Use This Skill

Use this skill when you need to:
- Display hierarchical or tree-structured data (organizational charts, file systems, bill of materials)
- Configure columns with proper data binding and formatting
- Implement data editing (cell, row, dialog, batch, template modes)
- Add sorting, filtering, and searching capabilities
- Handle row and cell operations (selection, templates, spanning)
- Optimize performance with virtual scrolling or infinite scrolling
- Configure paging and scrolling strategies
- Export data to PDF, Excel, or CSV formats
- Implement state persistence and aggregation
- Customize appearance with themes and styling
- Support accessibility and internationalization (RTL, localization)

## TreeGrid Overview

The TreeGrid is optimized for displaying self-referential hierarchical data with:
- **Auto-expand/collapse** functionality for collapsible rows
- **Enterprise features**: virtual scrolling, aggregates, state persistence
- **Adaptive UI** for mobile and small screens
- **Comprehensive export**: PDF, Excel, CSV formats
- **Full accessibility**: WCAG compliance, keyboard navigation, ARIA support
- **Internationalization**: RTL support, locale customization

## Data Structure Rules

### Rule 1: childMapping is MANDATORY for Hierarchical Data
**Severity**: 🔴 CRITICAL - Grid will not expand/collapse without this

**Requirement**:
```jsx
// ✅ REQUIRED - Must match data property name exactly
<TreeGridComponent 
  dataSource={data}
  childMapping='subtasks'>
  <ColumnsDirective>
    {/* Columns */}
  </ColumnsDirective>
</TreeGridComponent>

// ❌ WRONG - Will not work
<TreeGridComponent 
  dataSource={data}>
  {/* No childMapping = No expansion possible */}
</TreeGridComponent>
```

**Data Format**:
```jsx
// ✅ CORRECT - childMapping matches 'subtasks' property
const data = [
  {
    TaskID: 1,
    TaskName: 'Parent',
    subtasks: [  // Must match childMapping value exactly
      { TaskID: 2, TaskName: 'Child' }
    ]
  }
];
```

**Exception**: Use `idMapping` + `parentIdMapping` for flat parent-child structure:
```jsx
// Alternative: Flat structure with parent IDs
<TreeGridComponent 
  dataSource={flatData}
  idMapping='TaskID'
  parentIdMapping='ParentID'
  hasChildMapping='isParent'>
</TreeGridComponent>
```

---

### Rule 2: Data Type Matching is MANDATORY
**Severity**: 🟠 IMPORTANT - Type mismatches cause rendering/sorting issues

**Requirement**:
```jsx
// ✅ CORRECT - Type matches column definition
const data = [
  {
    TaskID: 1,              // number type
    TaskName: 'Planning',   // string type
    StartDate: new Date(),  // Date object for date columns
  }
];

// Column definition must match data types
<ColumnsDirective>
  <ColumnDirective field='TaskID' headerText='ID' type='number'></ColumnDirective>
  <ColumnDirective field='TaskName' headerText='Task' type='string'></ColumnDirective>
  <ColumnDirective field='StartDate' headerText='Date' type='date' format='yMd'></ColumnDirective>
</ColumnsDirective>

// ❌ WRONG - Type mismatch
const data = [
  {
    TaskID: '1',            // String instead of number
    StartDate: '02/03/2024' // String instead of Date object
  }
];
```
## Complete Props Reference

📄 **Property and Methods:** [references/programmatic-api.md](references/programmatic-api.md)

**📄 Events Reference**
📖 [references/events-reference.md](references/events-reference.md)
- Complete event reference guide
- Data events (actionBegin, actionComplete, actionFailure)
- Editing events (cellEdit, cellSave, beforeEdit)
- Selection events (rowSelected, rowDeselected, cellSelected)
- Expand/collapse events
- Column events (drag, drop, resize, hide, show)
- Row events and utilities

---

## Documentation Navigation Guide

### Data Binding

📖 [references/data-binding.md](references/data-binding.md)
- Local vs. remote data sources
- Self-referential parent-child relationships
- DataManager integration
- ExpandStateMapping for initial expand state
- Complex data binding for nested objects

### Column Configuration

📖 [references/column.md](references/column.md)
- Column definitions and field mapping
- Tree column index setup
- Data types and formatting
- Column templates and custom rendering
- Headers and styling
- Foreign key columns

### Row Operations 
📖 [references/row.md](references/row.md)
- Row templates and custom rendering
- Row height configuration
- Row spanning
- Detail templates for nested content
- Row drag-and-drop
- Indent and outdent operations

### Cell Operations 
📖 [references/cell.md](references/cell.md)
- Cell editing
- Cell templates, styling and attributes
- Cell selection
- Cell formatting


### Editing
📖 [references/editing.md](references/editing.md)
- Cell editing mode
- Row editing mode
- Dialog editing
- Batch editing
- Template editing
- Validation rules and custom validators
- Command column editing
- Server-side persistence

### Sorting

📖 [references/sorting.md](references/sorting.md)
- Single and multi-column sorting
- Initial sort order configuration
- Custom sort comparers
- Sorting with templates
- Programmatic sorting

### Filtering
📖 [references/filtering.md](references/filtering.md)
- Filter bar mode
- Filter menu mode
- Excel-like filtering
- Custom filters
- Programmatic filtering
- Filter templates

### Searching
📖 [references/searching.md](references/searching.md)
- Global search across all columns
- Search highlight
- Programmatic search
- Search with templates

### Selection
📖 [references/selection.md](references/selection.md)
- Row selection (single and multiple)
- Cell selection
- Checkbox selection
- Selection mode configuration
- Programmatic selection
- Selection change events

### Display & Layout (Performance & Presentation)

**📄 Paging**
📖 [references/paging.md](references/paging.md)
- Pager configuration and options
- Page size settings
- Initial page settings
- Pager template customization
- Programmatic pagination

**📄 Scrolling**
📖 [references/scrolling.md](references/scrolling.md)
- Vertical and horizontal scrolling
- Scroll height configuration
- Scroll position control
- Sticky headers
- Responsive scrolling

**📄 Frozen Rows and Columns**
📖 [references/frozen-rows-columns.md](references/frozen-rows-columns.md)
- Freeze header rows
- Freeze columns
- Freeze direction
- Lock columns
- IsFrozen property usage

**📄 Virtual Scrolling & Infinite Scrolling**
📖 [references/virtual-scrolling-infinite-scrolling.md](references/virtual-scrolling-infinite-scrolling.md)
- Virtual scrolling for large datasets
- Infinite scrolling configuration
- Row height for virtual scroll
- ViewportIndex and ViewportStartIndex
- Performance optimization with virtual scroll

### Aggregates
📖 [references/aggregates.md](references/aggregates.md)
- Standard aggregates (Sum, Average, Min, Max, Count)
- Custom aggregates
- Footer aggregates
- Group aggregates
- Hierarchical aggregates for child data

### State Persistence
📖 [references/state-persistence.md](references/state-persistence.md)
- Global state persistence
- Local state persistence
- ExpandState tracking
- Persist sort, filter, and paging
- State restoration on reload

### Toolbar
📖 [references/toolbar.md](references/toolbar.md)
- Built-in toolbar items
- Custom toolbar items
- Toolbar item types (Button, Separator, Dropdown)
- Toolbar item click handling
- Toolbar template customization

### Context Menu
📖 [refere