Implements Syncfusion React Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids

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: [references/scrolling.md](references/scrolling.md) 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. Rows Mode Key Config < 1,000 allowPaging Page module 1K – 100K enableVirtualization + height VirtualScroll , no paging Continuous enableInfiniteScrolling + height InfiniteScroll 100K+ grouped enableVirtualization + lazyLoadGrouping VirtualScroll , Group Freezing & Pinning 📄 Read: [references/frozen.md](references/frozen.md) Freeze columns Freeze rows Freeze headers Row pinning Frozen column behavior Toolbar 📄 Read: [references/toolbar.md](references/toolbar.md) Built in toolbar items Custom toolbar buttons Toolbar icons and events Edit toolbar integration Toolbar item templates Context Menu 📄 Read: [references/context menu.md](references/context menu.md) Built in context menu items Custom context menus Context menu configuration Context menu events Cell Operations 📄 Read: [references/cell.md](references/cell.md) Cell editing and selection Cell templates Cell value formatting Cell ranges and operations Cell focus and navigation 📄 Read: [references/clipboard.md](references/clipboard.md) Copy and paste functionality Clipboard events Custom clipboard actions Copy column headers Paste from external sources Printing 📄 Read: [references/print.md](references/print.md) Print grid Print templates Print customization Print specific rows/columns Print orientation and sizing Styling & Appearance 📄 Read: [references/style and appearance.md](references/style and appearance.md) 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 📄 Read: [references/hierarchy grid.md](references/hierarchy grid.md) Parent child data structures Child grid Expand and collapse behavior Nested grid templates Detail row templates Hierarchical data configuration Adaptive Mode 📄 Read: [references/adaptive.md](references/adaptive.md) 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 📄 Read: [references/global local.md](references/global local.md) Global grid settings Local column configuration Configuration precedence Configuration merging 📄 Read: [references/state management.md](references/state management.md) 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 ⚠️ Rule : enablePersistence={true} must be enable when use state management in grid. Module System & Architecture 📄 Read: [references/modules.md](references/modules.md) Grid module architecture and feature based modules 30+ available mo

syncfusion-react-grid