如何配置DetailsList的detailsHeader实现表头文本显示tooltip

核心配置逻辑 #

Fluent UI v8 不需要单独修改detailsHeader全局属性，直接在列配置IColumn中注入表头渲染逻辑即可生效。 #

步骤1：导入依赖组件 #

import { 
  DetailsList, 
  IColumn, 
  TooltipHost, 
  ITooltipHostStyles,
  TooltipOverflowMode 
} from '@fluentui/react';

步骤2：为列配置添加自定义渲染逻辑 #

每列的onRenderHeader回调返回被TooltipHost包裹的表头内容即可：

const tableColumns: IColumn[] = [
  {
    key: 'userName',
    name: '用户名称（超长文本测试）',
    fieldName: 'userName',
    minWidth: 120,
    maxWidth: 120,
    onRenderHeader: (column) => {
      // 适配表头容器的溢出样式
      const tooltipHostStyles: Partial<ITooltipHostStyles> = {
        root: {
          width: '100%',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap'
        }
      };
      return (
        <TooltipHost
          // tooltip显示内容，可自定义
          content={column?.name}
          // 仅当文本溢出时显示tooltip，不需要可移除
          overflowMode={TooltipOverflowMode.OverflowOnly}
          styles={tooltipHostStyles}
        >
          {column?.name}
        </TooltipHost>
      )
    }
  },
  // 其余列按相同规则配置即可
];

步骤3：直接使用DetailsList组件 #

const TableDemo = () => {
  // 你的表格数据
  const tableItems = [
    { userName: '张三', age: 20 },
    { userName: '李四', age: 25 }
  ];
  return <DetailsList items={tableItems} columns={tableColumns} />;
};

全局统一配置方案 #

如果需要所有列表的表头默认带Tooltip，不需要逐个列配置，可以封装通用的列处理函数：

const generateColumnsWithTooltip = (originColumns: IColumn[]): IColumn[] => {
  return originColumns.map(col => ({
    ...col,
    onRenderHeader: (column) => {
      const tooltipHostStyles: Partial<ITooltipHostStyles> = {
        root: {
          width: '100%',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap'
        }
      };
      return (
        <TooltipHost
          content={column?.name}
          overflowMode={TooltipOverflowMode.OverflowOnly}
          styles={tooltipHostStyles}
        >
          {column?.name}
        </TooltipHost>
      )
    }
  }))
};
// 使用时直接传入原始列配置即可
const columns = generateColumnsWithTooltip(yourOriginalColumns);

内容的提问来源于stack exchange，提问作者bunny