office-ui-fabric - 如何在 Fabric DetailsList 中呈现包含文本和工具提示图标的列标题

Question

在 DetailsList 中，是否可以使用文本和带有工具提示的图标呈现特定的列标题，如下所示:(我尝试使用 onRenderDetailsHeader，但我不确定如何处理特定的列)。

Answer 1

一种hack方式，虽然name prop定义为字符串类型，但实际上我们可以传递一个ReactNode给它，只需要将它的类型转换为any即可。

示例代码:

import { Tooltip } from 'antd'
import { InfoCircleOutlined } from '@ant-design/icons'

const columns: IColumn[] = [
{
  name: <div>xxx <Tooltip title="tooltip"><InfoCircleOutlined /></Tooltip></div> as any,
  ...
},
...
]

<DetailsList columns={columns} .../>

效果: