Syncfusion React Treegrid

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
• TreeGrid Overview
• Data Structure Rules
• Documentation Navigation Guide
• 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:

// ✅ 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:

// ✅ 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:

// 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:

// ✅ 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

📄 Events Reference 📖 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

• 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

• 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

• 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

• Cell editing
• Cell templates, styling and attributes
• Cell selection
• Cell formatting

Editing

📖 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

• Single and multi-column sorting
• Initial sort order configuration
• Custom sort comparers
• Sorting with templates
• Programmatic sorting

Filtering

📖 references/filtering.md

• Filter bar mode
• Filter menu mode
• Excel-like filtering
• Custom filters
• Programmatic filtering
• Filter templates

Searching

📖 references/searching.md

• Global search across all columns
• Search highlight
• Programmatic search
• Search with templates

Selection

📖 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

• Pager configuration and options
• Page size settings
• Initial page settings
• Pager template customization
• Programmatic pagination

📄 Scrolling 📖 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

• Freeze header rows
• Freeze columns
• Freeze direction
• Lock columns
• IsFrozen property usage

📄 Virtual Scrolling & Infinite Scrolling 📖 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

• Standard aggregates (Sum, Average, Min, Max, Count)
• Custom aggregates
• Footer aggregates
• Group aggregates
• Hierarchical aggregates for child data

State Persistence

📖 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

• Built-in toolbar items
• Custom toolbar items
• Toolbar item types (Button, Separator, Dropdown)
• Toolbar item click handling
• Toolbar template customization

Context Menu