给ag-grid表头添加tooltip的两种方式

最新推荐文章于 2023-10-08 15:01:33 发布

莱克博尔德

最新推荐文章于 2023-10-08 15:01:33 发布

阅读量2.3k

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45595683/article/details/125909729

版权

本文介绍了在react.js项目中，使用ag-grid组件为表格表头添加tooltip的两种方法：一是统一为所有列显示列头tooltip，二是自定义tooltip内容。通过开启tooltip功能并在column配置中指定headerTooltip或tooltipField来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方式一：（统一为表格所有列展示列头的tooltip）

<CustomCellEditAgGrid
            colDefParams={this.columns}
            defaultColDef={
              {
                suppressMenu: true,
                lockVisible: true,
                resizable: true,
                sortable: true,
              }
            }
            tooltipShowDelay={0}          //ag-grid展示tooltip的延迟时间
            autoGroupColumnDef={
  {         //获取列名，调用ag-grid显示tooltip的回调函数
              tooltipValueGetter: (params) => {
                let name = params.value
                return name;
              }
            }}
            suppressContextMenu={true}
            onGridReady={this.onGridReady}
            rowData={this.props.beams}
            onFirstDataRendered={this.sizeToFit}
          />