如何在 Fabric DetailsList 中呈现包含文本和工具提示图标的列 header

Question

在 DetailsList 中，是否可以使用文本和带有工具提示的图标呈现特定列 header：（我尝试使用 onRenderDetailsHeader，但我不确定如何处理特定的列）。

Answer 1

这是我很快整理的 Codepen。唯一的问题是我无法将信息图标呈现为工具提示的目标。也许这会给你一个好的开始。

function onRenderDetailsHeader(props, defaultRender?) {
   return defaultRender!({
      ...props,
      onRenderColumnHeaderTooltip: (tooltipHostProps) => {
         return (
            <Fabric.TooltipHost {...tooltipHostProps} />
         )
      }
   })
}

Answer 2

一种hack方式，虽然name prop定义为string类型，但实际上我们可以传递一个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} .../>

效果：

Answer 3

我的解决方案与 Vitalie Braga's, but with a more detailed return of the onRenderColumnHeaderTooltip you can achieve this functionality. I based populating the tooltipHostProps.children from this stack overflow question 类似，您还可以在此处查看有关样式化工具提示 header 的更多信息。

实现过滤的一种方法是查看 tooltipHostProps.id 以指定您只需要某些列 header 单元格上的工具提示图标。在您的示例中，代码如下所示：

function onRenderDetailsHeader(props, defaultRender?) {
   return defaultRender!({
      ...props,
      onRenderColumnHeaderTooltip=(tooltipHostProps) => (
            <>
                <span>
                    {tooltipHostProps?.children}
                </span>
                {tooltipHostProps?.id?.includes('value') &&
                    <span>
                        <TooltipHost content={"This is the tooltip"}>
                            <Icon iconName="info" />
                        </TooltipHost>
                    </span>
                }
            </>
        )}
   );
};

如何在 Fabric DetailsList 中呈现包含文本和工具提示图标的列 header

How to render a column header with both text and a tooltip icon in Fabric DetailsList

office-ui-fabric