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

嘿普雷斯托！

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

1 个答案: