logo

S2

  • 使用文档
  • API 文档
  • 图表示例
  • 在线体验
  • 更新日志
  • 所有产品antv logo arrow
  • 2.x
  • 简介
  • 快速上手
  • 基础教程
    • 基本概念
      Updated
    • 表形态
      • 透视表
        Updated
      • 明细表
        Updated
    • 字段标记
      Updated
    • 小计总计
    • 排序
      • 基础排序
        Updated
      • 组内排序
        Updated
    • 主题配置
      Updated
    • Tooltip
      Updated
    • 数据格式化
      New
    • 多行文本
      New
    • 国际化
    • 分页
      New
  • 进阶教程
    • 单元格渲染类型
      • 链接
      • 图片
        New
      • 视频
        New
      • 迷你图表
      • 结合@antv/g2
      • 自定义渲染
    • 自定义
      • 自定义 Hook
        Updated
      • 自定义行列头分组
        New
      • 自定义 Icon
        Updated
      • 自定义单元格对齐方式
        Updated
      • 自定义单元格宽高
        Updated
      • 自定义排序操作
        Updated
      • 自定义折叠/展开节点
        New
    • 交互
      • 基础交互
        Updated
      • 自定义交互
      • 隐藏列头
        Updated
      • 行列宽高调整
        Updated
      • 合并单元格
      • 滚动
        Updated
      • 复制与导出
        New
      • 高亮/选中单元格
        New
    • 分析组件
      • 简介
        New
      • 高级排序
        Updated
      • 维度切换
        Updated
      • 导出
        Updated
      • 分页
        Updated
      • 维度下钻
        Updated
    • 表格组件
      • 编辑表
      • 趋势分析表
        Updated
    • 高清适配
      Updated
    • 获取表格实例
    • 表格自适应
    • 获取单元格数据
      Updated
    • 注册 AntV/G 插件
      New
    • 透视组合图
      Experimental
    • Vue 3.0 组件 (停止维护)
  • 扩展阅读
    • 数据流处理
      • 透视表
      • 明细表
    • 布局流程
      • 透视表
      • 明细表
    • 性能介绍
      Updated
  • 贡献指南
  • 常见问题
  • S2 2.0 升级指南

自定义 Icon

上一篇
自定义行列头分组
下一篇
自定义单元格对齐方式

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

默认情况下,表格只会展示排序 icon, 但在很多情况下,会需要展示其他的操作 icon,例如:筛选、下钻、 提示信息 等,S2 提供了 headerActionIcons 参数让你可以通过简单的配置项快速实现行头、列头、角头的操作 icon 自定义。

关闭默认排序 icon

表格的数值默认会渲染排序 icon, 可以配置 showDefaultHeaderActionIcon 关闭。

const s2Options = {
showDefaultHeaderActionIcon: false
}

自定义行列头 icon

1. 使用内置 icon

  • icons: 内置 icon 或者自定义注册的 icon 名称。
  • belongsCell: 当前一组 icon 展示在哪个单元格内。
const s2Options = {
headerActionIcons: [
{
icons: ['SortDown'],
belongsCell: 'colCell',
},
],
}

S2 目前内置 icon 列表:

注意

图标颜色默认和文本颜色一致,遵循 主题配置

icon 名称icon 图标功能描述icon 名称icon 图标功能描述
CellDownicon同环比下降ExpandColIconicon展开列头
CellUpicon同环比上升Plusicon树状表格展开
GlobalAscicon全局升序Minusicon树状表格收起
GlobalDescicon全局降序SortDownicon降序
GroupAscicon组内升序SortDownSelectedicon降序选中状态
GroupDescicon组内降序SortUpicon升序
Trendicon趋势图SortUpSelectedicon升序选中状态
ArrowUpicon指标上升ArrowDownicon指标下降
DrillDownIconicon下钻

​

2. 自定义展示位置

自定义操作 icon 默认会展示在行列头文字的右侧,如果需要展示在左侧,可以使用对象的形式,支持更丰富的配置:

const s2Options = {
headerActionIcons: [
{
- icons: ['SortDown'],
+ icons: [{ name: 'SortDown', position: 'left' }],
belongsCell: 'colCell',
},
],
};

3. 使用自定义 icon

如果内置 icon 不满足诉求,可以配置 customSVGIcons 来额外注册自己的 icon, 自定义 icon 同时适用于主题配置,意味着你也可以调整它的大小,颜色(在线链接不支持),具体请查看 主题配置 章节。

支持三种方式:

  • 字符串
  • 本地文件
  • 在线链接
import Icon from '/path/to/icon.svg'
const s2Options = {
customSVGIcons: [
{
name: 'CustomIcon',
// 1. 字符串(支持自定义颜色)
src: `<?xml version="1.0" encoding="UTF-8"?><svg t="1634603945212" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="558" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" fill="currentColor"><defs><style type="text/css"></style></defs><path d="M605.61 884.79h-24.26c-21.34 0-38.66 17.32-38.66 38.66 0 21.34 17.32 38.66 38.66 38.66h24.26c21.34 0 38.66-17.32 38.66-38.66 0-21.35-17.32-38.66-38.66-38.66z" fill="#040000" p-id="559"></path><path d="M950.47 419.76c-22.17-15.48-51.17-16.01-73.92-1.33L715.7 522.53 573.09 223.42c-10.95-22.98-33.55-37.43-58.97-37.75h-0.85c-25.09 0-47.67 13.84-59.05 36.29L302.25 521.82 154.9 419.61c-22-15.18-50.71-15.73-73.27-1.46-22.53 14.32-34.23 40.57-29.8 66.9l70.9 421.76c5.33 32.04 32.82 55.3 65.31 55.3h272.43c21.34 0 38.66-17.32 38.66-38.66 0-21.34-17.32-38.66-38.66-38.66H197.44l-64.99-386.62 136.17 94.46a66.14 66.14 0 0 0 54.01 9.79 66.097 66.097 0 0 0 42.81-34.28l147.54-291.11 138.35 290.2c8.21 17.19 23.41 30.03 41.76 35.19 18.37 5.24 38 2.21 53.99-8.1l148.62-96.17-87.74 386.65h-60.1c-21.34 0-38.66 17.32-38.66 38.66 0 21.34 17.32 38.66 38.66 38.66h68.96c31.16 0 57.71-21.22 64.58-51.57l95.72-421.86c5.97-26.39-4.47-53.42-26.65-68.93zM514.74 151.68c28.08 0 50.85-22.76 50.85-50.85s-22.77-50.85-50.85-50.85c-28.09 0-50.85 22.76-50.85 50.85s22.77 50.85 50.85 50.85zM973.15 277.37c-28.08 0-50.85 22.77-50.85 50.85 0 28.09 22.76 50.85 50.85 50.85 28.08 0 50.85-22.76 50.85-50.85 0-28.08-22.77-50.85-50.85-50.85zM101.69 328.22c0-28.08-22.76-50.85-50.85-50.85S0 300.14 0 328.22c0 28.09 22.76 50.85 50.85 50.85s50.84-22.77 50.84-50.85z" fill="#040000" p-id="560"></path></svg>`,
// 2. 本地文件(支持自定义颜色,本质上也是字符串)
src: Icon,
// 3. 在线链接 (不支持自定义颜色)
src: 'https://gw.alipayobjects.com/zos/bmw-prod/f44eb1f5-7cea-45df-875e-76e825a6e0ab.svg',
},
],
}

也可以覆盖内置 icon, 例如自定义树状表格收起展开 icon. 查看示例

const s2Options = {
customSVGIcons: [
{
name: 'Plus',
src: 'https://gw.alipayobjects.com/zos/antfincdn/kXgP1pnClS/plus.svg',
},
{
name: 'Minus',
src: 'https://gw.alipayobjects.com/zos/antfincdn/2aWYZ7%26rQF/minus-circle.svg',
},
],
}

4. 自定义 icon 颜色

图标颜色默认和文本颜色一致,遵循 主题配置

const s2Options = {
headerActionIcons: [
{
icons: [{ name: 'SortDown', position: 'left', fill: 'red' }],
belongsCell: 'colCell',
},
],
};

提示

如果是彩色图标,希望使用图标自身颜色,可以将 fill 设置为 null.

const s2Options = {
headerActionIcons: [
{
- icons: [{ name: 'SortDown', position: 'left', fill: 'red' }],
+ icons: [{ name: 'SortDown', position: 'left', fill: null }],
belongsCell: 'colCell',
},
],
};

5. 自定义展示逻辑

  • defaultHide: 默认隐藏,鼠标在对应单元格悬停时才展示。
  • displayCondition: 动态控制 icon 是否渲染。

自定义数值单元格 icon

提示

对于数值单元格,我们可以使用通用的 字段标记 能力来进行自定义 icon 的展示,详情请查看 字段标记 章节。

import Icon from '/path/to/icon.svg'
const s2Options = {
customSVGIcons: [
{
name: 'CustomIcon',
src: Icon,
},
],
conditions: {
icon: [
{
field: 'number',
mapping(fieldValue, data) {
return {
// 使用自定义 icon 名称
icon: 'CustomIcon',
// 自定义颜色 (在线链接不支持)
fill: '#30BF78',
};
},
},
],
},
}

自定义绘制 icon

S2 表格是一个 Canvas 画布,所以你可以绘制任意的图形在表格里,比如 icon, 可以查看 单元格内绘制图标和图形 章节了解更多。

HeaderActionIcon

optional object

功能描述:为表格行列头角头注册自定义操作 icon。

参数说明类型默认值必选取值版本
icons已经注册的 icon 名称,或用户通过 customSVGIcons 注册的 icon 名称,如果是字符串形式,则 position 默认为 'right',也可以使用对象的形式,显示指定 icon 的位置string[] | {name:string,position:'right'|'left'}[]✓2.0.0
belongsCell需要增加操作图标的单元格名称string[]✓角头:'cornerCell';
列头:'colCell';
行头:'rowCell'
defaultHide控制是否 hover 才展示 iconboolean | (meta: Node, iconName: string) => booleanfalsetrue1.26.0 支持配置为一个函数
displayCondition展示的过滤条件,可以通过该回调函数用户自定义行列头哪些层级或单元格需要展示 icon。 所有返回值为 true 的 icon 会展示给用户。(mete: Node, iconName: string) => boolean;1.26.0 回传 iconName 并按单个 icon 控制显隐
onClickicon 点击之后的执行函数(headerIconClickParams: HeaderIconClickParams) => void;1.26.0
onHovericon hover 开始及结束之后的执行函数(headerIconHoverParams: HeaderIconHoverParams) => void;1.26.0

​

HeaderActionIconProps

required object

功能描述: 点击自定义操作 icon 后透视表返回的当前 icon 相关的信息

参数功能描述类型默认值必选
iconName当前 icon 名称string✓
meta当前 cell 的 meta 信息Node✓
event当前点击事件信息Eventfalse✓

CustomSVGIcon

optional object

功能描述:用于用户注册自己的 icon 图标, 目前只支持 svg 格式

参数说明类型默认值必选
name内置或自定义的 icon 名称string-✓
src目前支持三种格式的 svg 字符串:
1、base 64
2、svg 本地文件
3、线上图片地址 (不支持替换颜色)
string-✓