VisActor / VisActor/VTable

[QUESTION]请问自定义渲染单元格如何实现以下效果?

Open
#4,257 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
3.7k
Forks
486
Avg merge
1d 19h
Merged PRs (30d)
16

Description

Image 如上图,业务需求是链接类型的单元格,鼠标移入时,字体呈现主题色,并且在文字后方出现一个icon。 目前我使用customLayout 自定义单元格,参考官方示例,使用flex布局实现如下效果:

Image

代码为:

const CustomTitleLayout = (args) => {
  const { table, row, col, rect } = args
  const { height, width } = rect ?? table.getCellRect(col, row)
  const record = table.getCellOriginRecord(col, row)
  const field = table.getHeaderField(col, row)
  const [hover, setHover] = useState(false)
  // console.log(args, record, record?.original_link)
  const container = (
    <Group
      attribute={{
        // width: width - 12,
        // height: height - 20,
        width,
        // height,
        boundsPadding: 10,
        dy: 10,
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'flex-start',
        // alignContent: 'center',
        alignItems: 'center',
        cursor: 'pointer'
      }}
      onClick={() => {
        if (!record?.original_link) return
        createTagA(record?.original_link)
      }}
      onMouseEnter={() => {
        setHover(true)
      }}
      onMouseLeave={() => {
        setHover(false)
      }}
    >
      <Text
        attribute={{
          text: record?.[field] || '--',
          fill: hover ? '#0ca448' : '#333',
          fontSize: 14,
          fontFamily: 'sans-serif',
          whiteSpace: 'normal',
          maxLineWidth: width - 35,
          cursor: 'pointer',
          lineHeight: 22,
          boundsPadding: [0, 5, 0, 10],
          disableAutoClipedPoptip: true
        }}
      ></Text>
      {hover && (
        <Image
          attribute={{
            width: 14,
            height: 14,
            cursor: 'pointer',
            image: IconRedirect,
            boundsPadding: [3, 0, 0, 0]
          }}
        ></Image>
      )}
    </Group>
  )
  return container
}

请问如何配置customLayout ,使鼠标移入后,显示icon,且icon跟随文字后且文字可以换行。

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the customLayout API and the supplied CustomTitleLayout example. Check how Group, Text, and Image handle hover state, wrapping, sizing, and child positioning. Done means a hovered link cell shows the icon after the wrapped text, keeps the requested styling, and preserves click behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.