office-fabric - @fluentui/react DetailsList 始终显示列标题

Question

有什么方法可以让我的@fluentui/react“DetailsList”的列标题在向下滚动时始终显示在顶部？

是否有另一个 @fluentui/react 可以做到这一点？

谢谢

Answer 1

现在可以使用 Sticky 控件和 ScrollablePane。

来自这里的信息： https ://developer.microsoft.com/en-us/fluentui#/controls/web/scrollablepane

首先，您需要在列表周围定义一个 ScrollablePane，并提供一个自定义标题渲染器。

<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>

然后你需要提供一个标题渲染器（onRenderDetailsHeader），例如这样

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

嘿普雷斯托！