React Fluent UI DetailsList如何同时显示表头名称与搜索框

问题原因 #

你当前的自定义表头逻辑错误覆盖了列头默认渲染规则：onRenderColumnHeaderTooltip 是每个列头单元格的内容渲染回调，你直接在回调中返回SearchBox组件，相当于把每个列头原本渲染的列名文本完全替换为搜索框，最终出现只剩搜索框、列名丢失的问题。

可落地方案 #

根据搜索框使用场景二选一即可：

方案1：表头顶部追加全局搜索框（推荐全局筛选场景） #

不改动原有列头的渲染逻辑，只在默认表头上方追加独立的搜索区域，完全保留原生表头的列名、排序、列宽拖拽等能力，代码实现如下：

import { DetailsList, IDetailsHeaderProps, SearchBox, Stack } from '@fluentui/react';

// 自定义表头渲染
const renderDetailsHeader = (props: IDetailsHeaderProps, defaultRender?: (props?: IDetailsHeaderProps) => JSX.Element | null) => {
  if (!defaultRender) return null;
  return (
    <Stack>
      {/* 独立全局搜索框 */}
      <SearchBox
        placeholder="输入内容筛选"
        onSearch={(newValue) => {
          // 此处编写筛选逻辑
          console.log("筛选值：", newValue);
        }}
        showIcon
        styles={{ root: { padding: '8px 4px' } }}
      />
      {/* 传入原始props渲染默认表头，保留所有原生表头能力 */}
      {defaultRender(props)}
    </Stack>
  );
};

// 业务组件使用
export function OperationsTable() {
  return (
    <div data-is-scrollable={true}>
      <div>
        <DetailsList
          items={operations}
          columns={columns}
          selectionMode={0}
          isHeaderVisible={true}
          className="class-table"
          onRenderDetailsHeader={renderDetailsHeader}
        />
      </div>
    </div>
  );
}

方案2：每个列头内嵌入对应搜索框（推荐列维度筛选场景） #

如果需要给每一列单独配置筛选输入框，不要直接替换onRenderColumnHeaderTooltip的全部返回内容，需要手动把列名渲染出来，再追加搜索框：

import { DetailsList, IDetailsHeaderProps, SearchBox, Stack, IColumn } from '@fluentui/react';

const renderDetailsHeader = (props: IDetailsHeaderProps, defaultRender?: (props?: IDetailsHeaderProps) => JSX.Element | null) => {
  if (!defaultRender) return null;

  return defaultRender({
    ...props,
    onRenderColumnHeaderTooltip: (tooltipProps) => {
      const currentColumn = tooltipProps?.column as IColumn;
      return (
        <Stack tokens={{ childrenGap: 4, padding: '4px 0' }}>
          {/* 渲染原有列名 */}
          <span className="column-header-name">{currentColumn?.name}</span>
          {/* 渲染当前列对应的搜索框 */}
          <SearchBox
            placeholder={`筛选${currentColumn?.name}`}
            onSearch={(newValue) => {
              // 此处编写对应列的筛选逻辑
              console.log(`列${currentColumn?.key}筛选值：`, newValue);
            }}
            showIcon
          />
        </Stack>
      );
    }
  });
};

注意事项 #

非必要不要覆盖onRenderColumnHeaderTooltip属性，该属性默认负责渲染列名文本、悬浮提示内容，直接全量替换返回值必然导致原生列头内容丢失。如果只是要在表头区域加额外元素，优先在defaultRender调用的外层追加元素，不要改动默认渲染的入参。

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