• When to Use This Skill
• Component Overview
• Mandatory Rules for Inbuilt API
• Documentation Navigation Guide
• Quick Start Example
• Common Patterns
• Key Props and Configuration

• 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

• 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

• 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

• Installation and package setup
• Basic component initialization
• CSS imports and theme configuration
• Simple data binding example
• Module injection

• Local data binding with arrays
• Remote data with DataManager
• Loading indicators (Spinner, Shimmer)
• Data source configuration

• 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)

• Footer aggregates (Sum, Avg, Count, Min, Max, etc.)
• Group footer aggregates
• Group caption aggregates
• Custom aggregate functions
• Reactive aggregate updates

• Enable and configure paging
• Page size and navigation
• Page change events
• Customizing pager UI
• Query string integration

• Single and multi-column sorting
• Sort direction control
• Initial sort configuration
• Custom comparers
• Prevent sorting for specific columns

• Filter bar, filter menu, Excel-like filter modes
• Filter conditions and operators
• Composite filtering
• Filter templates
• Remote filtering

• Grid search functionality
• Global search across columns
• Search with filter integration
• Case-sensitive search options

• Enable grouping by columns
• Group by multiple columns
• Caption templates
• Group footer aggregates
• Lazy-load grouping for performance

• Row, cell, column selection modes
• Checkbox selection
• Multiple selection handling
• Selection events and methods
• Programmatic selection

• 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 templates
• Detail templates (expand/collapse)
• Row drag and drop
• Row pinning
• Row spanning
• Row selection and events

• Basic Excel export functionality
• Export options and configuration
• Exporting with column templates
• Server-side export
• Formatting and styling in exports

• PDF export setup
• Headers and footers
• Export options and customization
• Exporting with templates
• Server-side PDF export
• Page orientation and sizing

• 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.

allowPaging

Page

enableVirtualization

height

VirtualScroll

enableInfiniteScrolling

height

InfiniteScroll

enableVirtualization

lazyLoadGrouping

VirtualScroll

Group

• Freeze columns
• Freeze rows
• Freeze headers
• Row pinning
• Frozen column behavior

• Built-in toolbar items
• Custom toolbar buttons
• Toolbar icons and events
• Edit toolbar integration
• Toolbar item templates

• Built-in context menu items
• Custom context menus
• Context menu configuration
• Context menu events

• Cell editing and selection
• Cell templates
• Cell value formatting
• Cell ranges and operations
• Cell focus and navigation

• Copy and paste functionality
• Clipboard events
• Custom clipboard actions
• Copy column headers
• Paste from external sources

• Print grid
• Print templates
• Print customization
• Print specific rows/columns
• Print orientation and sizing

• 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.

• Parent-child data structures
• Child grid
• Expand and collapse behavior
• Nested grid templates
• Detail row templates
• Hierarchical data configuration

• 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.

• Global grid settings
• Local column configuration
• Configuration precedence
• Configuration merging

• 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

enablePersistence={true}

• Grid module architecture and feature-based modules
• 30+ available modules and their dependencies
• Module injection patterns
• Feature-module mapping
• Bundle optimization and lazy loading
• Conditional module loading
• Every feature in the Syncfusion React Grid requires explicit module injection via

  <Inject services={[...]} />

  . Without injection, the feature is silently ignored — no error is thrown.

<Inject services={[...]} />

<GridComponent>

• 7 adaptor types for backend integration
• UrlAdaptor, ODataV4Adaptor, WebApiAdaptor, GraphQLAdaptor
• Custom adaptors and RemoteSaveAdaptor
• Backend configuration examples (C#, Node.js)
• Request/response format specifications
• Error handling and adaptor comparison

• Virtual scrolling for 10,000+ records
• Infinite scrolling and progressive loading
• Memory management and cleanup strategies
• Bundle size optimization
• Event debouncing and throttling
• Performance benchmarking and monitoring

• WCAG 2.2 and Section 508 compliance
• WAI-ARIA implementation and screen readers
• Keyboard navigation (Tab, arrows, Enter, Escape)
• Color contrast and focus management
• Accessibility testing tools (axe, NVDA, JAWS)
• Semantic HTML practices

• Built-in validators (required, min, max, pattern)
• Custom validation functions
• Async validation with server checks
• Validation events and error display
• Server-side validation with ASP.NET
• Validation rules by column type

• Built-in commands (Edit, Delete, Save, Cancel)
• Custom command buttons
• Role-based and status-based commands
• Command click events
• Conditional command visibility
• CSS styling and icons

• Multi-language support (60+ languages)
• Locale setup and culture configuration
• Number, date, and currency formatting
• RTL support (Arabic, Hebrew, Farsi)
• Custom localization and translation
• Language switcher implementation

• Adaptive UI for mobile/tablet/desktop
• Responsive media queries and breakpoints
• Column visibility hiding rules
• Touch interactions (swipe, long-press)
• Mobile optimization strategies
• Device-specific styling patterns

• The full programmatic method catalog
• Event prop reference
• Dynamic column control

• setProperties()

  examples, export hooks, and cross-feature

• Wire

  actionBegin

  to cancel or mutate before an action (

  args.cancel = true

  ,

  args.data.field = value

  )
• Wire

  actionComplete

  to react after (API call, toast, refresh, toolbar restore)
• Must wire

  actionFailure

  for error handling
• Use

  args.requestType

  to identify the action, see the requestType table in the events catalog

• Real-time data updates (WebSocket, SignalR)
• Master-detail with filtering
• Complex calculations and running totals
• Advanced filtering with complex predicates
• Custom themes and theme switching
• Performance monitoring techniques
• Unit and integration testing strategies

1. Set

   allowPaging={true}

   to enable pagination
2. Configure

   pageSettings.pageSize

   for records per page
3. Inject the

   Page

   module
4. For very large datasets (10,000+), use Virtual Scrolling instead

1. Set

   editSettings={{ mode: 'Inline', allowEditing: true, allowAdding: true, allowDeleting: true }}

2. Set

   isPrimaryKey={true}

   on the primary key column
3. Inject the

   Edit

   module
4. Users double-click rows or use toolbar buttons to edit

1. Import

   ExcelExport

   or

   PdfExport

   modules
2. Inject modules into grid
3. Add toolbar with export buttons
4. Grid handles export automatically

1. Set

   allowGrouping={true}

2. Inject

   Group

   and

   Aggregate

   modules
3. Configure

   aggregates

   property with column, type, and templates
4. Users drag column headers to group area

1. Use Virtual Scrolling:

   enableVirtualization={true}

   with

   height

   set
2. Use Lazy Grouping:

   groupSettings={ lazyLoadGrouping: true }

3. Use Remote Data with DataManager for server-side operations
4. Avoid heavy templates; use lightweight rendering