react使用ag-grid及常用api笔记
此篇为我使用ag-grid的笔记。
ag-grid介绍：
使用我们免费的开源库，在几分钟内为您的应用程序添加高性能、功能丰富、完全可定制的数据网格。
React、Angular 、Vue 、JavaScript 都支持。
ag-grid官网：ag-grid 官网 https://ag-grid.com/react-data-grid/reference/
ag-grid demo:ag-grid demo
我使用这个表格的感受是功能很强大，对于表格里大数据处理能力很强（上万、10万条数据都能处理）。
对数据进行过滤，排序、导出等等操作，具体可看官网的demo。
可以对列进行拖拽，列宽也可以拉伸，行也可以拉伸，可以选中行。
过滤功能很强大。
ag-grid官方自带的主题：
| 主题名称 🎨 | 风格特点 | 适用场景 |
|---|---|---|
| ag-theme-quartz | AG Grid 新版默认主题，现代感强 | 新项目推荐，搭配最新功能 |
| ag-theme-quartz-dark | Quartz 的深色版本 | 新项目的深色模式需求 |
| ag-theme-alpine | 现代标准、干净清晰，也是 Vue 3 组件的默认主题之一（社区版常用） | 需要现代、专业外观的大多数应用 |
| ag-theme-alpine-dark | Alpine 的深色版本 | 深色模式爱好者或低光环境下的应用 |
| ag-theme-balham | 温和雅致、视觉对比度较低 | 偏好柔和、简约风格界面 |
| ag-theme-balham-dark | Balham 的深色版本 | 深色模式且偏好 Balham 风格 |
| ag-theme-material | 模仿 Google Material Design 规范 | 项目整体采用 Material Design 风格 |
优势与使用场景：
| 维度 | AG Grid 的核心优势 | 典型应用场景 |
|---|---|---|
| 性能与架构 | 专为海量数据设计，通过虚拟滚动等技术实现百万级数据秒级渲染，操作流畅。采用与框架无关的设计，核心代码无依赖，并为 React、Angular、Vue 等提供原生支持。 | 金融与数据分析平台：实时股票行情、高频数据更新。 物联网监控：高频数据流渲染与历史记录回溯。 |
| 功能与特性 | 功能全面，开箱即用：社区版即包含排序、过滤、分组、单元格编辑等；企业版更提供集成图表、数据透视、主从表等高级功能。 | 后台管理系统：ERP主数据管理、用户权限矩阵、动态权限控制。 报表工具：交互式数据透视与钻取，一键导出 Excel/PDF。 |
| 定制与体验 | 提供 Excel 级别的交互体验，支持从 Excel 粘贴数据、自定义公式计算等。深度可定制，允许通过 JavaScript 或框架组件自定义单元格渲染器、过滤器、编辑器和复杂业务逻辑。 | 人力资源系统：展示嵌套的组织层次结构（树形数据），单元格内集成自定义组件（如图像、按钮）。 库存管理：使用主/详细网格显示库存水平，并集成外部过滤器与搜索。 |
| 生态与许可 | 提供社区版（MIT协议） 和企业版。社区版免费开源且功能丰富，企业版提供高级功能、专门技术支持并可去除试用水印。文档与生态完善，社区活跃。 | 适用于从轻量级应用到复杂企业级系统的各类项目，可根据预算和功能需求灵活选择版本。 |
react里使用：
使用前小技巧：
ag-grid的api和参数实在太多了，查询api时可以去官网搜索。还可以先问ai工具比如：deepseek。它给出的还挺准确的，ai和文档结合起来，可以大大的提高开发效率！
ag-grid官网是英文的，开发时需要借助翻译工具，可以使用edge浏览器自带的翻译，但原文就看不到了，可以借助沉浸式翻译的插件，可以翻译和显示原文。
沉浸式翻译插件
可以参考下面的文章安装（这篇文章写很久了，如果不行自行百度即可）：
immersive-translate(沉浸式双语网页翻译扩展)，解决谷歌翻译无法使用问题
使用须知：
了解AG Grid的优势和场景后，还有一些关键点能帮助你更好地做出决策：
版本选择：AG Grid提供社区版（Community） 和企业版（Enterprise）。社区版功能已非常强大，足以满足许多常规需求。如果你的项目需要集成图表、数据透视、服务端行模型等高级功能，或需要官方技术支持并在生产环境中去除试用水印，则需考虑企业版。企业版需要购买许可证。
框架集成：尽管AG Grid与框架无关，但它为主流框架（如React、Angular、Vue）提供了原生的、量身定制的集成包。例如，其React包完全用React编写，能很好地利用React的特性，这确保了在不同技术栈下的一致且高效的开发体验。
“一个网格”哲学：AG Grid的一个显著特点是 “一个网格，所有功能” 。这意味着你无需为树形结构、数据透视表或不同的框架去寻找和学习不同的网格。同一套API和概念可以跨越所有框架和应用场景，显著降低了学习成本和维护负担。
使用步骤：
这是我使用的版本：
"ag-grid-community": "^31.0.1","ag-grid-react": "^31.0.1","ag-grid-enterprise": "^31.0.1",
1.下载依赖使用：
npm install ag-grid-community ag-grid-react ag-grid-enterprise
2.引入包：
import 'ag-grid-enterprise';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
3.使用：
ag-grid使用时需要在外面加一个容器，容器上需要有一个主题的类名我用的是ag-theme-alpine，以及需要加上宽高。
rowData 数据
columnDefs列配置 是必须有的
<div className={`ag-theme-alpine`} style={{ width: '100%', height: '600px' }}><AgGridReactref={gridApiRef}onGridReady={onGridReady}rowData={tracreData}columnDefs={columnDefs}onFilterChanged={filterChange} //过滤条件发生变化时触发></AgGridReact></div>
最简单的完整代码：
import React, { Component, useEffect, useState, useRef, useMemo } from 'react';
import { AgGridReact } from 'ag-grid-react';
import { Pagination, Spin } from 'antd';
import 'ag-grid-enterprise';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import agStyles from '@/utils/agCellStyle.less';const data = [{"jjmc": "华夏成长混合型证券投资基金","status": "上报","cljsr": "2023-05-12","jjzxgm": 12000000},{"jjmc": "易方达蓝筹精选混合型证券投资基金","status": "在审","cljsr": "2023-08-03","jjzxgm": 35000000},{"jjmc": "嘉实新兴产业股票型证券投资基金","status": "成立","cljsr": "2023-11-15","jjzxgm": 80000000},]const MarketTrace = (props) => {const [tracreData, setTracreData] = useState(data);const [gridApi, setGridApi] = useState(null);const [pageSize, setPageSize] = useState(100); // 每页显示条数const [currentPage, setCurrentPage] = useState(1); // 当前页码//表格的数据 条数const [dataToatal, setDataTotal] = useState(0); //表格显示的条数const [loading, setLoading] = useState(false); // 加载状态const gridApiRef = useRef();// 数字格式化函数，添加千分位逗号const formatNumber = (num) => {return num.toString().replace(/\d+/, function (n) {return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')})}const columnDefs = useMemo(() => [{headerName: '基金名称', field: 'jjmc', tooltipField: 'jjmc', sortable: true, unSortIcon: true, filter: 'agTextColumnFilter',minWidth: 300, maxWidth: 350, headerClass: `${agStyles['filterHideIcon']}`},{headerName: '产品状态', field: 'status', sortable: true, unSortIcon: true, filter: 'agSetColumnFilter',minWidth: 140, cellClass: agStyles['textCenter'], headerClass: `${agStyles['textCenter']} ${agStyles['filterHideIcon']}`},{headerName: '材料接收日', field: 'cljsr', sortable: true, unSortIcon: true, filter: 'agDateColumnFilter',minWidth: 150,},{headerName: '基金最新规模(元)', field: 'jjzxgm', tooltipField: 'jjzxgm', sortable: true, unSortIcon: true, filter: false,valueFormatter: (params) => { return params.value ? formatNumber(params.value.toFixed(2)) : "-" },flex:1 //自适应宽度},// ... 其他列定义], []); // 空依赖数组表示只在组件挂载时创建一次// 当 Grid 准备就绪时，保存 API 实例并初始化状态const onGridReady = (params) => {setGridApi(params.api);};const filterChange = () => { //响应事件 - 当筛选条件改变时获取条数if (gridApi) {setDataTotal(gridApi?.getDisplayedRowCount())}}return (<div style={{ width: '100%' ,height:'650px',marginTop:'20px'}}><div className={`ag-theme-alpine`} style={{ width: '100%', height: '600px' }}><AgGridReactref={gridApiRef}onGridReady={onGridReady}rowData={tracreData}columnDefs={columnDefs}onFilterChanged={filterChange} //过滤条件发生变化时触发></AgGridReact></div></div>)
};
export default MarketTrace;
常用api笔记：
columnDefs配置：
ag-grid column properties ag-grid表头属性官方文档
columnDefs建议使用useMemo写可以避免，一些问题。
const columnDefs1 = useMemo(() => [{},{}], []); // 空依赖数组表示只在组件挂载时创建一次
{headerName: '基金名称', // 列头显示的名称field: 'jjmc', // 对应数据源中的字段名pinned:'left', //居左固定 right居右固定tooltipField: 'jjmc', // 鼠标悬停时显示的提示信息字段sortable: true, // 启用列排序功能unSortIcon: true, // 显示排序状态图标（升序/降序/未排序）filter: 'agTextColumnFilter', // 使用文本过滤器minWidth: 300, // 列的最小宽度（像素）maxWidth: 350, // 列的最大宽度（像素）flex:1,//占满剩余空间 一般前几列固定宽度时，有一列设置为这个就不用担心宽度占不满了headerClass: `${agStyles['filterHideIcon']}`, // 为列头添加自定义CSS类，用于隐藏过滤图标等样式控制valueGetter: ()=>, //对数据进行处理 会创建新数据valueFormatter: ()=>, //对值进行格式化，单元格里展示 不改变数据comparator: ()=>, //自定义排序逻辑cellRenderer:()=> //单元格渲染 可以自定义渲染内容
}
| 函数 | 作用时机 | 用途 | 是否影响数据 |
|---|---|---|---|
| valueGetter | 数据加载时 | 从原始数据提取/计算值 | ✅ 会创建新数据 |
| valueFormatter | 单元格渲染时 | 仅格式化显示 | ❌ 不影响实际数据 |
| comparator | 排序操作时 | 定义自定义排序逻辑 | ❌ 仅影响排序 |
使用建议：
valueGetter：当需要组合多个字段或进行复杂计算时使用
valueFormatter：当只需要改变显示格式时使用（性能更好）
comparator：当默认排序不满足业务需求时使用
这三个函数可以单独使用，也可以组合使用，为 ag-Grid 提供了极大的灵活性。
filter配置：
| 过滤器类型 | 配置值 | 使用场景 | 特点说明 |
|---|---|---|---|
| 文本过滤器 | 'agTextColumnFilter' | 字符串内容的搜索和过滤 | 支持包含、等于、开头是、结尾是等文本匹配条件 |
| 数字过滤器 | 'agNumberColumnFilter' | 数值型数据的范围筛选 | 支持等于、不等于、大于、小于、介于等数值比较 |
| 日期过滤器 | 'agDateColumnFilter' | 日期时间类型的数据筛选 | 提供日期选择器，支持等于、之前、之后、介于等时间条件 |
| 集合过滤器 | 'agSetColumnFilter' | 从预定义值集合中选择 | 显示所有唯一值复选框，适合分类、状态等离散值过滤 |
| 多列过滤器 | 'agMultiColumnFilter' | 企业版功能，复杂多条件组合 | 允许在同一过滤器内设置多个条件，支持AND/OR逻辑 |
| 自定义过滤器 | 自定义组件或函数 | 特殊业务逻辑的过滤需求 | 完全自定义过滤界面和逻辑，满足特定业务场景 |
| 快速启用 | true | 快速启用默认文本过滤器 | 等价于 'agTextColumnFilter'，简化配置 |
| 禁用过滤 | false | 特定列不需要过滤功能 | 即使全局启用过滤，该列也不会显示过滤界面 |
// 文本过滤器配置
filter: 'agTextColumnFilter',
filterParams: {filterOptions: ['contains', 'equals', 'startsWith'],debounceMs: 300, // 输入防抖caseSensitive: false,textFormatter: (value) => value?.trim().toLowerCase()
}// 数字过滤器配置
filter: 'agNumberColumnFilter',
filterParams: {allowedCharPattern: '\\d\\-\\.', // 只允许数字和负号小数点minValue: 0,maxValue: 1000
}// 集合过滤器配置
filter: 'agSetColumnFilter',
filterParams: {values: ['进行中', '已完成', '已取消'], // 预定义选项applyMiniFilterWhileTyping: true
}// 日期过滤器配置
filter: 'agDateColumnFilter',
filterParams: {comparator: (filterDate, cellValue) => {// 自定义日期比较逻辑}
}
filter 配置文档
如果遇到列搜索时自动失去焦点可以看下面的文章：
ag-grid 列搜索时自动失去焦点
表格搜索面板和其他地方默认是英文，需要本地化：
在使用时建议写一个配置，把所有表格的默认配置写成一个公共的配置：
localeText就是本地化配置，还可以设置其他配置比如行高、隔行变色等等。
建议写一个 ag-grid.js单独写，然后所有用到的地方引入即可！！
//ag-grid-react的默认设置
export const gridOptions = {headerPosition: 'both',localeText: {// 国际化// for filter panelpage: "当前页",more: "更多",to: "至",of: "总数",next: "下一页",last: "上一页",first: "首页",previous: "上一页",loadingOoo: "加载中...",// for set filterselectAll: "全选",searchOoo: "请输入关键字...",blanks: "空白",// for number filter and text filterfilterOoo: "过滤...",clearFilter: '重置',applyFilter: "确定",// for number filterequals: "相等",notEqual: "不相等",lessThan: "小于",greaterThan: "大于",lessThanOrEqual: "小于等于",greaterThanOrEqual: "大于等于",inRange: "范围",contains: "包含",notContains: "不包含",startsWith: "开始于",endsWith: "结束于",// the header of the default group columngroup: "组",// tool panelcolumns: "列选项",filters: '筛选',rowGroupColumns: "laPivot Cols",rowGroupColumnsEmptyMessage: "拖拽组到这里",valueColumns: "laValue Cols",pivotMode: "枢轴模式",// groups: "列组",// values: "值",// pivots: "laPivots",valueColumnsEmptyMessage: "拖到这里进行聚合",pivotColumnsEmptyMessage: "la drag here to pivot",// othernoRowsToShow: "无数据",// enterprise menupinColumn: "固定列",valueAggregation: "laValue Agg",autosizeThiscolumn: "自动调整当前网格宽度",autosizeAllColumns: "自动调整当前页所有网格宽度",groupBy: "排序",ungroupBy: "不排序",resetColumns: "恢复网格样式",expandAll: "展开全部",collapseAll: "关闭",toolPanel: "显示/隐藏控制表盘",export: "导出到...",csvExport: "导出CSV",excelExport: "导出Excel",// enterprise menu pinningpinLeft: "<<锁定至表格左侧",pinRight: ">>锁定至表格右侧",noPin: "<>取消锁定",// enterprise menu aggregation and status panelsum: "总数",min: "最小值",max: "最大值",none: "无",count: "总",average: "平均",// standard menucopy: "复制",copyWithHeaders: "复制内容及标题",ctrlC: "ctrl + C",paste: "粘贴",ctrlV: "ctrl + V",noMatches: '无匹配',},getRowNodeId:(data)=>{return data.id}, //唯一值keyrowHeight: 36, //行高headerHeight: 36, //表头高defaultColDef: { //默认列定义// 列最小宽度minWidth: 200,// 当表格右侧有多余地方时，可让表格单元格平均占掉flex: 1,// make every column use 'text' filter by defaultfilter: true,// 可手动调整列宽resizable: true,// 表头文字过多时展开wrapHeaderText: true,autoHeaderHeight: true,// 列表头操作菜单栏仅剩筛选功能menuTabs: ['filterMenuTab'],sortable: false,},getRowStyle: (params) => { //设置行样式 隔行变色if (parseInt(params.node.rowIndex) % 2 == 0) {return {'backgroundColor': '#fff', //颜色可以用英文、rgb以及十六进制}} else {return {'backgroundColor': '#F5F5FA',}}},onFirstDataRendered: (params) => { // 使列宽随内容自适应设置 params.api.sizeColumnsToFit();},suppressDragLeaveHidesColumns: true, // 列只可在表格中来回移动，不可移动到表格之外suppressMenuHide: true, // 控制列菜单的隐藏行为suppressContextMenu: true, //控制是否禁用网格的右键菜单功能suppressRowClickSelection: true, //点击表格行是否选中 suppressAggFuncInHeader: true, //控制表头是否显示聚合函数菜单
}
加上这个就变成了：
在使用时就引入gridOptions 配置即可（把上面的配置放到一个单独的js然后导出即可）：
import { gridOptions } from '@/utils/utils';
<AgGridReactref={gridApiRef}onGridReady={onGridReady}rowData={tracreData}columnDefs={columnDefs}onFilterChanged={filterChange} //过滤条件发生变化时触发gridOptions={gridOptions}></AgGridReact>
如果需果每个表格有自己的配置就可以，使用es6语法…展开运算符来做：
const opt = {...gridOptions,// 隐藏默认分页pagination: true,// 设置每页显示的数据条数paginationPageSize: 100,suppressPaginationPanel: true, // 隐藏分页面板suppressScrollOnNewData: true,// 新数据加载时不滚动到顶部// filterParams: { newRowsAction: 'keep' }, // 当有新行加载时，保持当前的过滤条件不变};
然后gridOptions={opt}
隔行变色：
getRowStyle: (params) => { //设置行样式 隔行变色if (parseInt(params.node.rowIndex) % 2 == 0) {return {'backgroundColor': '#fff', //颜色可以用英文、rgb以及十六进制}} else {return {'backgroundColor': '#F5F5FA',}}},
获取当前表格展示的数据条数gridApi?.getDisplayedRowCount()：
ag-grid自带的分页器，一直展示的数据条数是，所有数据的条数。有的时候需要展示过滤后的条数。可以用gridApi?.getDisplayedRowCount()来获取：
gridApi?.getDisplayedRowCount()
分页器使用：
ag-grid自带的分页器pagination、suppressPaginationPanel为true就可以使用。
paginationPageSizeSelector可以设置每页条数下拉框的条数。
const opt = {...gridOptions,// 隐藏默认分页pagination: true,// 设置每页显示的数据条数paginationPageSize: 2,suppressPaginationPanel: false, // 隐藏分页面板paginationPageSizeSelector: [10, 20, 50, 100], // 设置每页显示条数的选项suppressScrollOnNewData: true,// 新数据加载时不滚动到顶部// filterParams: { newRowsAction: 'keep' }, // 当有新行加载时，保持当前的过滤条件不变};
自定义分页器：
有的时候业务会觉得自带的分页器不好看，需要自定义，而且如果页数很多，没有输入页码，调到该页也很麻烦。可以自定义分页器，下面就是我用antd和ag-grid结合实现的分页器。当然你也可以完全自己写分页器。使用ag-grid内部api就可以实现分页。
主要是使用ag-grid自带的api:
paginationGoToPage 跳转到某页和 paginationSetPageSize每页条数。
| 分类 | API 方法 | 功能描述 | 常见使用场景 |
|---|---|---|---|
| 基础分页控制 | paginationGoToPage(pageNumber) | 跳转到指定页码（从0开始）。 | 用户输入页码跳转；恢复上次浏览页面。 |
paginationGoToNextPage() | 跳转到下一页。 | "下一页"按钮。 | |
paginationGoToPreviousPage() | 跳转到上一页。 | "上一页"按钮。 | |
paginationGoToFirstPage() | 跳转到第一页。 | "首页"按钮。 | |
paginationGoToLastPage() | 跳转到最后一页。 | "末页"按钮。 | |
| 分页状态获取 | paginationGetCurrentPage() | 获取当前页码（从0开始）。 | 保存当前页面状态；显示当前页码。 |
paginationGetTotalPages() | 获取总页数。 | 显示总页数信息。 | |
paginationGetPageSize() | 获取当前每页显示条数。 | 显示或同步页面大小状态。 | |
paginationGetRowCount() | 获取总数据条数。 | 显示数据总量。 | |
| 页面大小控制 | paginationSetPageSize(size) | 动态设置每页显示的数据条数。 | 用户通过下拉框自定义每页显示数量。 |
其他更多api可以查看：ag-grid pagination api
自定义分页器时suppressPaginationPanel要设为true。
pagination也要为true。
import React, { Component, useEffect, useState, useRef, useMemo } from 'react';
import { AgGridReact } from 'ag-grid-react';
import { Pagination, Spin } from 'antd';
import 'ag-grid-enterprise';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import agStyles from '@/utils/agCellStyle.less';
import { gridOptions } from '@/utils/utils';
const data = [{"jjmc": "华夏成长混合型证券投资基金","status": "上报","cljsr": "2023-05-12","jjzxgm": 12000000},{"jjmc": "易方达蓝筹精选混合型证券投资基金","status": "在审","cljsr": "2023-08-03","jjzxgm": 35000000},{"jjmc": "嘉实新兴产业股票型证券投资基金","status": "成立","cljsr": "2023-11-15","jjzxgm": 80000000},]const MarketTrace = (props) => {const [tracreData, setTracreData] = useState(data);const [gridApi, setGridApi] = useState(null);const [pageSize, setPageSize] = useState(1); // 每页显示条数const [currentPage, setCurrentPage] = useState(1); // 当前页码//表格的数据 条数const [dataToatal, setDataTotal] = useState(0); //表格显示的条数const [loading, setLoading] = useState(false); // 加载状态const gridApiRef = useRef();// 数字格式化函数，添加千分位逗号const formatNumber = (num) => {return num.toString().replace(/\d+/, function (n) {return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')})}const columnDefs = useMemo(() => [{headerName: '基金名称',field: 'jjmc',tooltipField: 'jjmc',sortable: true,unSortIcon: true,filter: 'agTextColumnFilter',minWidth: 300,maxWidth: 350,headerClass: `${agStyles['filterHideIcon']}`},{headerName: '产品状态', field: 'status', sortable: true, unSortIcon: true, filter: 'agSetColumnFilter',minWidth: 140, cellClass: agStyles['textCenter'], headerClass: `${agStyles['textCenter']} ${agStyles['filterHideIcon']}`},{headerName: '材料接收日', field: 'cljsr', sortable: true, unSortIcon: true, filter: 'agDateColumnFilter',minWidth: 150,},{headerName: '基金最新规模(元)', field: 'jjzxgm', tooltipField: 'jjzxgm', sortable: true, unSortIcon: true, filter: false,valueFormatter: (params) => { return params.value ? formatNumber(params.value.toFixed(2)) : "-" }, flex: 1 //自适应宽度},// ... 其他列定义], []); // 空依赖数组表示只在组件挂载时创建一次// 当 Grid 准备就绪时，保存 API 实例并初始化状态const onGridReady = (params) => {setGridApi(params.api);};const filterChange = () => { //响应事件 - 当筛选条件改变时获取条数if (gridApi) {setDataTotal(gridApi?.getDisplayedRowCount())}}const opt = {...gridOptions,// 隐藏默认分页pagination: true,// 设置每页显示的数据条数paginationPageSize: 1,suppressPaginationPanel:true, // 隐藏分页面板//paginationPageSizeSelector: [10, 20, 50, 100], // 设置每页显示条数的选项suppressScrollOnNewData: true,// 新数据加载时不滚动到顶部// filterParams: { newRowsAction: 'keep' }, // 当有新行加载时，保持当前的过滤条件不变};//分页变化const paginationChange = (page) => {setCurrentPage(page); // 更新当前页码gridApi.paginationGoToPage(page);}//分页器 每页条数变化const sizeChange = (current, size) => {setPageSize(size); // 更新每页显示条数gridApi.paginationSetPageSize(size);};const showTotal = (total) => `共 ${total} 条数据`;return (<div style={{ width: '100%', height: '650px', marginTop: '20px' }}><div className={`ag-theme-alpine`} style={{ width: '100%', height: '150px' }}><AgGridReactref={gridApiRef}onGridReady={onGridReady}rowData={tracreData}columnDefs={columnDefs}onFilterChanged={filterChange} //过滤条件发生变化时触发gridOptions={opt}></AgGridReact></div><div><Pagination size="small" total={50} showTotal={showTotal} showSizeChanger showQuickJumper pageSizeOptions={[1, 20, 50, 100]} onChange={paginationChange} onShowSizeChange={sizeChange} pageSize={pageSize} current={currentPage} /></div></div>)
};
export default MarketTrace;效果如下：
文字过长显示…并且鼠标移入显示完整文字：
如果想要实现文字过长显示…并且显示tooltip。本身加上 tooltipField: 'jjmc’属性就能实现tooltip显示，但自带的反应很慢（第一次好几秒才显示），业务让优化一下，后来自己用antd的Tooltip实现了：
import { Tooltip } from 'antd';
{headerName: '产品名称', field: 'jjmc', sortable: true, unSortIcon: true, filter: 'agTextColumnFilter', filterParams: athleteFilterParams,minWidth: 300, maxWidth: 350, headerClass: `${agStyles['filterHideIcon']}`,cellRenderer: (params) => {return (<div style={{ width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}><Tooltip title={params.value || '--'}>{params.value || '--'}</Tooltip></div>);}},
暂无数据，或者搜索时，没有符合条件的数据时自定义展示内容：
默认是什么也没有：
给gridOptions加上这个即可：
overlayNoRowsTemplate: '<span>未找到与关键字匹配的产品，请尝试调整关键词查询。</span>',// 建议在数据更新后检查是否为空onModelUpdated: (event) => {// 当显示的行数为0时，自动显示无数据覆盖层if (event.api.getDisplayedRowCount() === 0) {event.api.showNoRowsOverlay();} else {event.api.hideOverlay();}},
加上后效果如下：
自定义loading:
overlayLoadingTemplate可以自定义loading模版：
const gridOptions = {// 其他配置...// 定义自定义加载模板overlayLoadingTemplate: '<div style="padding: 20px; text-align: center;"><div class="你的加载动画CSS"></div><br/><span>正在玩命加载中，请稍候...</span></div>',
};
gridApi.showLoadingOverlay() / gridApi.hideOverlay() 可以精准控制什么时候展示和隐藏。
还可以用antd得Spin实现，这个就可以完全自己控制了：
设置默认搜索条件：
默认的搜索条件可以用filterParams的defaultValue设置：
filterParams: { defaultValue: '张三' }
也可以用api的方式设置gridApi.setFilterModel(filter)：
let filter = {status: {type: 'set',values: values.status == "全部" ? filterAllopt : [values.status],},jjmc: {filterType: 'text',type: 'contains',filter: values.jjmc,}}if (gridApiRef.current) {setTimeout(() => {gridApi.setFilterModel(filter);}, 0)}
导出Excel的使用（此功能需要使用企业版即付费才可以）：
ag-grid导出 api
/** 导出 */const exportTable = () => {const params = {//文件名fileName: `名称关键字搜索${moment().format('YYYY-MM-DD HH时mm分')}`,//表名sheetName: "名称关键字搜索",//表头高度headerRowHeight: 28,//导出 列 默认导出全部 ，但 操作列不想导出 所以 加此属性columnKeys: ['jjmx',],//导出时单元格内容处理processCellCallback(params) {//产品最新规模 导出格式化if (params?.column?.colDef?.field == 'jjzxgm') {return params.value ? formatNumber(params.value.toFixed(2)) : "";}//对日期列进行格式化if (params?.column?.colDef?.field == 'cljsr' ||params?.column?.colDef?.field == 'clslr' ||params?.column?.colDef?.field == 'hpr' ||params?.column?.colDef?.field == 'clr') {return dateFormatter(params);}//操作列不导出// if (params?.column?.colDef?.field == "actions") {// return null;// }return params?.value;}};gridApi.exportDataAsExcel(params);};
其它api可参考excel export params
还可以导出csv格式，使用exportDataAsCsv即可。