React - Fluent UI DetailsList onRenderDetailsHeader

Question

我目前在 Fluent UI 中运行 DetailsList，如下所示： this is with headers

export function OperationsTable(this: any) {
  return (
    <div data-is-scrollable={true}>
      <div className={""}>
        <DetailsList
          items={operations}
          columns={columns}
          selectionMode={0}
          isHeaderVisible={true}
          className={"class-table"}
          // onRenderDetailsHeader={renderDetailsHeader}
        />
      </div>
    </div>
  );
}

当我添加onRenderDetailsHeader 看起来像这样：only with search fields

  return (
    <div data-is-scrollable={true}>
      <div className={""}>
        <DetailsList
          items={operations}
          columns={columns}
          selectionMode={0}
          isHeaderVisible={true}
          className={"class-table"}
          onRenderDetailsHeader={renderDetailsHeader}
        />
      </div>
    </div>
  );
}
function renderDetailsHeader(props: any, defaultRender?: any) {
  return defaultRender!({
    ...props,
    onRenderColumnHeaderTooltip: () => {
      return (
        <SearchBox
          placeholder="Filter"
          onSearch={(newValue) => console.log("value is " + newValue)}
          showIcon
        />
      );
    },
  });
}

有人可以帮我同时显示：标题名称和搜索字段吗？

非常感谢！

Answer 1

您可以使用 Fluent ui 中的 Marqueee 来获取搜索功能 https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/basic