React - Fluent UI DetailsList onRenderDetailsHeader #23474

aosipov · 2022-06-09T14:51:18Z

aosipov
Jun 9, 2022

I am currently running DetailsList in Fluent UI like this:

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:

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
        />
      );
    },
  });
}