@fluentui/react DetailsList with the Column headers always Showing

Question

Any way I can make the Column headers of my @fluentui/react "DetailsList" always show at the top when scrolling down?

Is there another @fluentui/react that does it?

Thank you

Answer 1

This is now possible with a Sticky control, and a ScrollablePane.

Information from here: https://developer.microsoft.com/en-us/fluentui#/controls/web/scrollablepane

First, you'll need to define a ScrollablePane around your list, and provide a custom header renderer.

<ScrollablePane scrollbarVisibility={ScrollbarVisibility.auto}>
  <MarqueeSelection selection={this._selection} 
     isDraggingConstrainedToRoot={true} >
  <DetailsList compact={true} items={items} columns={this._columns}
     selectionMode={SelectionMode.multiple} 
     selection={this._selection} 
     selectionPreservedOnEmptyClick={true}
     onRenderDetailsHeader={this.renderFixedDetailsHeader} />
  </MarqueeSelection>
</SrollablePane>

Then you'll need to provide a header renderer (onRenderDetailsHeader), like this for example

private renderFixedDetailsHeader: IRenderFunction<IDetailsHeaderProps> = (props, defaultRender) => {
  if (!props) {
    return null;
  }
  const onRenderColumnHeaderTooltip: IRenderFunction<IDetailsColumnRenderTooltipProps> = 
     tooltipHostProps => (
        <TooltipHost {...tooltipHostProps} />
      );
  return (
    <Sticky stickyPosition={StickyPositionType.Header} isScrollSynced>
      {defaultRender!({
         ...props,
         onRenderColumnHeaderTooltip,
      })}
    </Sticky>
  );
}

Hey Presto!