React - Fluent UI DetailsList onRenderDetailsHeader

Question

I am currently running DetailsList in Fluent UI like this: 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>
  );
}

When i am adding onRenderDetailsHeader looks like this: 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
        />
      );
    },
  });
}

Can someone please help me to display both: header names and search fields?

Thank you very much!

Answer 1

onRenderColumnHeaderTooltip: (props: IDetailsColumnRenderTooltipProps) => {
      return (
        <SearchBox
          placeholder={props.column?.name}
          ...