重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
ag-grid by joabgonzalez/ai-agents-framework
npx skills add https://github.com/joabgonzalez/ai-agents-framework --skill ag-grid具备排序、过滤、分页、内联编辑和类 Excel 功能的 React 数据表格。提供 TypeScript 类型支持、可访问性和虚拟化。
示例使用
ag-grid-react。列配置 API(ColDef、onGridReady)与框架无关 —— 为 Angular/Vue 等框架的组件语法适配单元格渲染器。
不适用于:
// ✅ 正确:类型化的列定义
import { ColDef } from "ag-grid-community";
interface RowData {
id: number;
name: string;
}
const columnDefs: ColDef<RowData>[] = [{ field: "id" }, { field: "name" }];
// ❌ 错误:未类型化的列
const columnDefs = [{ field: "id" }, { field: "name" }];
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
// ✅ 正确:避免重复的列配置
const defaultColDef: ColDef = {
sortable: true,
filter: true,
resizable: true,
};
<AgGridReact defaultColDef={defaultColDef} />
// ❌ 错误:为每列重复配置
const columnDefs = [
{ field: 'id', sortable: true, filter: true, resizable: true },
{ field: 'name', sortable: true, filter: true, resizable: true },
];
// ✅ 正确:启用可访问性
<AgGridReact
enableAccessibility={true}
suppressMenuHide={false}
/>
需要自定义单元格?
→ 使用 cellRenderer/cellRendererFramework
需要可编辑?
→ 设置 editable: true,并处理 onCellValueChanged 事件
需要过滤?
→ 设置 filter: true 或指定类型 (agTextColumnFilter, agNumberColumnFilter)
数据集很大?
→ 设置 rowModelType: 'infinite' 用于服务器端分页
需要分组?
→ 在列上设置 rowGroup: true
需要导出?
→ 使用 exportDataAsCsv()/exportDataAsExcel()
关注性能?
→ 使用虚拟化(默认启用),React 中可设置 immutableData: true
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 }}
/>
每周安装量
48
代码仓库
GitHub 星标数
3
首次出现
2026年2月4日
安全审计
安装于
opencode47
github-copilot46
codex45
gemini-cli44
amp44
kimi-cli44
React data tables with sorting, filtering, pagination, inline editing, and Excel-like features. TypeScript typing, accessibility, and virtualization.
Examples use
ag-grid-react. Column config API (ColDef,onGridReady) is framework-agnostic — adapt cell renderers to your framework's component syntax for Angular/Vue.
Don't use for:
// ✅ 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" }];
// ✅ 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}
/>
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 }}
/>
Weekly Installs
48
Repository
GitHub Stars
3
First Seen
Feb 4, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode47
github-copilot46
codex45
gemini-cli44
amp44
kimi-cli44
前端设计系统技能:生产级UI设计、设计令牌与可访问性指南
8,500 周安装
火山引擎数据查询工具使用指南:企业数据源查询、字段过滤与枚举值探查
333 周安装
teach-oh:AI项目上下文设置工具,自动生成AGENTS.md文档,提升团队协作效率
59 周安装
Web性能优化:图片、视频、SVG媒体元素审计与性能分析工具
75 周安装
核心网页指标 (Core Web Vitals) 性能审计与调试工具 - 网页性能优化必备
83 周安装
Sentry Cloudflare SDK 安装配置指南:为 Workers、Pages、Durable Objects 等集成错误监控
225 周安装
Zellij CLI 命令参考手册:会话、标签页和窗格管理完整指南
54 周安装