mcpField
A
ag-grid

ag-grid

github.com/joabgonzalez开发9124 次安装19 周前更新
代码仓库

关于 ag-grid

这是一项使用 AG Grid 构建 React 数据网格的技能，涵盖类型化列定义、编辑、筛选、无障碍和性能实践。适用于开发复杂表格界面的开发者，而非简单表格或非表格可视化。

主要功能

  1. 01配置排序、筛选和分页
  2. 02支持行内编辑与自定义单元格
  3. 03使用 TypeScript 列定义
  4. 04通过虚拟化提升性能
  5. 05遵循键盘和屏幕阅读器无障碍实践

适用场景

  1. 01构建可编辑数据网格
  2. 02为表格数据添加筛选和分页
  3. 03创建分组或聚合网格
  4. 04提升大型表格的渲染效率

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/joabgonzalez/ai-agents-skills --skill ag-grid

安装后在 Claude Code 中输入/ag-grid确认已加载。

详细介绍

AG Grid

支持排序、筛选、分页、行内编辑和类似 Excel 功能的 React 数据表格。提供 TypeScript 类型、安全的无障碍功能和虚拟化。

示例使用 ag-grid-react。列配置 API（ColDef、onGridReady）与框架无关——请根据 Angular/Vue 的组件语法调整单元格渲染器。

适用场景

  • 需要排序、筛选和分页的数据表格
  • 支持行内编辑的可编辑网格
  • 支持分组/聚合的复杂网格
  • 需要通过虚拟化实现高性能
  • 类似 Excel 的功能

不适用于：

  • 简单表格（使用 HTML/MUI Table）
  • 非表格类可视化（使用图表）
  • 移动端优先的场景（考虑更简单的方案）

关键模式

✅ 必须：使用 TypeScript 接口确保类型安全
// ✅ CORRECT: Typed column definitions
import { ColDef } from "ag-grid-community";

interface RowData {
  id: number;
  name: string;
}

const columnDefs: ColDef<RowData>[] = [{ field: "id" }, { field: "name" }];

// ❌ WRONG: Untyped columns
const columnDefs = [{ field: "id" }, { field: "name" }];
✅ 必须：使用 defaultColDef 设置通用选项
// ✅ CORRECT: DRY column configuration
const defaultColDef: ColDef = {
  sortable: true,
  filter: true,
  resizable: true,
};

<AgGridReact defaultColDef={defaultColDef} />

// ❌ WRONG: Repeating config for each column
const columnDefs = [
  { field: 'id', sortable: true, filter: true, resizable: true },
  { field: 'name', sortable: true, filter: true, resizable: true },
];
✅ 必须：启用无障碍功能
// ✅ CORRECT: Accessibility enabled
<AgGridReact
  enableAccessibility={true}
  suppressMenuHide={false}
/>

约定

AG Grid 专用
  • 为列定义 TypeScript 接口
  • 使用单元格渲染器呈现自定义内容
  • 遵循无障碍最佳实践：键盘导航、屏幕阅读器支持、ARIA 属性
  • 优先使用内置功能，而非自定义实现
  • 处理加载/错误状态

决策树

Custom cells?
  → Use cellRenderer/cellRendererFramework

Editable?
  → editable: true, handle onCellValueChanged

Filtering?
  → filter: true or specify type (agTextColumnFilter, agNumberColumnFilter)

Large dataset?
  → rowModelType: 'infinite' for server pagination

Grouping?
  → rowGroup: true on columns

Export?
  → exportDataAsCsv()/exportDataAsExcel()

Performance?
  → Virtualization (default), immutableData: true for React

示例

import { ColDef } from 'ag-grid-community';
import { AgGridReact } from 'ag-grid-react';

interface RowData {
  id: number;
  name: string;
  value: number;
}

const columnDefs: ColDef<RowData>[] = [
  { field: 'id', headerName: 'ID' },
  { field: 'name', headerName: 'Name', sortable: true },
  { field: 'value', headerName: 'Value', filter: 'agNumberColumnFilter' }
];

<AgGridReact<RowData>
  rowData={data}
  columnDefs={columnDefs}
  defaultColDef={{ flex: 1, minWidth: 100 }}
/>

边缘情况

  • 数据为空 → 提供适当提示
  • 获取数据时显示加载状态
  • 发生故障时使用错误边界
  • 正确处理调整大小事件
  • 测试键盘导航

资源

评论

支持 Markdown