Syncfusion React Grid 是一个用于展示和操作表格数据的组件技能，围绕 React 应用中的数据网格需求组织内容。它提供数据绑定、分页、排序、筛选、分组、编辑、导出、滚动模式、行列自定义以及状态管理等功能，用于处理各种规模和复杂度的数据集。
安全与信任边界：该 Grid 技能不执行任何远程数据访问，所有外部 API 交互由本技能信任边界之外的独立 DataManager 技能处理。
适用场景：需要在 React 应用中展示行列表格数据；需要处理大数据集并使用分页、虚拟滚动或无限滚动；需要单列或多列的排序、筛选与搜索；需要以内联方式编辑数据并支持多种编辑模式（Inline、Batch、Dialog）；需要将数据导出为 Excel 或 PDF；需要按列分组并配合汇总与计算；需要通过模板和样式自定义行与单元格；需要管理复杂列配置（冻结列、跨列、重排、调整大小）；需要在渲染成千上万条记录时优化性能；需要持久化网格状态以保存用户偏好与配置；需要针对不同屏幕尺寸提供响应式数据视图。
组件能力概览：数据绑定支持本地数组、远程数据源与 DataManager 集成；分页为客户端分页，可自定义页大小与导航；排序支持单列与多列并可使用自定义比较器；筛选支持多种模式（筛选栏、筛选菜单、类 Excel 筛选）；搜索支持跨列全局搜索；分组可按列分组并配合聚合与延迟加载；选择支持行、单元格、列选择以及复选框；编辑支持 Inline、Batch、Dialog 模式并带校验与模板；聚合支持 Sum、Average、Count、Min、Max，可显示在页脚、分组与标题；导出支持 Excel 与 PDF，可带模板并支持服务端；滚动支持 Standard、Virtual、Infinite 三种模式；行自定义包括模板、详情视图、拖放、固定、跨行；列自定义包括模板、调整大小、重排、冻结、跨列；性能方面针对大数据集做了渲染优化；响应式设计适配不同屏幕尺寸；模块系统基于功能模块以减小打包体积。
内置 API 的强制规则：使用 Grid 内置 API（137+ 方法、65+ 事件、95+ 属性）时需遵循以下规则。规则一：功能方法必须注入模块，方法只在对应模块注入后才生效，模块缺失时不会抛出错误。例如 goToPage() 需要 Page 模块并通过 Inject services={[Page]} 注入；sortColumn() 需要 Sort；filterByColumn() 需要 Filter；addRecord()、deleteRecord() 需要 Edit。规则二：区分属性与方法，属性通过 JSX props 设置（如 GridComponent allowPaging={true}），方法通过 ref 调用（如 gridRef.current.goToPage(2)），不能通过方法设置属性，也不能通过 props 调用方法。
功能导航要点：安装与初始化可参考 getting-started；数据管理参考 data-binding；列配置参考 columns（列类型、宽度与自适应、模板、跨列、重排、调整大小、冻结）；聚合参考 aggregates（页脚、分组页脚、分组标题聚合、自定义聚合函数）；分页参考 paging；排序参考 sorting；筛选从 filter-setup 开始，可选择 filter-types（FilterBar、Menu、Excel 三种）与 filter-operators（21+ 运算符、通配符、AND/OR 逻辑）；搜索参考 searching；分组参考 grouping（多列分组、标题模板、分组页脚聚合、延迟加载分组）；选择参考 selection；编辑参考 editing（allowEditing、allowAdding、allowDeleting，编辑模式与触发方式、编辑模板、校验、主键配置，注意主键列必须设置 isPrimaryKey={true}，否则编辑会静默失败）；行功能参考 row（行模板、详情模板、拖放、固定、跨行）；导出参考 excel-export 与 pdf-export；滚动参考 scrolling（标准、虚拟、无限，注意 height 为必需项，缺失时滚动会被静默禁用，虚拟滚动与无限滚动下不要与 allowPaging 组合使用；行数对应模式：少于 1000 用 allowPaging 与 Page 模块，1 千至 10 万用 enableVirtualization + height 与 VirtualScroll 且不分页，连续数据用 enableInfiniteScrolling + height 与 InfiniteScroll，10 万以上分组用 enableVirtualization + lazyLoadGrouping 与 VirtualScroll、Group）；冻结与固定参考 frozen；工具栏参考 toolbar；上下文菜单参考 context-menu；单元格操作参考 cell 与 clipboard；打印参考 print；样式与外观参考 style-and-appearance（CSS 自定义、主题、深色模式、内联样式、尺寸模式，注意 rowDataBound 与 queryCellInfo 在每次渲染时触发，不应在其中发起 API 调用，也不要同时为同一字段添加列模板和 rowDataBound 处理器以免产生重复冲突的样式逻辑）；层级与嵌套数据参考 hierarchy-grid；自适应模式参考 adaptive（enableAdaptiveUI 可将筛选、排序、列选择器与编辑对话框渲染为全屏以提升移动端可用性，并需在父元素应用 e-bigger 类；rowRenderingMode="Vertical" 可纵向展示行元素，默认 Horizontal；纵向渲染支持分页、排序、筛选、选择、对话框编辑、聚合、无限滚动与工具栏，列菜单仅在 Horizontal 模式生效；AdaptiveUIMode 可设为 Mobile 仅移动端渲染自适应布局，或 Both（默认）同时用于移动端与桌面端）；配置管理参考 global-local 与 state-management（注意使用状态管理时需启用 enablePersistence={true}）；模块系统参考 modules（30+ 模块及其依赖、注入模式、功能模块映射、打包优化与惰性加载，每个功能都需要通过 Inject services={[...]} 显式注入，未注入时功能被静默忽略且不抛错）；数据连接与适配器参考 adaptors（7 种适配器类型，含 UrlAdaptor、ODataV4Adaptor、WebApiAdaptor、GraphQLAdaptor，自定义适配器与 RemoteSaveAdaptor，后端配置示例与请求响应格式）；性能优化参考 performance；无障碍参考 accessibility（WCAG 2.2 与 Section 508、WAI-ARIA、键盘导航、对比度与焦点管理）；数据校验参考 validation；命令列与行操作参考 command-column；本地化参考 localization（60+ 语言、区域设置、数字日期货币格式、RTL、语言切换）；响应式设计参考 responsive-design；属性配置参考 properties-configuration；编程方法与事件分别参考 programmatic-api 与 events-catalog（actionBegin 可在动作前取消或修改，actionComplete 在动作后响应，必须接入 actionFailure 处理错误，可用 args.requestType 识别动作类型）；进阶主题包括实时更新（WebSocket 与 SignalR、推送与拉取、连接管理）、性能监控以及网格测试（Jest 与 React Testing Library）。
快速开始示例（保留原始代码内容）：
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page, Sort, Filter } from '@syncfusion/ej2-react-grids'; import React from 'react'; import '../styles/App.css';
const gridRef = useRef<GridComponent | null>(null); // Sample data const data = [ { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(1996, 6, 4) }, { OrderID: 10249, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(1996, 6, 5) }, ];
function App() { return ( <GridComponent ref={gridRef} dataSource={data} allowPaging={true} allowSorting={true} allowFiltering={true} pageSettings={{ pageSize: 10 }} > <ColumnsDirective> <ColumnDirective field='OrderID' headerText='Order ID' width='100' textAlign='Right' /> <ColumnDirective field='CustomerID' headerText='Customer' width='120' /> <ColumnDirective field='OrderDate' headerText='Order Date' width='130' type='date' format='yMd' /> </ColumnsDirective> <Inject services={[Page, Sort, Filter]} /> </GridComponent> ); }
export default App;
限制与注意事项：该技能不执行远程数据访问；功能方法与属性依赖明确的模块注入，缺失时静默失效；编辑需设置主键列，滚动需设置 height；虚拟滚动与无限滚动不应与分页同时使用；rowDataBound 与 queryCellInfo 每次渲染都会触发；纵向行渲染模式下列菜单不可用；未提供收费、价格与平台等具体信息，资料中未说明的内容暂未提供。