FluentUI DetailsHeader not showing the “Select All” checkbox after integrating a tooltip


I’m working on a Fluent UI DetailsList to integrate a tooltip on the column headers when specified. I tried the approach given below, with renderColumnHeaderTooltip function rendering the tooltip and the rest of the column header.

onRenderDetailsHeader = React.useCallback((props?: Fluent.IDetailsHeaderProps) => {
        if (!props) return <span />
        const renderColumnHeaderTooltip = (tooltipHostProps: any) => {
          const column = props.columns.find(col => col.key === tooltipHostProps?.column?.key) as WaveColumn
          if (!column) return null
          return (
            <div style={{ display: 'flex', alignItems: 'center' }}>
                column.tooltip && (
                  <Fluent.TooltipHost content={column.tooltip} calloutProps={{ gapSpace: -10 }}>
                    <Fluent.Icon iconName="info" />
        return (
          <Fluent.Sticky stickyPosition={Fluent.StickyPositionType.Header} isScrollSynced>
              isAllCollapsed={groups?.every(group => group.isCollapsed)}
                root: {...},
                cellSizerEnd: {...},

This approach works, it displays the tooltip without an issue. But when the selectionMode=multiple on the DetailsList, it doesn’t display the checkbox for selecting all the rows anymore.

Expected Output

Expected Detailslist output

Actual Output

Actual output I'm getting

What I’ve tried

I tried passing the selectionMode to the DetailsHeader component like below, but still didn’t work.

              isAllCollapsed={groups?.every(group => group.isCollapsed)}
                props.selectionMode === 1
                  ? Fluent.SelectionMode.single
                  : props.selectionMode === 2
                  ? Fluent.SelectionMode.multiple
                  : Fluent.SelectionMode.none


I included onRenderDetailsHeader method here because that was where I did the changes which caused this issue. Can someone tell me what I’ve done wrong here? Or if you have implemented a similar functionality, what other approach I can take?