Sive
AG Grid 数据表格
可视化

AG Grid 数据表格

当用户需要构建面向业务操作的高性能类 Excel 数据网格，或明确要求 AG Grid 时，使用此 Skill。该库擅长：客户端数据表、无限滚动大数据表、排序表、筛选表、分页表、固定列表、固定行表、行选择表、单元格选择表、跨行表、跨列表、可编辑表、自定义单元格表、虚拟滚动表、类 Excel 数据表。不要用于以多维透视、层级汇总和 BI 下钻为核心的 AntV S2 分析表，也不要用于图表可视化。

去使用
yvonneyx
yvonneyx
浏览534
使用61

Skill 文件

SKILL.md
name
ag-grid-table
title
AG Grid 数据表格
description
当用户需要构建面向业务操作的高性能类 Excel 数据网格，或明确要求 AG Grid 时，使用此 Skill。该库擅长：客户端数据表、无限滚动大数据表、排序表、筛选表、分页表、固定列表、固定行表、行选择表、单元格选择表、跨行表、跨列表、可编辑表、自定义单元格表、虚拟滚动表、类 Excel 数据表。不要用于以多维透视、层级汇总和 BI 下钻为核心的 AntV S2 分析表，也不要用于图表可视化。

AG Grid 数据表格

在单个 HTML 文件中使用 AG Grid Community (MIT 免费) 创建高性能数据表格。虚拟滚动支持十万行数据流畅渲染。

核心依赖 (CDN 内联)

html
<​link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/ag-grid-community@32/styles/ag-grid.css" /​><​link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/ag-grid-community@32/styles/ag-theme-alpine.css" /​><​script src="https://cdn.jsdmirror.com/npm/ag-grid-community@32/dist/ag-grid-community.min.js"​><​/script​>

加载后全局可用：agGrid 对象

HTML 模板

html
<!DOCTYPE html><​html lang="zh-CN"​><​head​>  <​meta charset="UTF-8" /​>  <​meta name="viewport" content="width=device-width, initial-scale=1.0" /​>  <​title​>AG Grid 表格<​/title​>  <​link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/ag-grid-community@32/styles/ag-grid.css" /​>  <​link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/ag-grid-community@32/styles/ag-theme-alpine.css" /​>  <​script src="https://cdn.jsdmirror.com/npm/ag-grid-community@32/dist/ag-grid-community.min.js"​><​/script​>  <​style​>    * { margin: 0; padding: 0; box-sizing: border-box; }    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; padding: 24px; background: #f5f5f5; }    #myGrid { height: 500px; width: 100%; }  <​/style​><​/head​><​body​>  <​div id="myGrid" class="ag-theme-alpine"​><​/div​>  <​script​>    const gridOptions = {      columnDefs: [        { field: 'name', headerName: '姓名', sortable: true, filter: true },        { field: 'age', headerName: '年龄', sortable: true, filter: 'agNumberColumnFilter' },        { field: 'email', headerName: '邮箱', flex: 1 },        { field: 'status', headerName: '状态', cellRenderer: (params) => {          const color = params.value === '活跃' ? '#2ECC71' : '#95A5A6';          return `<​span style="color:${color};font-weight:600"​>${params.value}<​/span​>`;        }},      ],      rowData: [        { name: '张三', age: 28, email: 'zhangsan@example.com', status: '活跃' },        { name: '李四', age: 34, email: 'lisi@example.com', status: '活跃' },        { name: '王五', age: 45, email: 'wangwu@example.com', status: '停用' },      ],      defaultColDef: {        resizable: true,      },      pagination: true,      paginationPageSize: 20,    };
    const gridDiv = document.querySelector('#myGrid');    agGrid.createGrid(gridDiv, gridOptions);  <​/script​><​/body​><​/html​>

核心 API

初始化

javascript
const gridOptions = {  columnDefs: [...],      // 列定义  rowData: [...],         // 行数据  defaultColDef: {...},   // 所有列的默认配置};const api = agGrid.createGrid(document.querySelector('#myGrid'), gridOptions);

列定义 (columnDefs)

javascript
columnDefs: [  {    field: 'name',              // 对应 rowData 中的字段名    headerName: '显示名称',      // 表头文本    width: 150,                 // 固定宽度 (px)    flex: 1,                    // 弹性宽度（按比例分配剩余空间）    sortable: true,             // 可排序    filter: true,               // 可筛选（文本筛选）    resizable: true,            // 可拖拽调宽    editable: true,             // 可编辑    pinned: 'left',             // 固定列：'left' | 'right'    hide: false,                // 是否隐藏    cellRenderer: (params) => { // 自定义单元格渲染      return `<​b​>${params.value}<​/b​>`;    },    valueFormatter: (params) => { // 值格式化（不改 DOM）      return `¥${params.value.toFixed(2)}`;    },  },]

常用筛选器类型

javascript
filter: true                        // 文本筛选（默认）filter: 'agNumberColumnFilter'      // 数字筛选filter: 'agDateColumnFilter'        // 日期筛选filter: 'agSetColumnFilter'         // 集合筛选（Enterprise）

默认列配置

javascript
defaultColDef: {  sortable: true,  filter: true,  resizable: true,  flex: 1,  minWidth: 100,}

常见场景示例

排序 + 筛选 + 分页

javascript
const gridOptions = {  columnDefs: [    { field: 'id', headerName: 'ID', width: 80, sortable: true },    { field: 'name', headerName: '名称', filter: true },    { field: 'price', headerName: '价格', filter: 'agNumberColumnFilter', valueFormatter: p => `¥${p.value}` },    { field: 'date', headerName: '日期', filter: 'agDateColumnFilter' },  ],  rowData: data,  pagination: true,  paginationPageSize: 25,  paginationPageSizeSelector: [10, 25, 50, 100],};

行选择

javascript
const gridOptions = {  columnDefs: [...],  rowData: data,  rowSelection: 'multiple',  // 'single' | 'multiple'  onSelectionChanged: (event) => {    const selectedRows = event.api.getSelectedRows();    console.log('选中:', selectedRows);  },};

单元格编辑

javascript
columnDefs: [  { field: 'name', editable: true },  { field: 'price', editable: true, cellEditor: 'agNumberCellEditor' },  { field: 'status', editable: true, cellEditor: 'agSelectCellEditor',    cellEditorParams: { values: ['活跃', '停用', '待审'] } },],onCellValueChanged: (event) => {  console.log('修改:', event.colDef.field, event.oldValue, '->', event.newValue);},

行分组（按字段聚合）

javascript
columnDefs: [  { field: 'department', rowGroup: true, hide: true },  { field: 'name' },  { field: 'salary', aggFunc: 'sum' },],groupDefaultExpanded: 1,

固定列（冻结）

javascript
columnDefs: [  { field: 'id', pinned: 'left', width: 80 },  { field: 'name', pinned: 'left' },  // ...其他列可水平滚动...  { field: 'actions', pinned: 'right', width: 100 },],

动态更新数据

javascript
// 全量替换api.setGridOption('rowData', newData);
// 事务更新（推荐大数据量）api.applyTransaction({  add: [{ name: '新增行', age: 20 }],  update: [{ id: 1, name: '更新行' }],  remove: [{ id: 3 }],});

导出 CSV

javascript
// 导出所有数据api.exportDataAsCsv({  fileName: 'export.csv',  columnSeparator: ',',});
// 导出选中行api.exportDataAsCsv({  onlySelected: true,});

自适应列宽

javascript
// 根据内容自适应api.autoSizeAllColumns();
// 根据容器自适应api.sizeColumnsToFit();

主题

AG Grid 内置多种主题，通过 CSS class 切换：

class风格
ag-theme-alpine现代浅色（默认推荐）
ag-theme-alpine-dark现代暗色
ag-theme-balham紧凑浅色
ag-theme-balham-dark紧凑暗色
ag-theme-materialMaterial Design

对应 CSS 文件：

html
<​link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/ag-grid-community@32/styles/ag-theme-alpine.css" /​><!-- 换成其他主题只需替换文件名 -->

自定义主题（CSS 变量覆盖）

AG Grid v32 支持通过 CSS 变量自定义主题外观，无需修改源码：

html
<​style​>  .ag-theme-alpine {    /* 颜色 */    --ag-foreground-color: #333;    --ag-background-color: #fff;    --ag-header-foreground-color: #fff;    --ag-header-background-color: #4A90E2;    --ag-odd-row-background-color: #f8f9fa;    --ag-row-hover-color: #e8f4fd;    --ag-selected-row-background-color: #d4edfa;    --ag-range-selection-background-color: rgba(74, 144, 226, 0.2);
    /* 边框 */    --ag-border-color: #e0e0e0;    --ag-row-border-color: #eee;    --ag-header-column-separator-color: rgba(255, 255, 255, 0.3);
    /* 尺寸 */    --ag-row-height: 42px;    --ag-header-height: 48px;    --ag-cell-horizontal-padding: 16px;    --ag-grid-size: 6px;
    /* 字体 */    --ag-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;    --ag-font-size: 14px;    --ag-header-font-size: 14px;    --ag-header-font-weight: 600;
    /* 圆角 */    --ag-border-radius: 8px;    --ag-card-radius: 8px;
    /* 其他 */    --ag-alpine-active-color: #4A90E2;    --ag-checkbox-checked-color: #4A90E2;    --ag-input-focus-border-color: #4A90E2;  }<​/style​>

常用 CSS 变量速查

变量说明示例值
--ag-background-color表格背景色#ffffff
--ag-foreground-color默认文字色#333333
--ag-header-background-color表头背景#4A90E2
--ag-header-foreground-color表头文字#ffffff
--ag-odd-row-background-color奇数行背景（斑马纹）#f8f9fa
--ag-row-hover-color行悬停背景#e8f4fd
--ag-selected-row-background-color选中行背景#d4edfa
--ag-border-color外边框颜色#e0e0e0
--ag-row-border-color行分割线颜色#eeeeee
--ag-row-height行高42px
--ag-header-height表头高度48px
--ag-font-size正文字号14px
--ag-alpine-active-color主色调（排序箭头、选中态等）#4A90E2
--ag-border-radius表格圆角8px

完全自定义暗色主题示例

html
<​style​>  .ag-theme-alpine-dark {    --ag-background-color: #1a1a2e;    --ag-foreground-color: #e0e0e0;    --ag-header-background-color: #16213e;    --ag-header-foreground-color: #eee;    --ag-odd-row-background-color: #1f1f38;    --ag-row-hover-color: #2a2a4a;    --ag-selected-row-background-color: #3a3a5a;    --ag-border-color: #2a2a4a;    --ag-row-border-color: #2a2a4a;    --ag-alpine-active-color: #64b5f6;    --ag-row-height: 40px;    --ag-header-height: 46px;  }<​/style​>

注意事项

  1. 必须同时加载两个 CSS：ag-grid.css（核心结构）+ 主题 CSS（ag-theme-*.css）。
  2. 容器必须有明确高度：#myGrid 需要 CSS 设置具体高度，否则表格不显示。
  3. field 对应数据字段名：columnDefs 中的 field 必须与 rowData 对象的 key 完全匹配。
  4. Community vs Enterprise：免费版支持排序/筛选/分页/编辑/固定列。行分组、集合筛选、Excel 导出等需要 Enterprise 许可。
  5. v32 API 变化：createGrid() 返回 api 对象（替代旧版 new Grid()）。直接在 api 上调用方法。
  6. 大数据量：AG Grid 内置虚拟滚动，10 万行无需额外配置即可流畅渲染。
  7. 暗色主题：使用 ag-theme-alpine-dark class + 对应 CSS 即可切换暗色模式。
Ln 1, Col 1MarkdownSpaces: 2
No errors