用途:在实现 AG Grid 表格、配置功能或创建自定义单元格渲染器时使用。适合需要排序、筛选、分页的数据表,可编辑的行内编辑网格,带分组/聚合的复杂网格,借助虚拟化处理高性能场景,以及类 Excel 功能。不适合简单表格(可用 HTML/MUI Table)、非表格可视化(用图表)和移动优先场景。
主要能力:基于 ag-grid-react 的 React 数据表格;列配置 API(ColDef、onGridReady)与框架无关,Angular/Vue 需按各自组件语法调整单元格渲染器。支持排序、筛选、分页、行内编辑、分组聚合、CSV/Excel 导出、虚拟化与不可变数据。
必要用法:用 TypeScript 接口定义列以保证类型安全,例如从 ag-grid-community 导入 ColDef 并声明 ColDef<RowData>[];用 defaultColDef 统一设置 sortable、filter、resizable 等公共配置,避免逐列重复;启用可访问性,如 enableAccessibility={true}、suppressMenuHide={false},并遵循键盘导航、屏幕阅读器与 ARIA 最佳实践。自定义单元格用 cellRenderer/cellRendererFramework;可编辑用 editable: true 并处理 onCellValueChanged;筛选用 filter: true 或指定 agTextColumnFilter、agNumberColumnFilter;大数据集用 rowModelType: 'infinite' 做服务端分页;分组用 rowGroup: true;导出用 exportDataAsCsv()/exportDataAsExcel();性能上默认虚拟化,React 可用 immutableData: true。
限制与边界:需处理空数据提示、加载状态、错误边界、尺寸调整事件,并测试键盘导航。资料未提供安装命令、版本、收费与价格信息。