表格自定义单元格icon能否支持多个icon🙏

[lin-hfy]

🏷 Version

Package	Version
@antv/s2	1.51.1
@antv/s2-react
@antv/s2-vue

Sheet Type

• PivotSheet
• TableSheet
• GridAnalysisSheet
• StrategySheet
• EditableSheet

🖋 Description

表格单元格自定义icon能否支持多个icon，目前好像一个单元格只能显示一个icon？

我们的需求：使用tooltip给单元格添加备注信息
我们期望能提供单元格右上角添加tag，如下：

--忽略蓝色箭头

查阅文档后发现自定义单元格icon有许多存在限制的点：只提供数值左右的icon，icon数量只能一个

目前希望自定义单元格icon可以支持多个icon，有余力的话也希望可以支持图中类似单元格角标的功能

🏞 What problem does this feature solve

🧐 Suggest the API

name	type	default	description
-	-	-	-

[github-actions]

你好 @lin-hfy，请编辑你的 issue 标题, 一个言简意赅的 issue 标题可以节省大家的时间, 请不要将标题当做正文, 或者为空。

Hello, @lin-hfy, please edit your issue title. a concise issue title will save everyone time. please do not leave the title as the body or empty.

[lijinke666]

自定义icon能否支持多个icon

你指的 [自定义 icon] 是行列头 (headerActionIcons) 还是字段标记 (conditions) ? 前者是支持的, 字段标记确实不支持, 会考虑在 2.0 版本中迭代 (增加多个 icon 和自定义 position 的能力), 目前的方案可以参考下文.

期望能提供单元格右上角添加tag

表格是 Canvas, 目前你可以自定义 DataCell, 然后自己在右上角绘制一个 icon 或者一个图形, 数值左右绘制多个 icon 也可以通过这种方式.

import { PivotSheet, DataCell, renderIcon } from '@antv/s2';

class CustomDataCell extends DataCell {
  initCell() {
    super.initCell()

    this.drawIcon()
  }

  drawIcon() {
    const { width, height, x, y } = this.meta
    const size = 12

    // 当前文本宽度 this.actualTextWidth, 你可以结合 meta 计算坐标自行绘制多个 icon
    if(this.meta.fieldValue === 7789) {
      const icon = renderIcon(this, {
        x: width - size,
        y: y,
        // 内置或者通过 customSVGIcons 注册的 icon 名
        name: 'Plus',
        width: size,
        height: size,
        fill: 'red'
      })

      icon.on('click', () => {
        console.log('...')
      })
    }
  }
}

[wzdong26]

自定义icon能否支持多个icon

你指的 [自定义 icon] 是行列头 (headerActionIcons) 还是字段标记 (conditions) ? 前者是支持的, 字段标记确实不支持, 会考虑在 2.0 版本中迭代 (增加多个 icon 和自定义 position 的能力), 目前的方案可以参考下文.

期望能提供单元格右上角添加tag

表格是 Canvas, 目前你可以自定义 DataCell, 然后自己在右上角绘制一个 icon 或者一个图形, 数值左右绘制多个 icon 也可以通过这种方式.

import { PivotSheet, DataCell, renderIcon } from '@antv/s2';

class CustomDataCell extends DataCell {
  initCell() {
    super.initCell()

    this.drawIcon()
  }

  drawIcon() {
    const { width, height, x, y } = this.meta
    const size = 12

    // 当前文本宽度 this.actualTextWidth, 你可以结合 meta 计算坐标自行绘制多个 icon
    if(this.meta.fieldValue === 7789) {
      const icon = renderIcon(this, {
        x: width - size,
        y: y,
        // 内置或者通过 customSVGIcons 注册的 icon 名
        name: 'Plus',
        width: size,
        height: size,
        fill: 'red'
      })

      icon.on('click', () => {
        console.log('...')
      })
    }
  }
}

佬，请问按照这个方式自定义完 DataCell 后如何控制单元格宽度随文字和icon的宽度自动撑开？目前尝试定义了icon贴近单元格右边，但是由于单元格宽度不会被icon撑开导致icon悬浮在文字上方了

[lijinke666]

如何控制单元格宽度随文字和icon的宽度自动撑开

@wzdong26 没办法做到, Canvas 中所有的宽高和坐标都需要自己计算, 这个也是它的弊端. 你只能根据文字宽度和图标的宽度, 计算出单元格宽度, 比较麻烦, 不太建议.

建议通过 s2Options.style 预设一个较大的 datacell 宽度, 预留 icon 的空间

请不要在存量 issue 中回复, 使用问题请在讨论区提问: https://github.com/antvis/S2/discussions